JavaScript中的this關鍵字用法詳解

更新時間：2023年05月11日 10:24:25 作者：白哥學前端

在編寫JavaScript應用的時候，我們經(jīng)常會使用this關鍵字。那么this關鍵字究竟是怎樣工作的，它的設計有哪些好的地方，有哪些不好的地方，本文帶大家全面系統(tǒng)地認識這個老朋友，感興趣的小伙伴可以借鑒閱讀

class People {
  constructor(name) {
    // 在用new關鍵字實例化一個對象的時候，相當于在說，
    // “創(chuàng)建一個People類實例（主語），它（this）的name是……”
    // 所以這里的this就是新創(chuàng)建的People類實例
    this.name = name;
  }
  
  run() {
    console.log(`${this.name} seems happy.`)  
  }
}

// new關鍵字實例化一個類
var xiaoming = new People('xiaoming');
xiaoming.run();

這就是我認為this關鍵字設計得精彩的地方！如果將調用方法的語句var xiaoming = new People('xiaoming');和方法本身的代碼連起來，像英語一樣讀，其實是完全通順的。

this的綁定

句子的主語是可以變的，例如在下面的場景中，run被賦值到小芳（xiaofang）身上之后，調用xiaofang.run，主語就變成了小芳！

var xiaofang = {
  name: 'Xiao Fang',
};

var xiaoming = {
  name: 'Xiao Ming',
  run: function() {
    console.log(`${this.name} seems happy`);
  },
};

xiaofang.run = xiaoming.run;
// 主語變成了小芳
xiaofang.run();

但是如果小明很摳門，不愿意將run方法借給小芳以后，this就變成了小芳的話，那么小明要怎么做呢？他可以通過Function.prototype.bind讓run運行時候的this永遠為小明自己。

var xiaofang = {
  name: 'Xiao Fang',
};

var xiaoming = {
  name: 'Xiao Ming',
  run: function() {
    console.log(`${this.name} seems happy`);
  },
};

// 將小明的run方法綁定（bind）后，返回的還是一個
// 函數(shù)，但是這個函數(shù)之后被調用的時候就算主語不是小明，
// 它的this依然是小明
xiaoming.run = xiaoming.run.bind(xiaoming);

xiaofang.run = xiaoming.run;
// 主語雖然是小芳，但是最后this還是小明
xiaofang.run();

那么同一個函數(shù)被多次bind之后，到底this是哪一次bind的對象呢？你可以自己嘗試看看。

call與apply

Function.prototype.call允許你在調用一個函數(shù)的時候指定它的this的值。

var xiaoming = {
    name: 'Xiao Ming'
};

function run(today, mood) {
    console.log(`Today is ${today}, ${this.name} seems ${mood}`);
}

// 函數(shù)的call方法第一個參數(shù)是this的值
// 后續(xù)只需按函數(shù)參數(shù)的順序傳參即可
run.call(xiaoming, 'Monday', 'happy')

Function.prototype.apply和Function.prototype.call的功能是一模一樣的，區(qū)別進在于，apply里將函數(shù)調用所需的所有參數(shù)放到一個數(shù)組當中。

var xiaoming = {
    name: 'Xiao Ming'
};

function run(today, mood) {
    console.log(`Today is ${today}, ${this.name} seems ${mood}`);
}

// apply只接受兩個參數(shù)
// 第二個參數(shù)是一個數(shù)組，這個數(shù)組的元素被按順序
// 作為run調用的參數(shù)
run.apply(xiaoming, ['Monday', 'happy'])

那么call/apply和上面的bind混用的時候是什么樣的行為呢？這個也留給大家自行驗證。但是在一般情況下，我們應該避免混用它們，否則會造成代碼檢查或者調試的時候難以跟蹤this的值的問題。

當方法失去主語的時候，this不再有？

其實大家可以發(fā)現(xiàn)我的用詞，當一個function被調用的時候是有主語的時候，它是一個方法；當一個function被調用的時候是沒有主語的時候，它是一個函數(shù)。當一個函數(shù)運行的時候，它雖然沒有主語，但是它的this的值會是全局對象。在瀏覽器里，那就是window。當然了，前提是函數(shù)沒有被bind過，也不是被apply或call所調用。

那么function作為函數(shù)的情景有哪些呢？

首先，全局函數(shù)的調用就是最簡單的一種。

function bar() {
  console.log(this === window); // 輸出：true
}
bar();

立即調用的函數(shù)表達式（IIFE，Immediately-Invoked Function Expression）也是沒有主語的，所以它被調用的時候this也是全局對象。

(function() {
  console.log(this === window); // 輸出：true
})();

但是，當函數(shù)被執(zhí)行在嚴格模式（strict-mode）下的時候，函數(shù)的調用時的this就是undefined了。這是很值得注意的一點。

function bar() {
  'use strict';
  console.log('Case 2 ' + String(this === undefined)); // 輸出：undefined
}
bar();

不可見的調用

有時候，你沒有辦法看到你定義的函數(shù)是怎么被調用的。因此，你就沒有辦法知道它的主語。下面是一個用jQuery添加事件監(jiān)聽器的例子。

window.val = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    $('#text').bind('click', function() {
      console.log(this.val);
    });
  }
};

obj.foo();

在事件的回調函數(shù)（第6行開始定義的匿名函數(shù)）里面，this的值既不是window，又不是obj，而是頁面上id為text的HTML元素。

var obj = {
  foo: function() {
    $('#text').bind('click', function() {
      console.log(this === document.getElementById('text')); // 輸出：true
    });
  }
};

obj.foo();

這是因為匿名函數(shù)是被jQuery內部調用的，我們不知道它調用的時候的主語是什么，或者是否被bind等函數(shù)修改過this的值。所以，當你將匿名函數(shù)交給程序的其他部分調用的時候，需要格外地謹慎。

如果我們想要在上面的回調函數(shù)里面使用obj的val值，除了直接寫obj.val之外，還可以在foo方法中用一個新的變量that來保存foo運行時this的值。這樣說有些繞口，我們看下例子便知。

window.val = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    var that = this; // 保存this的引用到that，這里的this實際上就是obj
    $('#text').bind('click', function() {
      console.log(that.val); // 輸出：obj val
    });
  }
};

obj.foo();

另外一種方法就是為該匿名函數(shù)bind了。

window.val = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    $('#text').bind('click', function() {
      console.log(this.val); // 輸出：obj val
    }.bind(this));
  }
};

obj.foo();