前言

之所以會有此篇文章當然還要從最近的一次面試說起，很抱歉居然又扯到面試上去看，其實不要說，平時不注意的東西，往往在面試時便會立馬給你揪出來哪裡有問題。

比如我當時就小小的栽了個跟頭，栽跟頭不要緊，要緊的是我確實對js的一些問題沒有了解透徹。

俗話說的好，半灌水響叮噹，我就那種一直認為自己js功底好的人，但真的拿出手來說，其實真的有點水了......此時再不好好學習一番，豈不是坐井觀天，所以讓我們開動吧！

小弟最近的文章基本都是邊寫邊發，若是各位發現什麼問題，或者感覺廢話太多，請包涵。

閒扯作用域

你瞭解javascript的作用域嗎？真的瞭解嗎？那來試試這道題吧：

1 if (!("a" in window)) {
 
2     var a = 1;
3 } 
4 alert(a);

好吧，拿出你的答案吧，吾已經露出了邪惡的笑容了，因為多數人看著這道題腦殼就有點昏（我會說我也有點昏嗎？？？）
讓我們一起來剝離她性感的外衣吧：

第一步："a" in window這是什麼意思？

意思是a是window的屬性嗎？那我們來做個試驗：

我那個去，你會發現不管註釋var a 還是不註釋，a都是window的屬性......於是上面答案呼之欲出！！！但我一團漿糊在我們腦袋中膨脹擴散......

在js的變數作用域中有個原則：所有變數宣告都在範圍作用域的頂部！

所以，之前我犯了一個愚蠢的錯誤，錯的連我也吃驚，所以我把我自己喝大家都忽悠了，注意陷阱

其實剛剛上面的完整程式碼是這樣的：

    <script type="text/javascript">
//        var a;
        var in_window = 'a' in window;
        alert(in_window);
        if (!("a" in window)) {
            var a = 1;
        } 
        alert(a);
    </script>

這樣的話：in_window自然是true，這才是隱藏的真相！！！

若是註釋下面這些程式碼的話：

終於正確了，剛剛因為自己的一個錯誤差點顛覆我最近學習的東西，太可怕了

現在我們來看看“所有變數申明都會在範圍作用域的頂部”是什麼意思。

意思是在最下面定義的變數會自動提到上面去啦！！！所以我們定義變數時不如直接全部定義上去算啦。

回到本題：

if (!("a" in window)) {
    var a = 1;
} 
alert(a);

其實他該是這個樣子的。。。。

var a;
if (!("a" in window)) {
    a = 1;
} 
alert(a);

他將if裡面的申明也提前了，怎麼樣不服氣吧，其實我也是有點不服氣，我想再試試：

var s = '';
if (false) {
    var a = 1;
}

請注意，其中s沒有任何意義，就是為了我方便設定斷點：

至此真相出現，無論如何a的申明都會提前包括以下幾種情況：

var s = '';
while (false) {
    var a = 1;
}

變形一

學而不思則罔，我們將題目做個簡單變形看看：

if (!("a" in window)) {
    a = 1;
}
alert(a);

在if裡面去掉了申明，這道題就該是“1”了，但是若是if裡面的程式碼不被執行的話就會報錯了喲；

變形2：碰上了函式

剛剛那個現在看來就相對簡單了，現在我們看看如此如此這般這般又會如何（我承認我閒的蛋疼好了）？

if (!("a" in window)) {
    var a = function () { window.a = 1; }
}
alert(a);

這樣一改真的很蛋疼啦，這裡不管a被定義為什麼，但他是函式表示式，函式表示式就和原來一樣，所以不變，if裡面不會被執行！

那若是這個樣子呢？

if (!("a" in window)) {
    function a() { window.a = 1; }
}
alert(a);

這個場景其實我也傻了，那麼設定個斷點看看：

看來a並不在window中，所以會執行if中的程式碼；

這裡卻又引出了另一個問題：到底變數提前或者函式提前？

var a = '1';
function a(){}
alert(a);

function a() { }
var a = '1';
alert(a);

這兩種寫法會導致最後輸出有所不同嗎？？？
答案是不會，他們的的結果都是1，原因就是函式式申明更加被優先啦，所以無論怎麼寫函式式什麼都在最前面！！

function a() {return false; }
if (a()) {
    var a = '1';
}
s = '';
alert(a);

function a() {return  true; }
if (a()) {
    var a = '1';
}
s = '';
alert(a);

我們前面說過，無論如何，if裡面的申明會提前，那麼我們這兩道題可以改寫一下：

var a = function () { return true };
var a;
if (a()) {
    a = '1';
}
s = '';
alert(a);

注意來：這裡的10行，雖說申明瞭變數a卻沒有給其賦值，所以a還是函式，這從這裡也可以看出來：

所以上面兩個答案就沒問題了，一個列印函式，一個列印數字1；

變形三

