JavaScriptベースのthisはいったいどこを指しているのか
1990 ワード
これまでフロントエンドの開発者が仕事を探して面接してきたポイントですが、これはいったいどこが神聖なのかについてお話しします.
ECMAScriptでは、thisキーワードは現在の実行環境のthis Bindingとして実行する.
MDNは、ほとんどの場合、関数の呼び出しがthisの指向を決定すると書いている.
簡単に言えば、thisの指向は呼び出し時に決定されるため、
グローバル実行コンテキスト:
グローバル実行コンテキストでは、thisの指向はwindowです.
ブラウザでは
関数実行コンテキスト:
関数実行コンテキストでは、thisの指向は関数の呼び出し方法に依存します.
直接呼び出すと、これはグローバルwindowを指します.
呼び出したオブジェクトを指し、ここでthisが指すオブジェクトはobjである.
コンストラクション関数のthis:
コンストラクション関数の作成するオブジェクトには、次の操作があります.新規オブジェクトの作成 thisをこのオブジェクト に向けます.オブジェクトに付与(属性、メソッド) this を返します
したがって、
DOMイベント処理関数:
ここのthisはe.target.
矢印関数のthis:矢印関数は独自の
これは嫌なthisがどこを指しているかの説明で、簡単ですが、無視しやすいです...
ECMAScriptでは、thisキーワードは現在の実行環境のthis Bindingとして実行する.
MDNは、ほとんどの場合、関数の呼び出しがthisの指向を決定すると書いている.
簡単に言えば、thisの指向は呼び出し時に決定されるため、
this
は実行期間バインドの特性を有する.グローバル実行コンテキスト:
グローバル実行コンテキストでは、thisの指向はwindowです.
console.log(this === window) // true
ブラウザでは
this
がwindow
オブジェクトに等価です.グローバル変数を宣言すると、これらの変数はthisのプロパティとして使用されます.関数実行コンテキスト:
関数実行コンテキストでは、thisの指向は関数の呼び出し方法に依存します.
function test() {
return this === window
}
test() // true
直接呼び出すと、これはグローバルwindowを指します.
var obj = {
name: 'cat',
age: 3,
say: function () {
console.log(this.name)
}
}
obj.say() // cat
呼び出したオブジェクトを指し、ここでthisが指すオブジェクトはobjである.
コンストラクション関数のthis:
コンストラクション関数の作成するオブジェクトには、次の操作があります.
したがって、
this
は、作成されたこのオブジェクトを指します.function Person(name){
this.name = name;
this.age = 25;
this.say = function(){
console.log(this.name + ":" + this.age);
}
}
var person = new Person("axuebin");
console.log(person.name); // axuebin
person.say(); // axuebin:25
DOMイベント処理関数:
this
は、開始イベントハンドラによってバインドされたDOMノードであるトリガイベントの要素を指す.var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
console.log(this);
console.log(this === e.target); // true
})
ここのthisはe.target.
矢印関数のthis:矢印関数は独自の
this, this
を作成しません.したがって、以下のコードでは、setInterval
に渡される関数内のthis
は、閉じた関数のthis
と同じ値である.function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| p
}, 1000);
}
var p = new Person();
これは嫌なthisがどこを指しているかの説明で、簡単ですが、無視しやすいです...