JavaScript函數中this指向問題詳解

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

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

this關鍵字

哪個對象調用函數，函數里面的this指向哪個對象。

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

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

全局定義的函數直接調用，this => window

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

對象內部的函數調用，this => 調用者

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

定時器的處理函數，this => window

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

事件處理函數，this => 事件源

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

自調用函數，this => window

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

改變 this 指向

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

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

call

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

作用：調用被綁定的函數fn，指定它的 this 指向并傳參

參數：

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

使用 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方法接受的是一個包含多個參數的數組

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

作用：調用被綁定的函數fn，指定它的 this 指向并傳參

參數：

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

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 合并數組

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

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

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

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]

如果我們要將元素追加到現有數組又該怎么做？循環(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 與內置函數連用

/* 找出數組中最大/小的數字 */
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 函數體內 this 的指向, arg1, arg2, ...);

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

參數：

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

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	// 未調用不執(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