JS中的this是一個(gè)老生常談的問題了，因?yàn)樗⒉皇且粋€(gè)確定的值，在不同情況下有不同的指向，所以也經(jīng)常使人困惑。本篇文章會(huì)談?wù)勎易约簩?duì)this的理解。

this到底是啥

其實(shí)this就是一個(gè)指針，它指示的就是當(dāng)前的一個(gè)執(zhí)行環(huán)境，可以用來對(duì)當(dāng)前執(zhí)行環(huán)境進(jìn)行一些操作。因?yàn)樗甘镜氖菆?zhí)行環(huán)境，所以在定義這個(gè)變量時(shí)，其實(shí)是不知道它真正的值的，只有運(yùn)行時(shí)才能確定他的值。同樣一段代碼，用不同的方式執(zhí)行，他的this指向可能是不一樣的。我們來看看如下代碼： 

function func() {  
  this.name = "小小飛";   
  console.log(this);    // 看一下this是啥  
}  

這個(gè)方法很簡(jiǎn)單，只是給this添加了一個(gè)name屬性，我們把這個(gè)方法復(fù)制到Chrome調(diào)試工具看下結(jié)果：

上圖中我們直接調(diào)用了func()，發(fā)現(xiàn)this指向的是window，name屬性添加到了window上。下面我們換一種調(diào)用方式，我們換成new func()來調(diào)用：

我們看到輸出了兩個(gè)func {name: "小小飛"}，一個(gè)是我們new返回的對(duì)象，另一個(gè)是方法里面的console。這兩個(gè)值是一樣的，說明這時(shí)候方法里面this就指向了new返回的對(duì)象，而不是前面例子的window了。這是因?yàn)楫?dāng)你使用new去調(diào)用一個(gè)方法時(shí)，這個(gè)方法其實(shí)就作為構(gòu)造函數(shù)使用了，這時(shí)候的this指向的是new出來的對(duì)象。

下面我們分別講解下幾種情況

使用new調(diào)用時(shí)，this指向new出來的對(duì)象

這個(gè)規(guī)則其實(shí)是JS面向?qū)ο蟮囊徊糠郑琂S使用了一種很曲折的方式來支持面向?qū)ο?。?dāng)你用new來執(zhí)行一個(gè)函數(shù)時(shí)，這個(gè)函數(shù)就變成了一個(gè)類，new關(guān)鍵字會(huì)返回一個(gè)類的實(shí)例給你，這個(gè)函數(shù)會(huì)充當(dāng)構(gòu)造函數(shù)的角色。作為面向?qū)ο蟮臉?gòu)造函數(shù)，必須要有能夠給實(shí)例初始化屬性的能力，所以構(gòu)造函數(shù)里面必須要有某種機(jī)制來操作生成的實(shí)例，這種機(jī)制就是this。讓this指向生成的實(shí)例就可以通過this來操作實(shí)例了。關(guān)于JS的面向?qū)ο蟾敿?xì)的解釋可以看這篇文章。

this的這種特性還有一些妙用。一個(gè)函數(shù)可以直接調(diào)用，也可以用new調(diào)用，那假如我只想使用者通過new調(diào)用有沒有辦法呢？下圖截取自Vue源碼：

Vue巧妙利用了this的特性，通過檢查this是不是Vue的一個(gè)實(shí)例來檢測(cè)使用者是通過new調(diào)用的還是直接調(diào)用的。

沒有明確調(diào)用者時(shí)，this指向window

這個(gè)其實(shí)在最開始的例子就講過了，那里沒有明確調(diào)用者，this指向的是window。我們這里講另外一個(gè)例子，函數(shù)里面的函數(shù)，this指向誰？ 

function func() {  
  function func2() {  
    console.log('this:', this);   // 這里的this指向誰？  
  }  
  func2();  
}  

我們執(zhí)行一下看看：

直接執(zhí)行：

使用new執(zhí)行：

我們發(fā)現(xiàn)無論是直接執(zhí)行，還是使用new執(zhí)行，this的值都指向的window。直接執(zhí)行時(shí)很好理解，因?yàn)闆]有明確調(diào)用者，那this自然就是window。需要注意的是使用new時(shí)，只有被new的func才是構(gòu)造函數(shù)，他的this指向new出來的對(duì)象，他里面的函數(shù)的this還是指向window。

有明確調(diào)用者時(shí)，this指向調(diào)用者

看這個(gè)例子： 

