this到底指向啥？看完這篇就知道了！

JS中的this是一個老生常談的問題了，由於它並非一個肯定的值，在不一樣狀況下有不一樣的指向，因此也常常令人困惑。本篇文章會談談我本身對this的理解。javascript

this究竟是啥

其實this就是一個指針，它指示的就是當前的一個執行環境，能夠用來對當前執行環境進行一些操做。由於它指示的是執行環境，因此在定義這個變量時，實際上是不知道它真正的值的，只有運行時才能肯定他的值。一樣一段代碼，用不一樣的方式執行，他的this指向多是不同的。咱們來看看以下代碼：html

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

這個方法很簡單，只是給this添加了一個name屬性，咱們把這個方法複製到Chrome調試工具看下結果：前端

上圖中咱們直接調用了func()，發現this指向的是window，name屬性添加到了window上。下面咱們換一種調用方式，咱們換成new func()來調用：java

咱們看到輸出了兩個func {name: "小小飛"}，一個是咱們new返回的對象，另外一個是方法裏面的console。這兩個值是同樣的，說明這時候方法裏面this就指向了new返回的對象，而不是前面例子的window了。這是由於當你使用new去調用一個方法時，這個方法其實就做爲構造函數使用了，這時候的this指向的是new出來的對象。git

下面咱們分別講解下幾種狀況github

使用new調用時，this指向new出來的對象

這個規則實際上是JS面向對象的一部分，JS使用了一種很曲折的方式來支持面向對象。當你用new來執行一個函數時，這個函數就變成了一個類，new關鍵字會返回一個類的實例給你，這個函數會充當構造函數的角色。做爲面向對象的構造函數，必需要有可以給實例初始化屬性的能力，因此構造函數裏面必需要有某種機制來操做生成的實例，這種機制就是this。讓this指向生成的實例就能夠經過this來操做實例了。關於JS的面向對象更詳細的解釋能夠看這篇文章。數組

this的這種特性還有一些妙用。一個函數能夠直接調用，也能夠用new調用，那假如我只想使用者經過new調用有沒有辦法呢？下圖截取自Vue源碼：app

Vue巧妙利用了this的特性，經過檢查this是否是Vue的一個實例來檢測使用者是經過new調用的仍是直接調用的。函數

沒有明確調用者時，this指向window

這個其實在最開始的例子就講過了，那裏沒有明確調用者，this指向的是window。咱們這裏講另一個例子，函數裏面的函數，this指向誰？工具

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

咱們執行一下看看：

直接執行：

使用new執行：

咱們發現不管是直接執行，仍是使用new執行，this的值都指向的window。直接執行時很好理解，由於沒有明確調用者，那this天然就是window。須要注意的是使用new時，只有被new的func纔是構造函數，他的this指向new出來的對象，他裏面的函數的this仍是指向window。

有明確調用者時，this指向調用者

看這個例子：

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

obj.func();    // 小小飛

上述例子很好理解，由於調用者是obj，因此func裏面的this就指向obj，this.myName就是obj.myName。其實這一條和上一條能夠合在一塊兒，沒有明確調用者時其實隱含的調用者就是window，因此常常有人說this老是指向調用者。

下面咱們將這個例子稍微改一下：

var myName = "大飛哥";

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

var anotherFunc = obj.func;

anotherFunc();   // 輸出是啥？

這裏的輸出應該是「大飛哥」，由於雖然anotherFunc的函數體跟obj.func同樣，可是他的執行環境不同，他其實沒有明確的調用者，或者說調用者是window。這裏的this.myName實際上是window.myName，也就是「大飛哥」。

咱們將這個例子再改一下：

let myName = "大飛哥";

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

var anotherFunc = obj.func;

anotherFunc();   // 注意這裏輸出是undefined

此次咱們只是將第一個var改爲了let，可是咱們的輸出卻變成了undefined。這是由於let，const定義變量，即便在最外層也不會變成window的屬性，只有var定義的變量纔會成爲window的屬性。

