使用 JavaScript 開發(fā)的時候，很多開發(fā)者多多少少會被 this 的指向搞蒙圈，但是實際上，關于 this 的指向，記住最核心的一句話：哪個對象調用函數(shù)，函數(shù)里面的this指向哪個對象。

下面分幾種情況談論下

1、普通函數(shù)調用

這個情況沒特殊意外，就是指向全局對象-window。

let username='cn' function fn(){ alert(this.username);//undefined } fn();

可能大家會困惑，為什么不是輸出守候，但是在細看一看，我聲明的方式是let，不會是window對象
如果輸出守候，要這樣寫

var username='cn' function fn(){ alert(this.username);//cn } fu(); //--------------- window.username='cn' function fn(){ alert(this.username);//cn } fn();

//可以理解為
//window.fn();

2、對象函數(shù)調用

這個相信不難理解，就是那個函數(shù)調用，this指向哪里

window.b=2222 let obj={ a:111, fn:function(){ alert(this.a);//111 alert(this.b);//undefined } } obj.fn();

很明顯，第一次就是輸出obj.a，就是111。而第二次，obj沒有b這個屬性，所以輸出undefined，因為this指向obj。

但是下面這個情況得注意

let obj1={ a:222 }; let obj2={ a:111, fn:function(){ alert(this.a); } } obj1.fn=obj2.fn; obj1.fn();//222

這個相信也不難理解，雖然obj1.fn是從obj2.fn賦值而來，但是調用函數(shù)的是obj1，所以this指向obj1。

?

3、構造函數(shù)調用

let TestClass=function(){ this.name='111'; } let subClass=new TestClass(); subClass.name='cn'; console.log(subClass.name);//cn let subClass1=new TestClass(); console.log(subClass1.name)//111

這個也是不難理解，回憶下（new的四個步驟）就差不多了！

但是有一個坑，雖然一般不會出現(xiàn)，但是有必要提一下。

在構造函數(shù)里面返回一個對象，會直接返回這個對象，而不是執(zhí)行構造函數(shù)后創(chuàng)建的對象

?

apply和call調用

apply和call簡單來說就是會改變傳入函數(shù)的this。

let obj1={ a:222 }; let obj2={ a:111, fn:function(){ alert(this.a); } } obj2.fn.call(obj1);

此時雖然是 obj2 調用方法，但是使用 了call，動態(tài)的把 this 指向到 obj1。相當于這個 obj2.fn 這個執(zhí)行環(huán)境是 obj1 。apply 和 call 詳細內容在下面提及。

?

5、箭頭函數(shù)調用

首先不得不說，ES6 提供了箭頭函數(shù)，增加了我們的開發(fā)效率，但是在箭頭函數(shù)里面，沒有 this ，箭頭函數(shù)里面的 this 是繼承外面的環(huán)境。

一個例子

let obj={ a:222, fn:function(){ setTimeout(function(){console.log(this.a)}) } }; obj.fn();//undefined

不難發(fā)現(xiàn)，雖然 fn() 里面的 this 是指向 obj ，但是，傳給 setTimeout 的是普通函數(shù)， this 指向是 window ， window 下面沒有 a ，所以這里輸出?undefined。

換成箭頭函數(shù)

let obj={ a:222, fn:function(){ setTimeout(()=>{console.log(this.a)}); } }; obj.fn();//222

這次輸出 222 是因為，傳給 setTimeout 的是箭頭函數(shù)，然后箭頭函數(shù)里面沒有 this ，所以要向上層作用域查找，在這個例子上， setTimeout 的上層作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭頭函數(shù)的 this ，指向 obj 。所以輸出 222 。

?

call和apply
call 和 apply 的作用，完全一樣，唯一的區(qū)別就是在參數(shù)上面。
call 接收的參數(shù)不固定，第一個參數(shù)是函數(shù)體內 this 的指向，第二個參數(shù)以下是依次傳入的參數(shù)。
apply接收兩個參數(shù)，第一個參數(shù)也是函數(shù)體內 this 的指向。第二個參數(shù)是一個集合對象（數(shù)組或者類數(shù)組）

let fn=function(a,b,c){ console.log(a,b,c); } let arr=[1,2,3];

如上面這個例子

let obj1={ a:222 }; let obj2={ a:111, fn:function(){ alert(this.a); } } obj2.fn.call(obj1);

call 和 apply 兩個主要用途就是

1.改變 this 的指向（把 this 從 obj2 指向到 obj1 ）

2.方法借用（ obj1 沒有 fn ，只是借用 obj2 方法）


原文：https://blog.csdn.net/weixin_37722222/article/details/81625826?

轉載于:https://www.cnblogs.com/f-kayden/p/10607169.html

總結

以上是生活随笔為你收集整理的this 的指向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。