var obj = {  
  myName: "小小飛",  
  func: function() {  
    console.log(this.myName);  
  }  
}  
obj.func();    // 小小飛  

上述例子很好理解，因?yàn)檎{(diào)用者是obj，所以func里面的this就指向obj，this.myName就是obj.myName。其實(shí)這一條和上一條可以合在一起，沒有明確調(diào)用者時(shí)其實(shí)隱含的調(diào)用者就是window，所以經(jīng)常有人說this總是指向調(diào)用者。

下面我們將這個(gè)例子稍微改一下： 

var myName = "大飛哥";  
var obj = {  
  myName: "小小飛",  
  func: function() {  
    console.log(this.myName);  
  }  
} 
var anotherFunc = obj.func;  
anotherFunc();   // 輸出是啥？  

這里的輸出應(yīng)該是“大飛哥”，因?yàn)殡m然anotherFunc的函數(shù)體跟obj.func一樣，但是他的執(zhí)行環(huán)境不一樣，他其實(shí)沒有明確的調(diào)用者，或者說調(diào)用者是window。這里的this.myName其實(shí)是window.myName，也就是“大飛哥”。

我們將這個(gè)例子再改一下： 

let myName = "大飛哥";  
var obj = {  
  myName: "小小飛",  
  func: function() {  
    console.log(this.myName);  
  }  
}  
var anotherFunc = obj.func;  
anotherFunc();   // 注意這里輸出是undefined  

這次我們只是將第一個(gè)var改成了let，但是我們的輸出卻變成了undefined。這是因?yàn)閘et，const定義變量，即使在最外層也不會(huì)變成window的屬性，只有var定義的變量才會(huì)成為window的屬性。

箭頭函數(shù)并不會(huì)綁定this

這句話的意思是箭頭函數(shù)本身并不具有this，箭頭函數(shù)在被申明確定this，這時(shí)候他會(huì)直接將當(dāng)前作用域的this作為自己的this。還是之前的例子我們將函數(shù)改為箭頭函數(shù)： 

var myName = "大飛哥";  
var obj = {  
  myName: "小小飛",  
  func: () => {  
    console.log(this.myName);  
  }  
} 
var anotherFunc = obj.func;  
obj.func();      // 大飛哥  
anotherFunc();   // 大飛哥  

上述代碼里面的obj.func()輸出也是“大飛哥”，是因?yàn)閛bj在創(chuàng)建時(shí)申明了箭頭函數(shù)，這時(shí)候箭頭函數(shù)會(huì)去尋找當(dāng)前作用域，因?yàn)閛bj是一個(gè)對(duì)象，并不是作用域，所以這里的作用域是window，this也就是window了。

再來看一個(gè)例子： 

var myName = "大飛哥";  
var obj = {  
  myName: "小小飛",  
  func: function () {  
    return {  
      getName: () => {  
        console.log(this.myName);  
      }  
    }  
  } 
}  
var anotherFunc = obj.func().getName;  
obj.func().getName();      // 小小飛  
anotherFunc();   // 小小飛  

兩個(gè)輸出都是“小小飛”，obj.func().getName()輸出“小小飛”很好理解，這里箭頭函數(shù)是在obj.func()的返回值里申明的，這時(shí)他的this其實(shí)就是func()的this，因?yàn)樗潜籵bj調(diào)用的，所以this指向obj。

那為什么anotherFunc()輸出也是“小小飛”呢？這是因?yàn)閍notherFunc()輸出的this，其實(shí)在anotherFunc賦值時(shí)就確定了：

1. var anotherFunc = obj.func().getName;其實(shí)是先執(zhí)行了obj.func()
2. 執(zhí)行obj.func()的時(shí)候getName箭頭函數(shù)被申明
3. 這時(shí)候箭頭函數(shù)的this應(yīng)該是當(dāng)前作用域的this，也就是func()里面的this
4. func()因?yàn)槭潜籵bj調(diào)用，所以this指向obj
5. 調(diào)用anotherFunc時(shí)，其實(shí)this早就確定了，也就是obj，最終輸出的是obj.myName。

再來看一個(gè)構(gòu)造函數(shù)里面的箭頭函數(shù)，前面我們說了構(gòu)造函數(shù)里面的函數(shù)，直接調(diào)用時(shí)，他的this指向window，但是如果這個(gè)函數(shù)時(shí)箭頭函數(shù)呢： 

var myName = "大飛哥";  
function func() {  
  this.myName = "小小飛";  
  const getName = () => {  
    console.log(this.myName);  
  }  
  getName();  
}  
new func(); // 輸出啥？  

