今回は、JS でこのポインターを使用する場合の注意事項について詳しく説明します。以下は実際のケースです。
具体的な実務においては、そのポイントは関数定義時には決定できず、関数の実行時に決定されますが、実行環境に応じて大きく以下の3種類に分けられます。関数が as の場合 通常の関数が呼び出された場合、this はグローバル オブジェクトを指します2. 関数がオブジェクトのメソッドとして呼び出された場合、this はオブジェクトを指します3。コンストラクター、これは新しく作成されたオブジェクトを指します例 1:
window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname
var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob
function Boy(name) { this.name = name; } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' } } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Jack
function Boy(name) { this.name = name; return 1; //返回非对象 } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
apply は、関数本体内の this のポインターを指定し、 2 番目のパラメーター パラメーターは、呼び出される 関数のパラメーター
のリストを渡すために使用される配列または配列に似たものです。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
例 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
例 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" オブジェクトのプロパティとして呼び出される場合、別の変数が "getName" メソッドを参照する場合、これは "boy" オブジェクトを指します。通常の関数、this グローバルオブジェクトの 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
推奨読書:
vue要素で音楽プレーヤー機能を作る(コード付き)以上がJSでのthisの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。