JavaScript之撲朔迷離的this
JavaScript這門語言中，最令人迷惑的地方有三個，閉包、this、原型。針對大多數人，可以利用詞法作用域等避開this的坑，但是我們不能一直生活在舒適區，要敢於打破砂鍋問到底，對我們來說也是一種提升。
一、一般對this關鍵字的誤解：
1、 this指向函式自身
2、 this指向函式詞法作用域
我們可以看以下一段程式碼：
1 function test() {
2test.a = 1;
3this.a = 2;
4console.log(test.a);
5console.log(this.a);
6console.log(test.a === this.a);
7}
8
9test();
10console.dir(test);
在上面這段程式碼中，我們在全域性宣告一個方法test,給test中的a屬性賦值1，當前方法中的this中的a屬性賦值2，加入this指向函式自身，那麼test.a === this,a並且都等於2.
下面我們來看下這段程式碼的執行結果：
從上可以看出，scopes為全域性作用域window，this也指向這裡，雖然函式本身也是一個物件，但是this並不指向這裡。
有一點我們一定要記住， this是在執行時進行繫結的，並不是在編寫時繫結的，它的上下文取決於函式呼叫時的各種條件。this的繫結和函式宣告的位置沒有任何關係，只取決於函式的呼叫方式。
既然this是在執行時繫結的，那我們有沒有辦法改變當前this的繫結，使其不指向window，而指向方法test呢？答案是肯定的，我們可以藉助一些強制繫結方法，如 call、apply、bind 來改變this的指向，我們可以將程式碼改成下面這種方式：
1 function test() {
2test.a = 1;
3this.a = 2;
4console.log(test.a);
5console.log(this.a);
6console.log(test.a === this.a);
7}
8
9test.call(test);
10console.dir(test);
執行結果如下：
接下來我們看下this是否指向函式的詞法作用域，以下有段比較有意思的程式碼：
1 function parent() {
2var a = 2;
3
4function child() {
5console.log(this.a)
6}
7child();
8
9}
10parent();
假如this指向函式的詞法作用域，那麼child方法中的this.a應該是存在，實際上的執行結果如下：
實際上， 在JavaScript內部，作用域確實和物件類似，可見的識別符號都是它的屬性。但是作用域“物件”無法通過JavaScript程式碼訪問，它存在JavaScript引擎內部。 所以每當你想要把this和詞法作用域的查詢混合使用時，一定要提醒自己，這是無法實現的。
二、this的繫結規則
this的繫結規則大致分為以下幾類：
2.1 預設繫結
2.2 隱式繫結
2.3 顯式繫結
2.4 new繫結
2.1 預設繫結
上述示例中this的指向是指向window的，他們都有一個共同的特徵，不帶任何修飾的函式引用進行呼叫的，因此只能使用預設繫結，無法應用其他規則
2.2 隱式繫結
隱式繫結首先需要考慮的規則就是 呼叫位置是否有上下文物件，或者說是否被某個物件擁有或包含 ，例如：
這裡的this就是指向物件obj。還有類似一些DOM事件的繫結，document.getElementById('xxx').addEventListener('click', function(){xxx});回撥方法中的this是指向選擇器選中的元素的。這種情況下可以簡單的理解為this指向呼叫方法.前面的那個物件。
2.3 顯式繫結
顯示繫結在開發過程中運用的比較多，藉助於這些顯式繫結方法，可以直接改變當前方法的this指向，使得js語言非常的靈活。主要有call、apply和bind三種，基本使用如下：
1function sum() {
2console.log(this.a + this.b);
3}
4var obj1 = {
5a: 1,
6b: 2
7};
8var test = sum.bind(obj1);
9sum.call(obj1); //3
10sum.apply(obj1); //3
11test(); //3
注意事項：
call && apply第一個引數接受的是this物件，call第二個引數以後可以接受字串形式的引數，apply接受的是一個類陣列/陣列引數
將null || undefined作為this的繫結物件傳入call/apply/bind時，這些值在呼叫時會被忽略，實際應用的是預設繫結規則
2.4 new繫結
JavaScript語言中的new操作符和其他面嚮物件語言中的new操作符不大一樣，因為在JavaScript中沒有物件的概念。所有的函式都可以使用new來呼叫，new的呼叫又稱為建構函式呼叫。在建構函式呼叫過程中，會自動執行下面的操作。
1、建立（或者說構造）一個全新的物件
2、這個物件會被執行[[Prototype]]連線
3、這個新物件會繫結到函式呼叫的this
4、如果函式沒有返回其他物件，那麼new表示式中的函式呼叫會自動返回這個新物件
建構函式也是js中常用的一種設計模式，如以下程式碼：
1 function Test(a, b) {
2this.a = a;
3this.b = b;
4this.add = function() {
5debugger;
6console.log(this.a + this.b);
7}
8}
9var cc = new Test(1, 2);
10cc.add();
11console.log(cc);
在new呼叫過程中，返回了一個新物件，並且該物件的this指向Test；
如有問題，煩請及時指出，謝謝！