JavaScriptの中のapplyの方法とcallの使い方を紹介します.

2841 ワード

1、各関数には相続ではない二つの方法が含まれています.
2、彼らの用途は同じで、すべて特定のスコープの中で関数を呼び出します.
3、受信パラメータは違っていますが、apply()は二つのパラメータを受け取ります.一つは関数運行のスコープ、もう一つはパラメータ配列です.
call()メソッドの最初のパラメータはappy()方法と同じですが、関数に渡すパラメータは列挙しなければなりません.
例1:
 
  
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
  console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //huo .call(this);
HelloName.call(myObject);
実行結果は:
ハローdiz song glad to meet you!
ハローmy Object glad to meet you!
例2:
 
  
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30
解析:例1では、appy()とcall()の実際の使用地は、関数を拡張して実行することができる役割領域であることを発見しました.伝統的な方法で実現したいなら、下記のコードを参照してください.
 
  
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!
赤いコードを参照してください.Hello Name()関数の役割領域を対象myObjectに動的に作成する必要があります.この属性はハローName()関数にポインタとして向けられています.このようにmyObject.Hello Name()を呼び出すと、関数内部のthis変数はmyObjectを指します.オブジェクトの内部の他の共通属性を呼び出すこともできます.
例2を分析することによって、call()とappy()の関数の本当の使い方が見られます.実際のプロジェクトでは、実際に柔軟に処理する必要があります.
小さな問題:関数で関数を定義する場合、this変数の状況をもう一度見てください.
 
  
function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); // !!!!
実行結果は以下の通りです.
 
  
function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj);
4、bind()メソッドがこの方法をサポートするブラウザには、IE 9+、Firefox 4+、Safari 5.1+、Opera 12+、Chromeがあります.それはECMAScript 5に属する方法です.直接例を見る:
 
  
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o);
OSayColor(); //blue
ここで、sayColor()は、bind()方法を呼び出して、oオブジェクトに伝え、OsayColor()関数に戻り、OsayColor()では、thisの値はoオブジェクトとなる.