JSでこのポインタを変更するメソッド(call、apply、bind)_javascriptスキル

これは JavaScript のキーワードであり、関数がさまざまな状況で使用されると、この値は変化します。ただし、常に原則があり、これは関数を呼び出すオブジェクトを参照します。

これは通常、現在の呼び出し先を指しますが、他の方法で変更することもできます:

1. 継承として使用する場合:

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 と apply の両方で、これを を指すように変更できますが、apply の 2 番目のパラメーターはハッシュ分布であり、call は配列

にすることができます。

console.log(Math.max.apply(null,[1,2,3,4]));//4

apply() メソッドは 2 つのパラメーターを受け取ります。1 つは関数を実行するスコープで、もう 1 つはパラメーター配列です。このうち、2 番目のパラメーターは Array のインスタンスまたは引数オブジェクトにすることができます。 call() メソッドは apply() メソッドと同じ効果を持ちますが、パラメータの受け取り方法が異なるだけです。 call()
の場合 メソッドに関する限り、最初のパラメーターの this 値は変わりません。変更されるのは、残りのパラメーターが関数に直接渡されることです。つまり、call() メソッドを使用する場合、関数に渡されるパラメータを 1 つずつ列挙する必要があります。

3.ES5 ではメソッド :bind() も定義されています。これは関数のインスタンスを作成し、その this 値は binding() 関数の値にバインドされます。 。

など

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 を渡し、objectSayColor() 関数を作成します。 objectSayColor() 関数の this 値は o に等しいため、この関数がグローバル スコープで呼び出された場合でも、青が表示されます。

上記は、JS でこのポインターを変更する (呼び出し、適用、バインド) ためにエディターが紹介する方法です。お役に立てば幸いです。

まだ時間があるので、call() と apply() の違いについての基本的な知識を追加します

1. メソッドの定義

メソッドの呼び出し:

構文: call(thisObj, Object)

定義: オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。

手順:

call メソッドを使用すると、別のオブジェクトに代わってメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。

thisObj パラメーターが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。

適用方法:

構文: apply(thisObj, [argArray])

定義: オブジェクトのメソッドを適用して、現在のオブジェクトを別のオブジェクトに置き換えます。

説明:

argArray が有効な配列でない場合、または引数オブジェクトではない場合、TypeError が発生します。
argArray も 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);

呼び出しをシミュレートし、この置換を適用します

 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();