摘要：當(dāng)中的是一個用于指向當(dāng)前上下文對象的關(guān)鍵字。創(chuàng)建實例時的構(gòu)造函數(shù)中的，永遠(yuǎn)指向那個實例后對象，不是外部環(huán)境使用來調(diào)用函數(shù)時，先改變其上下文環(huán)境，在對其構(gòu)造函數(shù)進(jìn)行調(diào)用。

javascript 當(dāng)中的 this是一個用于指向當(dāng)前上下文對象的關(guān)鍵字。在面向?qū)ο缶幊碳叭粘ｉ_發(fā)當(dāng)中我們經(jīng)常與其打交道，初學(xué)javscript的朋友非常容易誤入歧途從而理解錯誤。

在我的深入貫徹閉包思想一章中其實已經(jīng)講了很多關(guān)于環(huán)境棧(即上下文對象)的相關(guān)內(nèi)容，但內(nèi)容過于冗長，不便閱讀，時間充足的同學(xué)可以去看下，但這篇中，我們還是獨立開來，下面我總結(jié)了幾條有關(guān)上下文的知識，希望能幫助大家。

首先需要聲明的是這些術(shù)語的問題，其實我們常說的環(huán)境棧，調(diào)用棧，上下文棧 等等很多民間自創(chuàng)術(shù)語，它們形容的都是一個東東，即環(huán)境棧(這里我就拿第一個詞來形容了，大家知道就好)

javascript代碼塊有三種運行環(huán)境分別是：

1.全局(Global code)

默認(rèn)執(zhí)行環(huán)境,也就是沒有任何函數(shù)包裹在window下執(zhí)行的代碼片段。

 //window
 var a = 12;

 (function(){
    a = 13;
 }())

就比如這兩段代碼前者在全局window下執(zhí)行了一個新建變量與賦值的操作。后者是一個匿名自調(diào)函數(shù)，它的上下文一定是Global，所以，無論在哪里運行它，它只能訪問自身的活動對象以及Global的變量對象。

2.函數(shù)(Function code)

 function fun(){
   a = 24;
   return a;
 }

 var foo = new Function("var a = 12; return a;");

 foo();
 fun();

除外的Function它表示在函數(shù)當(dāng)中執(zhí)行的代碼.

3.eval (Eval code)

以上兩種情況指的是在特定情境下的代碼片段，但是不包括另一種情況，也就是eval環(huán)境 (這里應(yīng)指動態(tài)環(huán)境，因為據(jù)我所知以目前JS版本,只有eval可以創(chuàng)建動態(tài)執(zhí)行環(huán)境吧? )。

  var codeStr = "var a = 12";
  eval(codeStr);

以上三種執(zhí)行上下文構(gòu)成了執(zhí)行上下文棧(ECS),在整個棧中有依次排列的上下文(Execution Context),位于最底層的是Global全局環(huán)境，上面依次是函數(shù)執(zhí)行環(huán)境。而eval則會在運行中javascript引擎臨時去創(chuàng)建，也就是沒有在預(yù)編譯前幾毫秒進(jìn)行編譯代碼整合。

在每個EC當(dāng)中存有幾個特別重要的屬性，變量對象,作用域鏈,this指向

變量對象(Variable Object,VO)

變量

函數(shù)的聲明

函數(shù)的參數(shù)

作用域鏈(Scope Chain)
構(gòu)成作用域的開山鼻祖? (確切的說應(yīng)該是詞法作用域,但不能排除eval創(chuàng)建的動態(tài)環(huán)境)

this 指向
沒錯，它儲存一個對象的引用地址，但不是在詞法階段定義的，而是在運行時綁定的，它引用的值取決于函數(shù)調(diào)用時的各種條件。只取決于函數(shù)的調(diào)用方式。

變量對象里面存儲了在上下文中定義的變量和函數(shù)聲明。在函數(shù)上下文環(huán)境下不能直接使用變量對象，而是要等到執(zhí)行流進(jìn)入當(dāng)前環(huán)境下來激活，被稱作活動對象

注:上面說了在一個EC中它們是屬于特別重要的屬性(其構(gòu)成了最基本的作用域規(guī)則)，也就是說還有其他javascript內(nèi)部實現(xiàn)需要的屬性,它們大概包含函數(shù)的調(diào)用方式，在哪里被調(diào)用等等.