這里輸出的是“小小飛”，原理還是一樣的，箭頭函數(shù)在申明時(shí)this確定為當(dāng)前作用域的this，在這里就是func的作用域，跟func的this一樣指向new出來的實(shí)例。如果不用new，而是直接調(diào)用，這里的this就指向window。

DOM事件回調(diào)里面，this指向綁定事件的對(duì)象 

function func(e) {  
  console.log(this === e.currentTarget);   // 總是true  
  console.log(this === e.target);          // 如果target等于currentTarget,這個(gè)就為true  
}  
const ele = document.getElementById('test');  
ele.addEventListener('click', func);  

currentTarget指的是綁定事件的DOM對(duì)象，target指的是觸發(fā)事件的對(duì)象。DOM事件回調(diào)里面this總是指向currentTarget，如果觸發(fā)事件的對(duì)象剛好是綁定事件的對(duì)象，即target === currentTarget，this也會(huì)順便指向target。如果回調(diào)是箭頭函數(shù)，this是箭頭函數(shù)申明時(shí)作用域的this。

嚴(yán)格模式下this是undefined 

function func() {  
  "use strict"  
  console.log(this);  
}  
func();   // 輸出是undefined  

注意這里說的嚴(yán)格模式下this是undefined是指在函數(shù)體內(nèi)部，如果本身就在全局作用域，this還是指向window。 

<html>  
  ...  
  <script>  
    "use strict"  
    console.log(this);     // window  
  </script>  
  ...  
</html>  

this能改嗎

this是能改的，call和apply都可以修改this，ES6里面還新增了一個(gè)bind函數(shù)。

使用call和apply修改this 

const obj = {  
  myName: "大飛哥",  
  func: function(age, gender) {  
    console.log(`我的名字是${this.myName}, 我的年齡是${age}，我是一個(gè)${gender}`);  
  }  
}  
const obj2 = {  
  myName: "小小飛"  
}  
obj.func.call(obj2, 18, "帥哥");  // 我的名字是小小飛, 我的年齡是18，我是一個(gè)帥哥  

注意上面輸出的名字是"小小飛"，也就是obj2.myName。正常直接調(diào)用obj.func()輸出的名字應(yīng)該是obj.myName，也就是"大飛哥"。但是如果你使用call來調(diào)用，call的第一個(gè)參數(shù)就是手動(dòng)指定的this。我們將它指定為obj2，那在函數(shù)里面的this.myName其實(shí)就是obj2.myName了。

apply方法跟call方法作用差不多，只是后面的函數(shù)參數(shù)形式不同，使用apply調(diào)用應(yīng)該這樣寫，函數(shù)參數(shù)應(yīng)該放到一個(gè)數(shù)組或者類數(shù)組里面： 

obj.func.apply(obj2, [18, "帥哥"]); // 我的名字是小小飛, 我的年齡是18，我是一個(gè)帥哥 

之所以有call和apply兩個(gè)方法實(shí)現(xiàn)了差不多的功能，是為了讓大家使用方便，如果你拿到的參數(shù)是一個(gè)一個(gè)的，那就使用call吧，但是有時(shí)候拿到的參數(shù)是arguments，這是函數(shù)的一個(gè)內(nèi)置變量，是一個(gè)類數(shù)組結(jié)構(gòu)，表示當(dāng)前函數(shù)的所有參數(shù)，那就可以直接用apply，而不用將它展開了。

使用bind修改this

bind是ES5引入的一個(gè)方法，也可以修改this，但是調(diào)用它并不會(huì)立即執(zhí)行方法本身，而是會(huì)返回一個(gè)修改了this的新方法： 

const obj = {  
  myName: "大飛哥",  
  func: function(age, gender) {  
    console.log(`我的名字是${this.myName}, 我的年齡是${age}，我是一個(gè)${gender}`);  
  }  
} 
const obj2 = {  
  myName: "小小飛"  
}  
const func2 = obj.func.bind(obj2);   // 返回一個(gè)this改為obj2的新方法  
func2(18, "帥哥");    // 我的名字是小小飛, 我的年齡是18，我是一個(gè)帥哥  

bind和call，apply最大的區(qū)別就是call，apply會(huì)立即執(zhí)行方法，而bind并不會(huì)立即執(zhí)行，而是會(huì)返回一個(gè)新方法供后面使用。

