Javascript中this關鍵字的一些小知識_javascript技巧

Javascript應該是現在最流行的跨平台語言之一，一直在玩前端的一些有意思的東西，發現竟然沒有掌握好這門語言。有點捨本逐末，於是想趁著現在這有空的時候好好補充一點遺漏的東西。

this的隱性綁定

一開始這是我很迷惑的東西，剛開始看到的時候，不理解。而後，在相似的情況下，又能用類似的方法解決同樣的問題。試著理清這其中的知識，方便於查找。

這是一個Javascript語言上設計的錯誤，但是似乎這個錯誤是不可避免的，函數是對象，陣列是對像等等。引用《Javascript: The Good Parts》中的例子

複製程式碼 程式碼如下:

function 加號 (a,b) {return a b}
 var sum = add (3,4);
 console.log(sum); //sum = 7

此時sum的結果是7。

複製程式碼 程式碼如下:

 > typeof add
 > 'number'

這裡可以看到，add的型別是數值。

以此模式呼叫函數時，this被綁定到全域變數。
也就是在現在的環境下，我們可以這樣呼叫this

複製程式碼 程式碼如下:

 this.add(3,4)

這就是this的隱性綁定，而this會以不同的方式被綁定。

複製程式碼 程式碼如下:

var hello = function (){
    return "Hello, " this.name;
};
name = 'this';
console.log(hello());

這時我們就會得到Hello,this。而當

複製程式碼 程式碼如下:

var hello = function (){
    return "Hello, " this.name;
};
var user = {
    hello : hello,
    name : 'phodal'，

};
console.log(user.hello());

這時user中的hello便指向了hello函數，而這在我們的理解中，這怎麼可能，所以是個Bug。

如果我們在這個方法中定義一個變數並給它賦值this,那麼內部函數就可以透過那個變數存取到this。

var that = this

於是當情況稍微複雜一點的時候我們就需要用到:

複製程式碼 程式碼如下:

 vat that = this;

tips:

1.this變數的作用域總是由其最近的封閉函數所決定。
2.使用一個局部變數(如me,self,that)讓this綁定對於內部是可用的。

一個簡單的例子:

複製程式碼 程式碼如下:

var M = function(){
    this.name = "M";
};

var MM = function(){
    z = new M();
    this.name = "MM";

    z.printName = function(){
        console.log(this.name);
    };
    return z.printName();
};

var mm = new MM;

這時的this指向的是M函數，而由MM自身。如果我們將M中的this去掉，那麼回傳的就是一個undefined。 於是我們就創建一個當前this作用域的別名，如that或者self等等:

複製程式碼 程式碼如下:

var MM = function(){
    z = new M();
    this.name = "MM";
    var self = this;
    z.printName = function(){
        console.log(self.name);
    };
    return z.printName();
};

這樣就能回傳一個MM了。除此之外，在ES5中可以用回呼函數的bind方法。

複製程式碼 程式碼如下:

var MM = function(){
    z = new M();
    this.name = "MM";
    z.printName = function(){
        console.log(this.name);
    }.bind(this);
    return z.printName();
};

bind可以將方法綁定到接收者。

其他

又一個hello,world

在一次偶然的機會中遇到print('Hello')('World'),然後輸出了'Hello, World'。

所謂的高階函數，看起來似乎很有用，有興趣可以看看下一篇。