好了整理一下，`在這一小節(jié)里面，我們大致了解了ECS及EC的概念以及this與他們的關(guān)系及其this的定義.

 // Global Context
 var obj = {
   fun:()=>()=>{ console.log(this); },
   foo:()=>{ console.log(this); }
 }
 
 obj.foo.name = "tongtong";

 /*
    把foo函數(shù)轉(zhuǎn)賦給context變量，這時foo函數(shù)對象身上的屬性是具備`復(fù)合類型條件`的，即引用.
 */

 var context = obj.foo;

 //通過返回的函數(shù)來二次調(diào)用，同樣屬于全局環(huán)境下，因為內(nèi)部函數(shù)調(diào)用時已經(jīng)不屬于obj對象了.
 obj.fun()();  //window
 
 context();  //window
 context.name; // "tongtong"

函數(shù)不是簡單類型值,是復(fù)合類型，我們一樣可以用.操作符像對待對象一樣為它添加屬性與方法。與其他兩位小伙伴(Array Object)不同的是，它可以調(diào)用呀。只要調(diào)用環(huán)境變化了，this當(dāng)然也就隨波逐流。

以上這個例子，我們需要注意，在把它們賦給其他變量時，由于它的執(zhí)行環(huán)境是會變化的，即每次調(diào)用都會刷新this，對于新手來說，這點一定要搞清楚。

//global Context

//no.1
(function(){ console.log(this); }()) //window

//no.2
var x = 12;
var foo = function(){
    this.x = 12;
}

new foo();

x //12

在閉包中this是指向window的. 如若不然呢？它沒有任何調(diào)用者，它是自調(diào)，只能是window，也可以這樣理解 : 所有以函數(shù)調(diào)用的方式this一定是window，即foo()。而 obj.foo(); new foo()它們的this是有意義的。

創(chuàng)建實例時的構(gòu)造函數(shù)中的this，永遠(yuǎn)指向那個實例后對象，不是外部環(huán)境. 使用new來調(diào)用函數(shù)時，先改變其上下文環(huán)境，在對其構(gòu)造函數(shù)進(jìn)行調(diào)用。對順序不清楚的同學(xué)，請自行查閱關(guān)于 javascript生成實例步驟.

這兩個方法位于Function.prototype，擁有更改上下文的功能，前者需手動填寫函數(shù)參數(shù)，后者可以通過數(shù)組來表示。

 // Global Context
 
 var obj = {};

 //call
 var foo = function(num){ 
    console.log(this);
    console.log(num + 8);
 };

 foo.call(12); // obj 20
 foo(12);  //window 12

 //apply
 var fun = function(){     
    console.log(this);
 console.log(Object.prototype.slice.call(arguments).redux((x,y)=> x + y); ) 
 }

 fun.call(obj,[12,34,56,78]);
 fun(null,[12,34,56,78]);
 

他們都把第一個參數(shù)作為上下文并調(diào)用。那么如何更改一個函數(shù)的上下文調(diào)用環(huán)境呢？我們以bind來簡單模擬一下。

var _bind = function(fun,context){
    
    //取第一個之后的參數(shù)列表.
    var params = [].slice.call(arguments).slice(2);
 
    //給我們的函數(shù)指定上下文對象。
    context.fun = fun;
    
    return function(){ var result = params.concat(Array.from(arguments)); return context.fun(result)};
}

至于call,apply方法的模擬實現(xiàn)，這里就不說了，感興趣的童鞋可以去網(wǎng)上搜索一下.

var a = “111”;
var b = “222”;
function test() { 

　　var a = “333”;
　　var b = “444”; 
　　alert(this.a);
　　alert(this.b); 

}
var test= new test() ;
alert(test.a);
alert(test.b); 

在創(chuàng)建一個實例時，它的類內(nèi)部的this必然是這個實例。他的順序大致是

創(chuàng)建上下文環(huán)境

執(zhí)行構(gòu)造函數(shù)

把構(gòu)造函數(shù)的prototype，放到實例的原型上

這里我們只需要知道它先創(chuàng)建上下文，再進(jìn)行調(diào)用構(gòu)造函數(shù).

var obj = {
    Pagination:function(){ return this; }
};

new obj.Pagination(); // Pagination {}

查找this的機(jī)制與作用域一致，都是就近原則。

setTimeout(function(){ return this; },0);  //window

setTimeout回調(diào)的執(zhí)行環(huán)境下的this對象是window，幾乎瀏覽器的所有原生方法回調(diào)函數(shù)的this都是window，但是如果我們在其場景使用回調(diào)，這個this就變成不可預(yù)期的了，因為我們不知道此函數(shù)，到底在哪里執(zhí)行了.

this是執(zhí)行時決定的，也可以說函數(shù)調(diào)用時，決定的。

EC中附帶的三類對象(非全部),其中this作為其中一員，每次執(zhí)行流進(jìn)入EC時，它都有可能會更新。而this的改變正是依賴這種現(xiàn)象。

this使用就近原則，從當(dāng)前環(huán)境向外延伸，直至找到離它最近的那個對象為止。

列表項目

我特別希望大家能在文章中給我提出意見，文中內(nèi)容都是博主個人理解，算不上是對的，所以我建議大家只做參考，或看其他類似文章做一個自己的總結(jié)，每個人理解javascript都不一樣，如果不看底層編譯原理，在這個層面之上，我們只能靠這種方法理解了。。。但是記住，凡事都要自己求證的，別人說的是他人的觀點，自己理解出來的才是最適合你的.