この問題は多くの人が犯しているようですが、私はまだこれについて十分に知りません
この問題を記録してみましょう。
obj = {
a: 123,
b: this.a,
c: function () {
return this.a;
}
};
console.log(obj.b); // undefined
console.log(obj.c()); // 123
簡単に言うと、これはスコープの問題ですb
。属性のthisは実際には親スコープを指します。ここではウィンドウであり、ウィンドウで変数aを定義していません。c属性のthisはobjを指します。オブジェクト自体はスコープを作成できませんが、関数(メソッド)はローカルスコープを作成できるためです。
1.次に、最初にaをウィンドウに追加すると、結果は次のようになります。
var a = 5
obj = {
a: 123,
b: this.a,
c: function () {
return this.a;
}
};
console.log(obj.b); // 5
console.log(obj.c()); // 123
2.本当にbでaを取得したい場合は、cと同じ記述を使用します。
obj = {
a: 123,
b: function () {
return this.a;
},
c: function () {
return this.a;
}
};
console.log(obj.b()); // 123
console.log(obj.c()); // 123
3.次に、bのthisをobjに変更します
obj = {
a: 123,
b: obj.a,
};
console.log(obj.b);
案の定、エラーが報告されました。
4. 次に、this of cをobjに変更します
obj = {
a: 123,
c: function () {
return obj.a;
}
};
console.log(obj.c()); // 123
さすがに正常に出力できます。
5.最後に、arrow関数を使用してメソッドを記述します。独自のthisがないarrow関数は、親スコープであるwindowを継承します。
obj = {
a: 123,
c: ()=>{
return this.a
}
};
console.log(obj.c()); // undefined
概要:
1.グローバル環境のオブジェクトはグローバル環境の関数と同じで、これはウィンドウを指します
2.オブジェクトメソッドとして呼び出された場合、これはメソッドを呼び出したオブジェクトを指します
3.アロー関数は独自のthisを持たず、グローバルオブジェクトと同等であり、ウィンドウを指します。