摘要：作為構(gòu)造函數(shù)何為構(gòu)造函數(shù)所謂構(gòu)造函數(shù)就是用來對象的函數(shù)，像等都是全局定義的構(gòu)造函數(shù)。正在跑步正在說話正在跑步正在說話如上，如果函數(shù)作為構(gòu)造函數(shù)用，那么其中的就代表它即將出來的對象。

總括:詳解JavaScript中的this的一篇總結(jié)，不懂this這個難點，很多時候會造成一些困擾，寫出一些bug不知如何收場，所以一起來寫bug吧，不對，一起來寫代碼吧。

原文地址：JavaScript中的this

知乎專欄: 前端進擊者

博主博客地址：Damonare的個人博客

人生得意須盡歡，莫使金樽空對月

? JavaScript中的this格外的不一樣，比如Java語言中的this是在代碼的執(zhí)行階段是不可更改，而JavaScript的this是在調(diào)用階段進行綁定。?因為這一性質(zhì)所以給了this很大的發(fā)揮空間。但其在嚴(yán)格模式和非嚴(yán)格模式下又有些不一樣，在函數(shù)的不同調(diào)用方式也導(dǎo)致this有些區(qū)別。?

?首先對this的下個定義：this是在執(zhí)行上下文創(chuàng)建時確定的一個在執(zhí)行過程中不可更改的變量。

所謂執(zhí)行上下文，就是JavaScript引擎在執(zhí)行一段代碼之前將代碼內(nèi)部會用到的一些變量、函數(shù)、this提前聲明然后保存在變量對象中的過程。這個"代碼片段"包括：全局代碼(script標(biāo)簽內(nèi)部的代碼)、函數(shù)內(nèi)部代碼、eval內(nèi)部代碼。而我們所熟知的作用域鏈也會在保存在這里，以一個類數(shù)組的形式存儲在對應(yīng)函數(shù)的[[Scopes]]屬性中。

this只在函數(shù)調(diào)用階段確定，也就是執(zhí)行上下文創(chuàng)建的階段進行賦值，保存在變量對象中。這個特性也導(dǎo)致了this的多變性:?即當(dāng)函數(shù)在不同的調(diào)用方式下都可能會導(dǎo)致this的值不同。

??上面我們說過了在嚴(yán)格模式下和非嚴(yán)格模式下this表現(xiàn)不同：

var a = 1;
function fun() {
   "use strict";
    var a = 2;
      return this.a;
}
fun();//?報錯 Cannot read property "a" of undefined

?嚴(yán)格模式下，this指向undefined;

var a = 1;
function fun() {
    var a = 2;
      return this.a;
}
fun();//1

?非嚴(yán)格模式下this指向window;

上面同一段代碼，在不同模式下之所以有不同表現(xiàn)，就是因為this在嚴(yán)格模式，非嚴(yán)格模式下的不同。

結(jié)論：當(dāng)函數(shù)獨立調(diào)用的時候，在嚴(yán)格模式下它的this指向undefined，在非嚴(yán)格模式下，當(dāng)this指向undefined的時候，自動指向全局對象(瀏覽器中就是window)

多提一句，在全局環(huán)境下，this就是指向自己，再看?：

this.a = 1;
var b = 1;
c = 1;
console.log(this === window)//true
//這三種都能得到想要的結(jié)果，全局上下文的變量對象中存在這三個變量

再多提一句，當(dāng)this不在函數(shù)中用的時候會怎樣?看?：

var a = 1000;
var obj = {
    a: 1,
      b: this.a + 1
}
function fun() {
    var obj = {
          a: 1,
        c: this.a + 2 //嚴(yán)格模式下這塊報錯 Cannot read property "a" of undefined
    }
    return obj.c;
}
console.log(fun());//1002
console.log(obj.b);//1001

這種情況下this還是指向了window。那么我們可以多帶帶下個結(jié)論：

當(dāng)obj在全局聲明的時候，obj內(nèi)部屬性中的this指向全局對象，當(dāng)obj在一個函數(shù)中聲明的時候，嚴(yán)格模式下this會指向undefined，非嚴(yán)格模式自動轉(zhuǎn)為指向全局對象。