1 var a = 1,
2 b = function a(x) { x && b(--x); }; 
3 alert(a);

現在我不執行程式碼試試是否可以解析，答案是不可以。。。我解析不出來，還是執行算了吧，我太水了！
這裡涉及幾個重要概念：

1 變數宣告在進入執行上下文就完成了
2 函式宣告也是提前的，所有的函式宣告都在執行程式碼之前都已經完成了宣告，和變數宣告一樣
3 函式宣告會覆蓋變數宣告，但不會覆蓋變數賦值，如我們上面看到的

想要理清問題，我還是老老實實一步步做工作吧：

根據規則三，這個結果是沒有問題的，再看看下面的

從這裡可以看出，若是註釋了var a，這裡function a()壓根與它沒什麼事情，我們可以直接將之忽略（可能有誤）

所以該題可以理解為：

var a = 1,
b = function (x) { x && b(--x); }; 
alert(a);

坑爹的我本來是想對js中的this做次研究的，沒想到在作用域相關的東西上轉了這麼久，但是經過這次折騰我相信在這塊地方我應該不會出問題了吧？？？

進入正題

通常情況下, this代表的是前面提到的Globle Object，也就是Browser環境時的window Object.

當function作為某一物件的 method 時, this 代表這個 function 所屬的 object

其實這裡有個原則“javascript中的this永遠指向其函式擁有者”或者“this指標代表的是執行當前程式碼的物件的所有者”

說到javascript中的this就不能不提javascript中的函式，說到javascript中的函式就會涉及到閉包，我今天就以以下幾個方面研究下javascript中的this：

1 一般情況下的this

2 物件呼叫中的this

3 函式呼叫中的this

4 頁面dom事件物件中的this

5 大雜燴

正常情況下的this

正常情況下的this就是windows，我會亂說？

var a = 1;
alert(window.a);

申明a其實就在window上申明的，其實我各位說這些幹嘛呢。。。。大家都知道呀，所以跳過算啦。

物件中的this

 物件中的this情況相對複雜一點可能和我們後面的原型扯上關係，至於原因我們後面再說，先看看下面這個例子：

1 var person = {
2     name: '葉小釵',
3     getName: function () {
4         var scope = this;
5         alert(scope.name);
6         var s = ''//無實際意義，用於設定斷點
7     }
8 };
9 person.getName();

這個例子亦很平常，彷彿一切理所當然，當我拿出來說是想證明一件事情“this指向其函式擁有者”，這次擁有者為person所以列印葉小釵理所當然
我們簡單做下變形：

 1 var name = '素還真';
 2 function global_getName() {
 3     var scope = this;
 4     return scope.name;
 5     var s = ''//無實際意義，用於設定斷點
 6 }
 7 var person = {
 8     name: '葉小釵',
 9     getName: function () {
10         var scope = this;
11         return scope.name;
12         var s = ''//無實際意義，用於設定斷點
13     }
14 };
15 var s1 = global_getName();
16 var s2 = person.getName();
17 
18 var s = '';

也沒任何問題，好的我們再做一次變形：

var name = '素還真';
function global_getName() {
    var scope = this;
    return scope.name;
    var s = ''//無實際意義，用於設定斷點
}
var person = {
    name: '葉小釵',
    getName: global_getName
};
var s1 = global_getName();
var s2 = person.getName();

var s = '';

我們看到getName被指向了global_getName，那我們再呼叫person.getName會不會有所不同呢？
當然不會了！我發現我自己被自己感動了，完全在說一些沒意義的東西，所以下面這種情況是不可能騙到大家的，我就不繞彎子了：

var name = '素還真';
function global_getName() {
    var scope = this;
    return scope.name;
    var s = ''//無實際意義，用於設定斷點
}
var person = {
    name: '葉小釵',
    getName: global_getName
};
var hehe = {
    name: '笑吧',
    getName: person.getName
};

var s1 = global_getName();//素還真
var s2 = person.getName();//葉小釵
var s3 = hehe.getName(); //笑吧

函式中的this

要說函式的話，我先說說javascript中函式呼叫有四種方式和函式中this的相關東東：

1 方法呼叫模式：作為物件屬性呼叫obj.func()
2 函式呼叫模式：指向全域性，直接呼叫 func()
3 構造器呼叫模式：new方式呼叫，會隱式建立一個新物件其隱藏連結至函式prototype成員
4 call/apply呼叫模式：動態改變this指向的怪咖

函式程式碼中this值的第一個特性（同時也是最主要的特性）就是：它並非靜態的繫結在函式上。

正如此前提到的，this的值是在進入執行上下文（Excution context）的階段確定的，並且在函式程式碼中的話，其值每次都不盡相同。

然而，一旦進入執行程式碼階段，其值就不能改變了。如果要想給this賦一個新的值是不可能的，因為在那時this根本就不是變量了。

