別再為this發愁了，js下的this體制摘自web前段學堂-有解無憂

1、this是啥？
簡言之，this是JavaScript語言中定義的眾多關鍵字之一，它的特殊在于它自動定義于每一個函式域內，但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。這里我們留個小懸念，希望看完這篇文章了你能回答出來this到底指引個甚。

2、this有啥用？

那邊觀眾又該問了，既然this這么難以理解，那么為個啥訓要用它呢？我們來看個例子：

function identify() {
    return this.name.toUpperCase();
}
function sayHello() {
    var greeting = "Hello, I'm " + identify.call( this );
    console.log( greeting );
}
var person1= {
    name: "Kyle"
};
var person2= {
    name: "Reader"
};
identify.call( person1); // KYLE
identify.call( person2); // READER
sayHello.call( person1); // Hello, I'm KYLE
sayHello.call( person2); // Hello, I'm READER

這段代碼很簡單，我們定義了兩個函式，分別為identify和sayHello。并且在不同的物件環境下執行了它們，達到了復用的效果，而不用為了在不同的物件環境下執行而必須針對不同的物件環境寫對應的函式了。簡言之，this給函式帶來了復用。那邊客官又問了，我不用this一樣可以實作，如：

function identify(context) {
    return context.name.toUpperCase();
}
function sayHello(context) {
    var greeting = "Hello, I'm " + identify( context);
    console.log( greeting );
}
var person1= {
    name: "Kyle"
};
var person2= {
    name: "Reader"
};
identify( person1); // KYLE
identify( person2); // READER
sayHello( person1); // Hello, I'm KYLE
sayHello( person2); // Hello, I'm READER

仔細一看，這位客官給出的解決方法的確也達到了類似的效果。贊一個！我想說的是，隨著代碼的增加，函式嵌套、各級呼叫等變得越來越復雜，那么傳遞一個物件的參考將變得越來越不明智，它會把你的代碼弄得非常亂，甚至你自己都無法理解清楚。而this機制提供了一個更加優雅而靈便的方案，傳遞一個隱式的物件參考讓代碼變得更加簡潔和復用。好了，知道了this的用處，那么再看看我們對它的誤解。

3、關于this的誤解

相信很多童鞋是學過其它語言的，在很多編程語言中都有this的機制，慣性思維把其它語言里對它的理解帶到了JavaScript中。同時，由于this這個單詞的理解導致了我們產生了對它各種各樣的誤解。所以，開始前，我們先澄清下對它的誤解。

3.1 誤解一：this參考function本身

我們都知道，在函式里參考函式可以達到遞回和給函式屬性賦值的效果。而這在很多應用場景下顯得非常有用。所以，很多人都誤以為this就是指引function本身。例如：

function fn(num) {
    console.log( "fn: " + num );
    // count用于記錄fn的被呼叫次數
    this.count++;
}
fn.count = 0;
var i;
for (i=0; i<10; i++) {
    if (i > 5) {
        fn( i );
    }
}
// fn: 6
// fn: 7
// fn: 8
// fn: 9

console.log( fn.count ); // 0 -- 耶？咋不是4捏？

上面我們想要記錄fn被呼叫的次數，可是明顯fn被呼叫了四次但count仍然為0。咋回事捏？這里簡單解釋下，fn里第4行的自增隱式的創建了一個全域變數count，由于初始值為undefined，所以每一次自增其實依然不是一個數字，你在全域環境下列印count（window.count）輸出的應該是NaN。而第6行定義的函式熟悉變數count依然沒變，還是0。如果對這個執行結果不清楚的，歡迎去看我前些天的那篇博文（聊一下JS中的作用域scope和閉包closure scope和closure），在這里你只需要知道，this參考的是function這種理解是錯誤的就行。

這邊就會又有人問了，既然this不是參考function，那么我要實作遞回函式，該咋參考呢?這里簡單回答下介個問題，兩種方法：①函式體內用函式名來參考函式本身②函式體內使用arguments.callee來參考函式（不推薦）。那么既然第二種方法不推薦，匿名函式咋參考呢？用第一種，并且給匿名函式一個函式名即可（推薦）。