?好了，剛剛小試牛刀下，知道了嚴(yán)格模式和非嚴(yán)格模式下this的區(qū)別，然而我們?nèi)粘?yīng)用最多的還是在函數(shù)中用this，上面也說過了this在函數(shù)的不同調(diào)用方式還有區(qū)別，那么函數(shù)的調(diào)用方式都有哪些呢？四種：

在全局環(huán)境或是普通函數(shù)中直接調(diào)用

作為對象的方法

使用apply和call

作為構(gòu)造函數(shù)

下面分別就四種情況展開：

上面的?其實就是直接調(diào)用的，不過我決定再寫???：

var a = 1;
var obj  =  {
    a: 2,
      b: function () {
        function fun() {
          return this.a
        }
       console.log(fun());
    }
} 
obj.b();//1

fun函數(shù)雖然在obj.b方法中定義，但它還是一個普通函數(shù)，直接調(diào)用在非嚴(yán)格模式下指向undefined，又自動指向了全局對象，正如預(yù)料，嚴(yán)格模式會報錯undefined.a不成立，a未定義。

重要的事情再說一遍：當(dāng)函數(shù)獨立調(diào)用的時候，在嚴(yán)格模式下它的this指向undefined，在非嚴(yán)格模式下，當(dāng)this指向undefined的時候，自動指向全局對象(瀏覽器中就是window)。?

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
console.log(obj.b())//2

?b所引用的匿名函數(shù)作為obj的一個方法調(diào)用，這時候this指向調(diào)用它的對象。這里也就是obj。那么如果b方法不作為對象方法調(diào)用呢？啥意思呢，就是這樣?：

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
var t = obj.b;
console.log(t());//1

如上，t函數(shù)執(zhí)行結(jié)果竟然是全局變量1，為啥呢？這就涉及Javascript的內(nèi)存空間了，就是說，obj對象的b屬性存儲的是對該匿名函數(shù)的一個引用，可以理解為一個指針。當(dāng)賦值給t的時候，并沒有多帶帶開辟內(nèi)存空間存儲新的函數(shù)，而是讓t存儲了一個指針，該指針指向這個函數(shù)。相當(dāng)于執(zhí)行了這么一段偽代碼：

var a = 1;
function fun() {//此函數(shù)存儲在堆中
    return this.a;
}
var obj = {
  a: 2,
  b: fun //b指向fun函數(shù)
}
var t = fun;//變量t指向fun函數(shù)
console.log(t());//1

此時的t就是一個指向fun函數(shù)的指針，調(diào)用t，相當(dāng)于直接調(diào)用fun，套用以上規(guī)則，打印出來1自然很好理解了。

關(guān)于apply和call是干什么的怎么用本文不涉及，請移駕：apply，call

這是個萬能公式，實際上上面直接調(diào)用的代碼，我們可以看成這樣的：

function fun() {
      return this.a;
}
fun();//1
//嚴(yán)格模式
fun.call(undefined)
//非嚴(yán)格模式
fun.call(window)

這時候我們就可以解釋下，為啥說在非嚴(yán)格模式下，當(dāng)函數(shù)this指向undefined的時候，會自動指向全局對象，如上，在非嚴(yán)格模式下，當(dāng)調(diào)用fun.call(undefined)的時候打印出來的依舊是1，就是最好的證據(jù)。

為啥說是萬能公式呢？再看函數(shù)作為對象的方法調(diào)用:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
obj.b()
obj.b.call(obj)

如上，是不是很強大，可以理解為其它兩種都是這個方法的語法糖罷了，那么apply和call是不是真的萬能的呢？并不是，ES6的箭頭函數(shù)就是特例，因為箭頭函數(shù)的this不是在調(diào)用時候確定的，這也就是為啥說箭頭函數(shù)好用的原因之一，因為它的this固定不會變來變?nèi)サ牧恕ｊP(guān)于箭頭函數(shù)的this我們稍后再說。

