JavaScript函式中this指向問題詳解

阿新 • • 發佈：2021-05-08

this關鍵字

哪個物件呼叫函式，函式裡面的this指向哪個物件。

**嚴格模式下：**在全域性環境中，this指向的是undefined

**非嚴格模式下：**在全域性環境中，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.owww.cppcns.comnclick = function(){
	console.log(this);
}
//當你點選 div 的時候，this指向 div

自呼叫函式，this => window

KQPbwqlaF

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

改變 this 指向

剛才我們說過的都是函式的基本呼叫方式裡面的 this程式設計客棧指向，我們還有三個方法可以忽略函式本身的 this 指向轉而指向別的地方。這三個方法就是 call / apply / bind，是強行改變 this 指向的方法。

call/apply/bind附加在函式呼叫後面使用，可以忽略函式本身的 this 指向
call和apply使用時會立即自動呼叫函式，bind使用時會建立一個函式，但是需要另外去手動呼叫

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,...]);

作用：呼叫被繫結的函式fn，指定它的 this 指向並傳參

引數：

程式設計客棧

第一個引數：this 指向的物件
第二個引數：一個包含多個引數的陣列

var obj = {name:'jack'};
function fn(a,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雖然可以合併陣列，但它並不是將元素新增到現有陣列，而是建立並返回一個新陣列。

var arr1 = [1,4];

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

如果我們要將元素追加到現有陣列又該怎麼做？迴圈？No！這是apply就派上用場了

var arr1 = [1,4];

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

使用 apply 與內建函式連用

/* 找出陣列中最大/小的數字 */
var numbers = [5,6,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,..) */
var min = Math.min.apply(null,numbers);
console.log(min,max);	// 2 7

bind

語法：fn.bind(fn 函式體內 this 的指向,arg程式設計客棧2,...);

作用：建立一個新的繫結函式，指定它的 this 指向並傳參，必須呼叫它才會被執行

引數：

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

var obj = {name:'jack'};
function fn(a,2);	// window 1 2
fn.bind(obj,2);	// 未呼叫不執行
fn.bind(obj,3)()	// obj 1 3
var newFn = fn.bind(obj,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4