this關(guān)鍵字

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

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

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

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

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

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

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

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

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

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

div.onclick = function(){
	console.log(this);
}
//當(dāng)你點(diǎn)擊 div 的時(shí)候，this指向 div

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

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

改變 this 指向

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

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

call

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

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

參數(shù)：

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

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

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

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

參數(shù)：

• 第一個(gè)參數(shù)：this 指向的對(duì)象
• 第二個(gè)參數(shù)：一個(gè)包含多個(gè)參數(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ù)組，它會(huì)將該數(shù)組作為單個(gè)元素添加，而不是將這個(gè)數(shù)組內(nèi)的每個(gè)元素添加進(jìn)去，因此我們最終會(huì)得到一個(gè)數(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)建并返回一個(gè)新數(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就派上用場(chǎng)了

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)建一個(gè)新的綁定函數(shù)，指定它的 this 指向并傳參，必須調(diào)用它才會(huì)被執(zhí)行

參數(shù)：

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

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

總結(jié)

到此這篇關(guān)于JavaScript函數(shù)中this指向問題的文章就介紹到這了,更多相關(guān)JavaScript函數(shù)this指向內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論