JavaScript函數(shù)中this指向問題詳解

更新時間：2021年05月07日 09:59:24 作者：一顆不甘墜落的流星

這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)中this指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

this關(guān)鍵字

哪個對象調(diào)用函數(shù)，函數(shù)里面的this指向哪個對象。

**嚴格模式下：**在全局環(huán)境中，this指向的是undefined

**非嚴格模式下：**在全局環(huán)境中，this指向的是window

全局定義的函數(shù)直接調(diào)用，this => window

function fn(){
	console.log(this);
	// 此時 this 指向 window
}
fn();
// 相當于 window.fn()

對象內(nèi)部的函數(shù)調(diào)用，this => 調(diào)用者

var obj = {
	fn:function(){
		console.log(this);
	}
}
obj.fn();
// 此時 this 指向 obj

定時器的處理函數(shù)，this => window

setTimeout(function(){
	console.log(this);	
},0)
// 此時定時器處理函數(shù)里面的this 指向 window

事件處理函數(shù)，this => 事件源

div.onclick = function(){
	console.log(this);
}
//當你點擊 div 的時候，this指向 div

自調(diào)用函數(shù)，this => window

(function () {
  console.log(this)
})()
// 此時 this 指向 window

改變 this 指向

剛才我們說過的都是函數(shù)的基本調(diào)用方式里面的 this 指向，我們還有三個方法可以忽略函數(shù)本身的 this 指向轉(zhuǎn)而指向別的地方。這三個方法就是 call / apply / bind，是強行改變 this 指向的方法。

call/apply/bind附加在函數(shù)調(diào)用后面使用，可以忽略函數(shù)本身的 this 指向
call和apply使用時會立即自動調(diào)用函數(shù)，bind使用時會創(chuàng)建一個函數(shù)，但是需要另外去手動調(diào)用

call

語法：fn.call(fn 函數(shù)體內(nèi) this 的指向哪里,arg1, arg2, ...);

作用：調(diào)用被綁定的函數(shù)fn，指定它的 this 指向并傳參

參數(shù)：

第一個參數(shù)：是 this 指向
其余的參數(shù)：需要傳入的值，可以是多個，用逗號隔開

使用 call 方法不傳參

var num = 666;

function fn() {
  console.log('num = ', this.num);
}

fn.call();  // num = 666

使用 call 方法指定this

var name = 'Rose';
var obj = {name:'Jack'};
function fn(){
	console.log(this.name);
}
fn();	// Rose
fn.call();	// Rose
fn.call(obj);  // jack

使用 call 方法指定this并傳參

var name = 'Rack';
var obj = {name:'Jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.call(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3

apply

apply方法接受的是一個包含多個參數(shù)的數(shù)組

語法：fn.apply(fn 函數(shù)體內(nèi) this 的指向哪里,[arg1, arg2, ...]);

作用：調(diào)用被綁定的函數(shù)fn，指定它的 this 指向并傳參

參數(shù)：

第一個參數(shù)：this 指向的對象
第二個參數(shù)：一個包含多個參數(shù)的數(shù)組

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.apply(obj,[1,2]);	// obj 1 2

使用 apply 合并數(shù)組

使用push將元素追加到數(shù)組中，如果參數(shù)是數(shù)組，它會將該數(shù)組作為單個元素添加，而不是將這個數(shù)組內(nèi)的每個元素添加進去，因此我們最終會得到一個數(shù)組內(nèi)的數(shù)組

var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1);	//	[1,2,[3,4]]

concat雖然可以合并數(shù)組，但它并不是將元素添加到現(xiàn)有數(shù)組，而是創(chuàng)建并返回一個新數(shù)組。

var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1);	// [1,2]
console.log(arr3);	// [1,2,3,4]

如果我們要將元素追加到現(xiàn)有數(shù)組又該怎么做？循環(huán)？No！這是apply就派上用場了

var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1);	// [1,2,3,4]

使用 apply 與內(nèi)置函數(shù)連用

/* 找出數(shù)組中最大/小的數(shù)字 */
var numbers = [5, 6, 2, 3, 7];

var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max);	// NaN NaN

var max = Math.max.apply(null, numbers); 
/* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);
console.log(min,max);	// 2 7

bind

語法：fn.bind(fn 函數(shù)體內(nèi) this 的指向, arg1, arg2, ...);

作用：創(chuàng)建一個新的綁定函數(shù)，指定它的 this 指向并傳參，必須調(diào)用它才會被執(zhí)行

參數(shù)：

第一個參數(shù)：this 指向的對象
其余的參數(shù)：需要傳入的值，可以是多個，用逗號隔開

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	// 未調(diào)用不執(zhí)行
fn.bind(obj,1,3)()	// obj 1 3
var newFn = fn.bind(obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4