箭頭函數並不會綁定this

這句話的意思是箭頭函數自己並不具備this，箭頭函數在被申明肯定this，這時候他會直接將當前做用域的this做爲本身的this。仍是以前的例子咱們將函數改成箭頭函數：

var myName = "大飛哥";

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

var anotherFunc = obj.func;

obj.func();      // 大飛哥
anotherFunc();   // 大飛哥

上述代碼裏面的obj.func()輸出也是「大飛哥」，是由於obj在建立時申明瞭箭頭函數，這時候箭頭函數會去尋找當前做用域，由於obj是一個對象，並非做用域，因此這裏的做用域是window，this也就是window了。

再來看一個例子：

var myName = "大飛哥";

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

var anotherFunc = obj.func().getName;

obj.func().getName();      // 小小飛
anotherFunc();   // 小小飛

兩個輸出都是「小小飛」，obj.func().getName()輸出「小小飛」很好理解，這裏箭頭函數是在obj.func()的返回值裏申明的，這時他的this其實就是func()的this，由於他是被obj調用的，因此this指向obj。

那爲何anotherFunc()輸出也是「小小飛」呢？這是由於anotherFunc()輸出的this，其實在anotherFunc賦值時就肯定了：

var anotherFunc = obj.func().getName;實際上是先執行了obj.func()
執行obj.func()的時候getName箭頭函數被申明
這時候箭頭函數的this應該是當前做用域的this，也就是func()裏面的this
func()由於是被obj調用，因此this指向obj
調用anotherFunc時，其實this早就肯定了，也就是obj，最終輸出的是obj.myName。

再來看一個構造函數裏面的箭頭函數，前面咱們說了構造函數裏面的函數，直接調用時，他的this指向window，可是若是這個函數時箭頭函數呢：

var myName = "大飛哥";

function func() {
  this.myName = "小小飛";
  
  const getName = () =&gt; {
    console.log(this.myName);
  }
  
  getName();
}

new func(); // 輸出啥？

這裏輸出的是「小小飛」，原理仍是同樣的，箭頭函數在申明時this肯定爲當前做用域的this，在這裏就是func的做用域，跟func的this同樣指向new出來的實例。若是不用new，而是直接調用，這裏的this就指向window。

DOM事件回調裏面，this指向綁定事件的對象

function func(e) {
  console.log(this === e.currentTarget);   // 老是true
  console.log(this === e.target);          // 若是target等於currentTarget,這個就爲true
}

const ele = document.getElementById('test');

ele.addEventListener('click', func);

currentTarget指的是綁定事件的DOM對象，target指的是觸發事件的對象。DOM事件回調裏面this老是指向currentTarget，若是觸發事件的對象恰好是綁定事件的對象，即target === currentTarget，this也會順便指向target。若是回調是箭頭函數，this是箭頭函數申明時做用域的this。

嚴格模式下this是undefined

function func() {
  "use strict"
  console.log(this);
}

func();   // 輸出是undefined

注意這裏說的嚴格模式下this是undefined是指在函數體內部，若是自己就在全局做用域，this仍是指向window。

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

this能改嗎

this是能改的，call和apply均可以修改this，ES6裏面還新增了一個bind函數。

使用call和apply修改this

const obj = {
  myName: "大飛哥",
  func: function(age, gender) {
    console.log(`個人名字是${this.myName}, 個人年齡是${age}，我是一個${gender}`);
  }
}

const obj2 = {
  myName: "小小飛"
}

obj.func.call(obj2, 18, "帥哥");  // 個人名字是小小飛, 個人年齡是18，我是一個帥哥

注意上面輸出的名字是"小小飛"，也就是obj2.myName。正常直接調用obj.func()輸出的名字應該是obj.myName，也就是"大飛哥"。可是若是你使用call來調用，call的第一個參數就是手動指定的this。咱們將它指定爲obj2，那在函數裏面的this.myName其實就是obj2.myName了。