3.2 誤解二：this參考的是function的詞法作用域

這種誤解欺騙的人可能更多一些。首先，澄清一下，this并沒有參考function的詞法作用域。的確JS的引擎內對詞法作用域的實作的確像是一個物件，擁有屬性和函式，但是這僅僅是JS引擎的一種實作，對代碼來說是不可見的，也就是說詞法作用域“物件”在JS代碼中取不到。（關于詞法作用域，如果不理解，可以參考之前的一篇博文《聊一下JS中的作用域scope和閉包closure scope和closure》）。看個錯誤的例子：

function fn1() {
    var a = 2;
    this.fn2();//以為this參考的是fn1的詞法作用域
}
function fn2() {
    console.log( this.a );
}
fn1(); //ReferenceError

上面的代碼明顯沒有執行出想要的結果，從而可以看到this并沒有參考函式的詞法作用域。甚至，可以肯定的說，這個例子里fn2可以在fn1里正確執行都是偶然的（理解了詞法作用域你就知道為什么這里執行不報錯了）。

4、this到底跟啥有關？

好了，扯了那么多都沒上干貨，有的觀眾都開始關閉當前頁開始離席了。這里，我們鄭重宣告：this跟函式在哪里定義沒有半毛錢關系，函式在哪里呼叫才決定了this到底參考的是啥。也就是說this跟函式的定義沒關系，跟函式的執行有大大的關系。所以，記住，“函式在哪里呼叫才決定了this到底參考的是啥”。

5、this機制的四種規則

this到底系結或者參考的是哪個物件環境決定于函式被呼叫的地方。而函式的呼叫有不同的方式，在不同的方式中呼叫決定this參考的是哪個物件是由四種規則確定的。我們一個個來看。

5.1 默認系結全域變數

這條規則是最常見的，也是默認的。當函式被單獨定義和呼叫的時候，應用的規則就是系結全域變數。如下：

function fn() {
    console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn單獨呼叫，this參考window

5.2 隱式系結

隱式呼叫的意思是，函式呼叫時擁有一個背景關系物件，就好像這個函式是屬于該物件的一樣。例如：

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
obj.fn(); // 2 -- this參考obj。

需要說明的一點是，最后一個呼叫該函式的物件是傳到函式的背景關系物件（繞懵了）。如：

function fn() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    fn: fn
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.fn(); // 42 -- this參考的是obj2.

還有一點要說明的是，失去隱式系結的情況，如下：

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
var bar = obj.fn; // 函式參考傳遞
var a = "全域"; // 定義全域變數
bar(); // "全域"

如上，第8行雖然有隱式系結，但是它執行的效果明顯是把fn賦給bar。這樣bar執行的時候，依然是默認系結全域變數，所以輸出結果如上。

5.3 顯示系結

學過bind()\apply()\call()函式的都應該知道，它接收的第一個引數即是背景關系物件并將其賦給this。看下面的例子：

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2
};
fn.call( obj ); // 2

如果我們傳遞第一個值為簡單值，那么后臺會自動轉換為對應的封裝物件。如果傳遞為null，那么結果就是在系結默認全域變數，如：

function fn() {
     console.log( this.a );
}
var obj = {
     a: 2
};
var a = 10;
fn.call( null); // 10

5.4 new新物件系結

如果是一個建構式，那么用new來呼叫，那么系結的將是新創建的物件。如：

function fn(a) {
    this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2

注意，一般建構式名首字母大寫，這里沒有大寫的原因是想提醒讀者，建構式也是一般的函式而已。

6、結束語

讀到現在，1中問的問題你該自己能回答上來了。上面介紹的四種關于this系結的4中情況和規則，現實寫代碼的程序中肯定比這要多和復雜，但是無論多復雜多亂，它們都是混合應用上面的幾個規則和情況而已。只要你的思路和理解是清晰的，那肯定沒問題的。

uj5u.com熱心網友回復：