ES 6矢印関数におけるthisバインディング問題

2258 ワード

this指向の問題についての議論はずっとjsを勉強してきました.無視できない重要な部分です.それらは一つまた一つとして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が結合されます.