apply方法跟call方法做用差很少，只是後面的函數參數形式不一樣，使用apply調用應該這樣寫，函數參數應該放到一個數組或者類數組裏面：

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

之因此有call和apply兩個方法實現了差很少的功能，是爲了讓你們使用方便，若是你拿到的參數是一個一個的，那就使用call吧，可是有時候拿到的參數是arguments，這是函數的一個內置變量，是一個類數組結構，表示當前函數的全部參數，那就能夠直接用apply，而不用將它展開了。

使用bind修改this

bind是ES5引入的一個方法，也能夠修改this，可是調用它並不會當即執行方法自己，而是會返回一個修改了this的新方法：

const obj = {
  myName: "大飛哥",
  func: function(age, gender) {
    console.log(`個人名字是${this.myName}, 個人年齡是${age}，我是一個${gender}`);
  }
}

const obj2 = {
  myName: "小小飛"
}

const func2 = obj.func.bind(obj2);   // 返回一個this改成obj2的新方法
func2(18, "帥哥");    // 個人名字是小小飛, 個人年齡是18，我是一個帥哥

bind和call，apply最大的區別就是call，apply會當即執行方法，而bind並不會當即執行，而是會返回一個新方法供後面使用。

bind函數也能夠接收多個參數，第二個及之後的參數會做爲新函數的參數傳遞進去，好比前面的bind也能夠這樣寫：

const func3 = obj.func.bind(obj2, 18);   // 注意咱們這裏已經傳了一個年齡參數
func3("帥哥");    //注意這裏只傳了性別參數，年齡參數已經在func3裏面了，輸出仍是：個人名字是小小飛, 個人年齡是18，我是一個帥哥

本身寫一個call

知道了call的做用，咱們本身來寫一個call：

Function.prototype.myCall = function(...args) {
  // 參數檢查
  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是原方法，保存到傳入的第一個參數上
  
  //用傳入的參數來調方法，方法裏面的this就是傳入的參數了
  const res = realThis[funcSymbol](...realArgs); 
  
  delete realThis[funcSymbol];  // 最後刪掉臨時存儲的原方法
  
  return res;  // 將執行的返回值返回
}

本身寫一個apply

apply方法跟call方法很像，區別只是在取調用參數上：

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

本身寫一個bind

本身寫一個bind須要用到前面的apply，注意他的返回值是一個方法

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);    // 取出後面的參數做爲新函數的默認參數
  
  return function(...args2) {   // 返回一個方法
    return _func.apply(realThis, [...otherArgs,...args2]);  // 拼接存儲參數和新參數，而後用apply執行
  }
}

總結

函數外面的this，即全局做用域的this指向window。
函數裏面的this老是指向直接調用者。若是沒有直接調用者，隱含的調用者是window。
使用new調用一個函數，這個函數即爲構造函數。構造函數裏面的this是和實例對象溝通的橋樑，他指向實例對象。
箭頭函數裏面的this在它申明時肯定，跟他當前做用域的this同樣。
DOM事件回調裏面，this指向綁定事件的對象(currentTarget)，而不是觸發事件的對象(target)。固然這兩個能夠是同樣的。若是回調是箭頭函數，請參考上一條，this是它申明時做用域的this。
嚴格模式下，函數裏面的this指向undefined，函數外面(全局做用域)的this仍是指向window。
call和apply能夠改變this，這兩個方法會當即執行原方法，他們的區別是參數形式不同。
bind也能夠修改this，可是他不會當即執行，而是返回一個修改了this的函數。

文章的最後，感謝你花費寶貴的時間閱讀本文，若是本文給了你一點點幫助或者啓發，請不要吝嗇你的贊和GitHub小星星，你的支持是做者持續創做的動力。

做者博文GitHub項目地址： https://github.com/dennis-jiang/Front-End-Knowledges

我也搞了個公衆號[進擊的大前端]，能夠第一時間獲取高質量原創，歡迎關注~