對於函式中this的設定被認為是一個失誤，但誰管他那麼多呢。。。 

現在回到正文，請看以下例子：

 1 function func() {
 2     var scope = this;
 3     function s_func() {
 4         var s_scope = this;
 5         var s1 = scope;
 6         var s2 = s_scope;
 7         var s = '';
 8     }
 9     s_func();
10 }
11 this.func();

這裡s1，s2都指向全域性，這是為什麼呢？我也不知道了，這裡就去查詢了下資料：

“ 函式上下文中this的值是函式呼叫者提供並且由當前呼叫表示式的形式而定的。如果在呼叫括號()的左邊有引用型別的值，那麼this的值就會設定為該引用型別值的base物件。 所有其他情況下（非引用型別），this的值總是null。然而，由於null對於this來說沒有任何意義，因此會隱式轉換為全域性物件。“

”當呼叫括號的左邊不是引用型別而是其它型別，這個值自動設定為null，結果為全域性物件。“

我們隨便看一個變形：

 1 var person = {
 2     name: '葉小釵',
 3     func: func
 4 };
 5 function func() {
 6     var scope = this;
 7     function s_func() {
 8         var s_scope = this;
 9         var obj = {};
10         obj.s1 = scope;
11         obj.s2 = s_scope;
12         return obj;
13     }
14     return s_func ();
15 }
16 
17 var o = this.func();
18 var o2 = person.func();
19 var s = '';

 這個應該比較好理解這邊就不說了。

建構函式

 以上說那麼多繞過去繞過來的大家一定累了吧，好吧，開心點，我們看看下面這個東西，我想你心情會好起來的！！！

 1 var name = 'window_葉小釵';
 2 var Person = function (name) {
 3     this.name = name;
 4 };
 5 
 6 Person('葉小釵');
 7 var s1 = Person.name;
 8 var o = new Person();
 9 
10 var s = '';

這是一段可怕的程式碼，Person('葉小釵')事實上改變不了任何事情，但從某種意義上來說Person也是物件，

所以他確確實實是存在name這個值的：

因為this.name是屬於該物件的子物件的屬性，若不例項化便休想染指

這個樣子寫又會有所不同，而且又產生了詭異的一幕：

var name = 'window_葉小釵';
var Person = function (name) {
    this.name = name;
};
Person.name = name;
Person.name1 = name;
var o = new Person('葉小釵');
var s1 = Person.name;
var s2 = Person.name1;
var s3 = o.name;
var s = '';

我們發現，由於Person中定義了this.name，外面無論怎麼賦值都無效啦！

關於動態指定this的call/apply

每個函式都有一個方法call可以動態指定this指向，第一個引數便是this指向，不傳或者null更具前面說的便是window，第二個引數為引數：

 1 var name = 'window_葉小釵';
 2 function getName() {
 3     return this.name;
 4 }
 5 var person = { name: '葉小釵' };
 6 var s1 = getName();
 7 var s2 = getName.call();
 8 var s3 = getName.call(null);
 9 var s4 = getName.call(undefined);
10 var s5 = getName.call(person);
11 var s = '';

dom事件中的this

<div id="wl" onclick="test_this(this)">
    點選我試試</div>
<script type="text/javascript">
    function test_this(el) {
        var scope = this;
        var s = '';
    }
</script>

我們看到el是dom物件，this指向的是window，那麼換個寫法看看：

<div id="wl">
    點選我試試</div>
<script type="text/javascript">
    function test_this(e) {
        var scope = this;
        var s = '';
    }
    document.getElementById('wl').onclick = test_this;
</script>

這個樣子，this指向的是dom物件，我們再試試：

<div id="wl">
    點選我試試</div>
<script type="text/javascript">
    function test_this(e) {
        var scope = this;
        var s = '';
    }
    document.getElementById('wl').addEventListener('click', test_this, false);
</script>

這樣結果與上面相同。

檢測學習成果的時間

現在，我感覺我對javascript中的this好像比較清楚了，是嗎？？來大家一起來做兩道題吧，大家記得獨立做下哦：

作用域：

a = 2;
var a = 1;
alert(a);

(function () {
    baz = 5;
    var bar = 10;
})();
alert(baz);

this：

 確實想不到合適的了，各位園友給推薦兩個唄。

結語

通過此次的研究學習，我感覺我對this的瞭解相對深入一點了，在後面工作中再注意總結一番，我相信我可以完全掌握this的特性！

小弟現在還很水，又是邊寫邊發文，若是有不對或是理解有誤的地方還請各位大俠提出來喲。

 參考資料：

如果你覺得這篇文章還不錯，請幫忙點選一下推薦，謝謝！

PS：小弟寫了3個多小時，沒有功勞也有苦勞，沒有苦勞也有疲勞啊！！！若是各位覺得還能讀，請猛擊頂！！！他們說連續點會頂多次我不知道是不是呢？