ES 6矢印関数におけるthisバインディング問題
2258 ワード
this指向の問題についての議論はずっとjsを勉強してきました.無視できない重要な部分です.それらは一つまた一つとしてthisをめぐる筆記試験の穴で、永遠に書ききれないようです.
次の段を見てください
もしここで矢印関数を使ったら?
一般関数と矢印関数のthis方向の違いをより明確にするために、オブジェクトに変数を追加します.
これからもっと複雑な状況を見ます.
多層ネストの矢印関数
1.矢印関数のthisバインディングから見たのはthisの関数です.どのオブジェクトにバインドされているかは、どのオブジェクトを指しますか?
2.オブジェクトがネストされている場合は、一番近い層のオブジェクトにthisが結合されます.
var obj={
fn:function(){
console.log(this);
}
}
obj.fn();//object
以上のこのコードはもっと浅くて目立たないthis指向問題です.つまり、誰が呼んだ関数ですか?関数体の中のthisは誰を指しますか?次の段を見てください
var obj={
fn:function(){
setTimeout(function(){
console.log(this);
});
}
}
obj.fn();//window
今回のthisは最外層のwindowオブジェクトを指しています.なぜですか?それともその通りですか?今回のthisは大域関数setTImeout()の中の匿名関数に現れて、あるオブジェクトが表示呼び出しを行っていないので、thisはwindowオブジェクトを指します.もしここで矢印関数を使ったら?
var obj={
fn:function(){
setTimeout(() => {
console.log(this);
});
}
}
obj.fn();//object
thisはまた関数の宿主オブジェクトを指しました.一般関数と矢印関数のthis方向の違いをより明確にするために、オブジェクトに変数を追加します.
var obj={
num:3,
fn:function(){
setTimeout(function(){
console.log(this.num);
});
}
}
obj.fn();//undefined
//............................................................
var obj1={
num:4,
fn:function(){
setTimeout(() => {
console.log(this.num);
});
}
}
obj1.fn();//4
は、上述のコードのように、矢印関数を使用しない場合には、thisはwindow(匿名関数、呼び出されていない宿主オブジェクト)を指し、windowオブジェクトはnum属性(num属性はobjで定義されています)がなく、矢印関数を使用する場合には、thisの指向はオブジェクトobj 1を指し、Obj 1で定義された属性numを自然に出力することができます.これからもっと複雑な状況を見ます.
多層ネストの矢印関数
var obj1={
num:4,
fn:function(){
var f=() => { //object, obj1
console.log(this);
setTimeout(() => {
console.log(this);// //object, obj1
});
}
f();
}
}
obj1.fn();
もし私たちが二重矢印関数の一つを変更したら、どのような結果が出るかを確認します.var obj1={
num:4,
fn:function(){
var f=function(){
console.log(this); //window, f ,this window
setTimeout(() => {
console.log(this);//window, this window, window ( )
});
}
f();
}
}
obj1.fn();
はい、次は他のところに変えます.var obj1={
num:4,
fn:function(){
var f=() => {
console.log(this); //object,f() obj1 ,this obj1, this
setTimeout(function() {
console.log(this);//window, , , this window
});
}
f();
}
}
obj1.fn();
まとめ:1.矢印関数のthisバインディングから見たのはthisの関数です.どのオブジェクトにバインドされているかは、どのオブジェクトを指しますか?
2.オブジェクトがネストされている場合は、一番近い層のオブジェクトにthisが結合されます.