何為構(gòu)造函數(shù)？所謂構(gòu)造函數(shù)就是用來new對象的函數(shù)，像Function、Object、Array、Date等都是全局定義的構(gòu)造函數(shù)。其實每一個函數(shù)都可以new對象，那些批量生產(chǎn)我們需要的對象的函數(shù)就叫它構(gòu)造函數(shù)罷了。注意，構(gòu)造函數(shù)首字母記得大寫。

function Fun() {
  this.name = "Damonre";
  this.age = 21;
  this.sex = "man";
  this.run = function () {
    return this.name + "正在跑步";
  }
}
Fun.prototype = {
  contructor: Fun,
  say: function () {
    return this.name + "正在說話";
  }
}
var f = new Fun();
f.run();//Damonare正在跑步
f.say();//Damonare正在說話

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

偽代碼如下：

function Fun() {
  //new做的事情
  var obj = {};
  obj.__proto__ = Fun.prototype;//Base為構(gòu)造函數(shù)
  obj.name = "Damonare";
  ...//一系列賦值以及更多的事
  return obj
}

也就是說new做了下面這些事:

創(chuàng)建一個臨時對象

給臨時對象綁定原型

給臨時對象對應(yīng)屬性賦值

將臨時對象return

也就是說new其實就是個語法糖，this之所以指向臨時對象還是沒逃脫上面說的幾種情況。

當(dāng)然如果直接調(diào)用Fun(),如下：

function Fun() {
  this.name = "Damonre";
  this.age = 21;
  this.sex = "man";
  this.run = function () {
    return this.name + "正在跑步";
  }
}
Fun();
console.log(window)

其實就是直接調(diào)用一個函數(shù)，this在非嚴(yán)格模式下指向window，你可以在window對象找到所有的變量。

另外還有一點，prototype對象的方法的this指向?qū)嵗龑ο螅驗閷嵗龑ο蟮?b>__proto__已經(jīng)指向了原型函數(shù)的prototype。這就涉及原型鏈的知識了，即方法會沿著對象的原型鏈進行查找。

剛剛提到了箭頭函數(shù)是一個不可以用call和apply改變this的典型。

我們看下面這個?：

var a = 1;
var obj = {
  a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1

以上，兩次調(diào)用都是1。

那么箭頭函數(shù)的this是怎么確定的呢？箭頭函數(shù)會捕獲其所在上下文的 this 值，作為自己的 this 值，也就是說箭頭函數(shù)的this在詞法層面就完成了綁定。apply，call方法只是傳入?yún)?shù)，卻改不了this。

var a = 1;
var obj = {
  a: 2
};
function fun() {
    var a = 3;
    let f = () => console.log(this.a);
      f();
};
fun();//1
fun.call(obj);//2

如上，fun直接調(diào)用，fun的上下文中的this值為window，注意，這個地方有點繞。fun的上下文就是此箭頭函數(shù)所在的上下文，因此此時f的this為fun的this也就是window。當(dāng)fun.call(obj)再次調(diào)用的時候，新的上下文創(chuàng)建，fun此時的this為obj，也就是箭頭函數(shù)的this值。

再來一個?：

function Fun() {
    this.name = "Damonare";
}
Fun.prototype.say = () => {
    console.log(this);
}
var f = new Fun();
f.say();//window

有的同學(xué)看到這個?會很懵逼，感覺上this應(yīng)該指向f這個實例對象啊。不是的，此時的箭頭函數(shù)所在的上下文是__proto__所在的上下文也就是Object函數(shù)的上下文，而Object的this值就是全局對象。

那么再來一個?:

function Fun() {
    this.name = "Damonare";
      this.say = () => {
        console.log(this);
    }
}
var f = new Fun();
f.say();//Fun的實例對象

如上，this.say所在的上下文，此時箭頭函數(shù)所在的上下文就變成了Fun的上下文環(huán)境，而因為上面說過當(dāng)函數(shù)作為構(gòu)造函數(shù)調(diào)用的時候(也就是new的作用)上下文環(huán)境的this指向?qū)嵗龑ο蟆?/p> 后記

文中定義均為個人總結(jié)，不妥之處還請雅正。

轉(zhuǎn)載請注明出處。

以上。