為什么要寫這篇文章？

我之前在阿里面試，以及其它公司面試的時候曾經(jīng)被問到過這個問題，所以想要分享給大家，如果你能清楚地知道下面 this 七種情況的區(qū)別，能跟面試官解釋清楚，無疑是一個大大的加分項，理解完這篇文章，面試官再怎么問你 this 都不怕了。

談及 Javascript 中的 this，竟然讓人覺得頭疼，它不像 Java，C++ 中的 this 指向調(diào)用 this 的該對象。

在函數(shù)中 this 到底取何值，是在函數(shù)真正被調(diào)用執(zhí)行的時候確定下來的，函數(shù)定義的時候確定不了。

因為 this 的取值是執(zhí)行上下文環(huán)境的一部分，每次調(diào)用函數(shù)，都會產(chǎn)生一個新的執(zhí)行上下文環(huán)境。當(dāng)你在代碼中使用了 this，這個 this 的值就直接從執(zhí)行的上下文中獲取了，而不會從作用域鏈中搜尋。

關(guān)于 this 的取值，大體上可以分為以下七種情況：

情況一：全局 & 調(diào)用普通函數(shù)

在全局環(huán)境中，this 永遠指向 window。

console.log(this === window); //true

普通函數(shù)在調(diào)用時候(注意不是構(gòu)造函數(shù)，前面不加 new)，其中的 this 也是指向 window。

var x = 10;function foo(){ console.log(this); //Window console.log(this.x); //10}foo(); 情況二：構(gòu)造函數(shù)

所謂的構(gòu)造函數(shù)就是由一個函數(shù) new 出來的對象，一般構(gòu)造函數(shù)的函數(shù)名首字母大寫，例如像 Object，F(xiàn)unction，Array 這些都屬于構(gòu)造函數(shù)。

function Foo(){ this.x = 10; console.log(this); //Foo {x:10}}var foo = new Foo();console.log(foo.x); //10

上述代碼，如果函數(shù)作為構(gòu)造函數(shù)使用，那么其中的 this 就代表它即將 new 出來的對象。

但是如果直接調(diào)用 Foo 函數(shù)，而不是 new Foo()，那就變成情況1，這時候 Foo() 就變成普通函數(shù)。

function Foo(){ this.x = 10; console.log(this); //Window}var foo = Foo();console.log(foo.x); //undefined 情況三：對象方法

如果函數(shù)作為對象的方法時，方法中的 this 指向該對象。

var obj = { x: 10, foo: function () {console.log(this);//Objectconsole.log(this.x); //10 }};obj.foo();

注意：若是在對象方法中定義函數(shù)，那么情況就不同了。

var obj = { x: 10, foo: function () {function f(){ console.log(this); //Window console.log(this.x); //undefined}f(); }}obj.foo();

可以這么理解：函數(shù) f 雖然是在 obj.foo 內(nèi)部定義的，但它仍然屬于一個普通函數(shù)，this 仍指向 window。(這是個坑，要記牢)

在這里，如果想要調(diào)用上層作用域中的變量 obj.x，可以使用 self 緩存外部 this 變量。

var obj = { x: 10, foo: function () {var self = this;function f(){ console.log(self); //{x: 10} console.log(self.x); //10}f(); }}obj.foo();

如果 foo 函數(shù)不作為對象方法被調(diào)用：

var obj = { x: 10, foo: function () {console.log(this); //Windowconsole.log(this.x); //undefined }};var fn = obj.foo;fn();

obj.foo 被賦值給一個全局變量，并沒有作為 obj 的一個屬性被調(diào)用，那么此時 this 的值是 window。

情況四：構(gòu)造函數(shù) prototype 屬性

function Foo(){ this.x = 10;}Foo.prototype.getX = function () { console.log(this);//Foo {x: 10, getX: function} console.log(this.x); //10}var foo = new Foo();foo.getX();

在 Foo.prototype.getX 函數(shù)中，this 指向的 foo 對象。不僅僅如此，即便是在整個原型鏈中，this 代表的也是當(dāng)前對象的值。

情況五：函數(shù)用 call、apply或者 bind 調(diào)用。

var obj = { x: 10}function foo(){ console.log(this); //{x: 10} console.log(this.x); //10}foo.call(obj);foo.apply(obj);foo.bind(obj)();

當(dāng)一個函數(shù)被 call、apply 或者 bind 調(diào)用時，this 的值就取傳入的對象的值。

情況六：DOM event this

在一個 HTML DOM 事件處理程序里，this 始終指向這個處理程序所綁定的 HTML DOM 節(jié)點：

function Listener(){ document.getElementById(’foo’).addEventListener(’click’, this.handleClick); //這里的 this 指向 Listener 這個對象。不是強調(diào)的是這里的 this}Listener.prototype.handleClick = function (event) { console.log(this); //<div id='foo'></div>}var listener = new Listener();document.getElementById(’foo’).click();

這個很好理解，就相當(dāng)于是給函數(shù)傳參，使 handleClick 運行時上下文改變了，相當(dāng)于下面這樣的代碼：

var obj = { x: 10, fn: function() {console.log(this); //Windowconsole.log(this.x); //undefined }};function foo(fn) { fn();} foo(obj.fn);

你也可以用通過 bind 切換上下文:

function Listener(){ document.getElementById(’foo’).addEventListener(’click’,this.handleClick.bind(this)); }Listener.prototype.handleClick = function (event) { console.log(this); //Listener {}}var listener = new Listener();document.getElementById(’foo’).click();

前六種情況總結(jié)一句話為： this 指向調(diào)用該方法的對象。

情況七：箭頭函數(shù)中的 this

當(dāng)使用箭頭函數(shù)的時候，情況就有所不同了：箭頭函數(shù)內(nèi)部的 this 是詞法作用域，由上下文確定。

var obj = { x: 10, foo: function() {var fn = () => { return () => {return () => { console.log(this); //Object {x: 10} console.log(this.x); //10} }}fn()()(); }}obj.foo();

現(xiàn)在，箭頭函數(shù)完全修復(fù)了 this 的指向，this 總是指向詞法作用域，也就是外層調(diào)用者 obj。

如果使用箭頭函數(shù)，以前的這種 hack 寫法：

var self = this;

就不再需要了。

var obj = { x: 10, foo: function() {var fn = () => { return () => {return () => { console.log(this); // Object {x: 10} console.log(this.x); //10} }}fn.bind({x: 14})()()();fn.call({x: 14})()(); }}obj.foo();

由于 this 在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了，所以，用 call()或者 apply()調(diào)用箭頭函數(shù)時，無法對 this 進行綁定，即傳入的第一個參數(shù)被忽略。

補充說明： this 為保留字，你不能重寫 this。

function test(){ var this = {}; //Uncaught SyntaxError: Unexpected token this} 宿主對象： 一門語言在運行的時候，需要一個環(huán)境，叫做宿主環(huán)境。 對于JavaScript，宿主環(huán)境最常見的是 web 瀏覽器，瀏覽器提供了一個 JavaScript 運行的環(huán)境，這個環(huán)境里面，需要提供一些接口，好讓 JavaScript 引擎能夠和宿主環(huán)境對接。 JavaScript 引擎才是真正執(zhí)行 JavaScript 代碼的地方，常見的引擎有 V8(目前最快 JavaScript 引擎、Google 生產(chǎn))、JavaScript core。 在瀏覽器或者服務(wù)端( nodejs )都有自己的 JS 引擎，在瀏覽器中，全局對象為 window，而在 nodejs 中，全局對象為 global。

來自：https://zhuanlan.zhihu.com/p/25294187