bind函數(shù)也可以接收多個(gè)參數(shù)，第二個(gè)及以后的參數(shù)會(huì)作為新函數(shù)的參數(shù)傳遞進(jìn)去，比如前面的bind也可以這樣寫： 

const func3 = obj.func.bind(obj2, 18);   // 注意我們這里已經(jīng)傳了一個(gè)年齡參數(shù)  
func3("帥哥");    //注意這里只傳了性別參數(shù)，年齡參數(shù)已經(jīng)在func3里面了，輸出還是：我的名字是小小飛, 我的年齡是18，我是一個(gè)帥哥  

自己寫一個(gè)call

知道了call的作用，我們自己來寫一個(gè)call： 

Function.prototype.myCall = function(...args) {  
  // 參數(shù)檢查  
  if(typeof this !== "function") {  
    throw new Error('Must call with a function');  
  }  
  const realThis = args[0] || window;  
  const realArgs = args.slice(1);  
  const funcSymbol = Symbol('func');  
  realThis[funcSymbol] = this;   // 這里的this是原方法，保存到傳入的第一個(gè)參數(shù)上  
  //用傳入的參數(shù)來調(diào)方法，方法里面的this就是傳入的參數(shù)了  
  const res = realThis[funcSymbol](...realArgs);   
  delete realThis[funcSymbol];  // 最后刪掉臨時(shí)存儲(chǔ)的原方法  
  return res;  // 將執(zhí)行的返回值返回  
}  

自己寫一個(gè)apply

apply方法跟call方法很像，區(qū)別只是在取調(diào)用參數(shù)上： 

Function.prototype.myApply = function(...args) {  
  if(typeof this !== "function") {  
    throw new Error('Must call with a function');  
  }  
  const realThis = args[0] || window;  
  // 直接取第二個(gè)參數(shù)，是一個(gè)數(shù)組  
  const realArgs = args[1];          
  const funcSymbol = Symbol('func');  
  realThis[funcSymbol] = this;     
  const res = realThis[funcSymbol](...realArgs);   
  delete realThis[funcSymbol];   
  return res;   
}  

自己寫一個(gè)bind

自己寫一個(gè)bind需要用到前面的apply，注意他的返回值是一個(gè)方法 

Function.prototype.myBind = function(...args) {  
  if(typeof this !== "function") {  
    throw new Error('Must call with a function');  
  }  
  const _func = this;    // 原方法  
  const realThis = args[0] || window;   // 綁定的this  
  const otherArgs = args.slice(1);    // 取出后面的參數(shù)作為新函數(shù)的默認(rèn)參數(shù)  
  return function(...args2) {   // 返回一個(gè)方法  
    return _func.apply(realThis, [...otherArgs,...args2]);  // 拼接存儲(chǔ)參數(shù)和新參數(shù)，然后用apply執(zhí)行  
  }  
}  

總結(jié)

1. 函數(shù)外面的this，即全局作用域的this指向window。
2. 函數(shù)里面的this總是指向直接調(diào)用者。如果沒有直接調(diào)用者，隱含的調(diào)用者是window。
3. 使用new調(diào)用一個(gè)函數(shù)，這個(gè)函數(shù)即為構(gòu)造函數(shù)。構(gòu)造函數(shù)里面的this是和實(shí)例對(duì)象溝通的橋梁，他指向?qū)嵗龑?duì)象。
4. 箭頭函數(shù)里面的this在它申明時(shí)確定，跟他當(dāng)前作用域的this一樣。
5. DOM事件回調(diào)里面，this指向綁定事件的對(duì)象(currentTarget)，而不是觸發(fā)事件的對(duì)象(target)。當(dāng)然這兩個(gè)可以是一樣的。如果回調(diào)是箭頭函數(shù)，請(qǐng)參考上一條，this是它申明時(shí)作用域的this。
6. 嚴(yán)格模式下，函數(shù)里面的this指向undefined，函數(shù)外面(全局作用域)的this還是指向window。
7. call和apply可以改變this，這兩個(gè)方法會(huì)立即執(zhí)行原方法，他們的區(qū)別是參數(shù)形式不一樣。
8. bind也可以修改this，但是他不會(huì)立即執(zhí)行，而是返回一個(gè)修改了this的函數(shù)。

文章的最后，感謝你花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了你一點(diǎn)點(diǎn)幫助或者啟發(fā)，請(qǐng)不要吝嗇你的贊和GitHub小星星，你的支持是作者持續(xù)創(chuàng)作的動(dòng)力。