JSでのthisの指し方とcallとapplyの関数_基礎知識

この記事では、このポインタの基本的な JS コンテンツと、呼び出しと適用に関連する知識ポイントを共有します。興味のある友人はそれを学習して参照できます。

具体的な実務においては、そのポイントは関数定義時には決定できず、関数の実行時に決定されますが、実行環境に応じて大きく以下の3種類に分けられます。関数が as の場合 通常の関数が呼び出された場合、this はグローバル オブジェクトを指します

2. 関数がオブジェクトのメソッドとして呼び出された場合、this はオブジェクトを指します

3。コンストラクター、これは新しく作成されたオブジェクトを指します

例 1:

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

例 2:

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

例 3:

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

例 3 には、別の特殊なケースがあります。

constructor

は、今回は「return」を通じてオブジェクトを返します。操作の最終結果は、新しく作成されたオブジェクトではなく、このオブジェクトであるため、この場合は役に立ちません。

例 4:

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

例 5:

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

call と apply の役割 apply は、関数本体内の this のポインターを指定し、 2 番目のパラメーター パラメーターは、呼び出される

関数のパラメーター

のリストを渡すために使用される配列または配列に似たものです。

例 1:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call 渡されるパラメータの数は固定ではありません。 apply と同様に、最初のパラメータは、2 番目のパラメータから始まり、関数本体での this のポインタを指定するために使用されます。パラメータは呼び出された関数に順番に渡されます。

例 2:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

さらに、ほとんどの高度なブラウザーは、bind メソッドも実装しています。call および apply との違いは、bind は関数内で this のポインターを変更するだけで、すぐには実行されないことです。明示的に呼び出す必要があります。

例 3: ブラウザのバインドメソッドのシミュレーション

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

これを失いました 場合によっては、this へのポインタが失われることがあります。このとき、変更するには call、apply、bind を使用する必要があります。それ の指摘問題。

例 1: "getName" メソッドが "boy" オブジェクトの

property

として呼び出される場合、別の変数 がその "getName" メソッドを参照すると、このメソッドが呼び出されるため、これは "boy" オブジェクトを指します。通常の関数として、 これはグローバルオブジェクトの window を指す

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

例 2: 関数内で関数が定義されていても、通常のオブジェクトとして呼び出されれば、これも window オブジェクトを指すことになる

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

と思いますこの記事の事例を読んで方法をマスターした方は、さらに興味深い情報を入手してください。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

vue で個人情報を表示し、パスワードを変更する方法

Vue データ応答性原理の分析

以上がJSでのthisの指し方とcallとapplyの関数_基礎知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。