this的綁定（四種綁定）+ 箭頭函數 的this

一、this的默認綁定

當一個函數沒有明確的調用對象的時候，也就是單純作為獨立函數調用的時候，將對函數的this使用默認綁定：綁定到全局的window對象

例子1：

function foo(){
	console.log(this===window)
}
foo();//true

重點：迷惑性的例子

function fn(){
	function fn1(){
		console.log(this===window);
	}
	fn1();
}
fn();//true

函數fn1在一個外部函數fn里面聲明並且調用了，他的this依然指向window，因為【沒有明確的調用對象時，講對函數的this使用默認綁定：綁定到全局的window對象】

加強版迷惑例子：

var obj = {
	fn:function(){
		function innerfn(){
			console.log(this===window);
		}
		innerfn();//獨立調用
	}
}
obj.fn();//true

　這里例子中，obj.fn()調用實際上是用了this的隱式綁定

【總結】凡是函數作為獨立函數調用，無論它的位置在哪，它行為表現都和直接在全局環境中調用無異

二、this的隱式綁定

當函數被一個對象所“包含”的時候，我們稱函數的this被隱式綁定到這個對象里面，這時候，通過this可以直接訪問所綁定的對象里面的其他屬性

例子：

 

var obj = {
	a:1,
	fn:function(){
		console.log(this);//obj({a: 1, fn: ƒ})
		function fn1(){
			console.log(this);//Window 
		}
		fn1();
	}
}
obj.fn();

結果

 

對比一下這兩個代碼

//第一段代碼
function fn(){
	console.log(this.a)
}
var obj = {
	a:1,
	fn:fn
}
obj.fn();//1

//第二段代碼
var obj = {
	a:1,
	fn:function(){
		console.log(this.a);
		console.log(this);
	}
}
obj.fn();//1

fn()函數不回因為定義的位置在obj對象的內部和外部有任何區別,誰調用他誰就是this,所以在這個場景下fn()函數的this就是對象obj

三、this的顯式綁定【call()、bind()、apply()】

直接例子

 

var name='小紅',age=18;
var obj = {
   name:'小黃',
   objAge:this.age,
   myFn:function(){
       console.log(this.name + '年齡' + this.age); 
	}  
}
var db = {
	name:'小藍',
	age:24
} 
obj.myFn.call(db);
obj.myFn.apply(db);
obj.myFn.bind(db)();

 

　結果

　

結論：bind 返回的是一個新的函數，你必須調用它才會被執行

 多個傳參情況下

var name='小紅',age=18;
var obj = {
   name:'小黃',
   objAge:this.age,
   myFn:function(fm,t){
       console.log(this.name + '年齡' + this.age , '來自' + fm + '去往' + t); 
	}  
}
var db = {
	name:'小藍',
	age:24
} 
obj.myFn.call(db,'廣州','上海');
obj.myFn.apply(db,['廣州','上海']);
obj.myFn.bind(db,'廣州','上海')();
obj.myFn.bind(db,['廣州','上海'])();

　結果

總結

　　call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象，第二個參數差別就來了：

　　call的參數是直接放進去的，第二第三第n個參數全都用逗號分隔，直接放到后面  obj.myFun.call(db,'成都', ... ,'string' )；

　　apply的所有參數都必須放在一個數組里面傳進去  obj.myFun.apply(db,['成都', ..., 'string' ]);

　　bind除了返回是函數以外，它 的參數和call 一樣。

 

四、new綁定

執行new操作的時候，將創建一個新的對象，並且將構造函數的this指向所創建的新對象

五、箭頭函數的this

箭頭函數是沒有this的，箭頭函數中的this只取決於包裹箭頭函數的第一個普通函數的this。

PS：以上是參考了其他博主的自己做的筆記而已