JSでthisの方向を変える方法(callとappy、bind)

3090 ワード

thisはjavascriptのキーワードです.関数の使用によって、thisの値が変わります.しかし、一つの原則があります.つまり、thisは関数を呼び出す対象を指します.
thisは現在の使用者を指していますが、他の方法でその指向を変えることもできます.以下、3つの方法を紹介します.
1..calを相続として使用する場合:

function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);// this  Parent,         
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill
2.callとappyはどちらもthisの指向を変えることができますが、applyの2番目のパラメータはハッシュ分布で、callは1つの配列とすることができます.

console.log(Math.max.apply(null,[1,2,3,4]));//4
apply()方法は、2つのパラメータを受信する.一つは、機能を実行するスコープ、もう一つはパラメータ配列である.ここで、第二のパラメータは、Arayの例であっても良いし、argmentsオブジェクトであっても良い.call()方法とappy()方法の役割は同じで、それらの違いは、受信パラメータの方式が異なるだけである.call()法に対して,最初のパラメータはthis値に変化がなく,残りのパラメータは直接関数に伝達される.つまり、コール()法を使う場合は、関数に渡すパラメータを一つ一つ列挙しなければなりません.
3.ES 5はまた、bind()という関数の一例を作成し、そのthis値がbind()関数に渡す値に結合される方法を定義している.如き

window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue
ここではsayColor()がbind()を呼び出してオブジェクトoに入り、object SayColor()関数を作成します.object SayColor()関数のthis値はoに等しいので、グローバルスコープでこの関数を呼び出してもblueが見られます.
以上は小编でご绍介したJSでthisの指差を変える方法です.
以下はまだ時間がありますので、基礎知識を補充します.
一、方法の定義
コールの方法:
文法:call(thisObj,Object)
定義:現在のオブジェクトを別のオブジェクトに置き換える方法を呼び出します.
説明:
コール方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよい.call方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる.
thisObjパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用される.
アプリ方法:
文法:apply(thisObj,[argAray])
定義:オブジェクトを別のオブジェクトに置き換える方法を適用します.
説明:
もしargArayが有効な配列ではないか、またはargmentsオブジェクトではないなら、TypeErrorを引き起こすことになります.argArayおよびthisObjのいずれかのパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用され、任意のパラメータを伝達することができない.
コードの例:

function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call   object
 var dog = new Dog(["Black Dog"]); //apply   array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);
アナログcall、appyのthis置換

 function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();