Javascript應該是現在最流行的跨平台語言之一,一直在玩前端的一些有意思的東西,發現竟然沒有掌握好這門語言。有點捨本逐末,於是想趁著現在這有空的時候好好補充一點遺漏的東西。
this的隱性綁定
一開始這是我很迷惑的東西,剛開始看到的時候,不理解。而後,在相似的情況下,又能用類似的方法解決同樣的問題。便試著理清這其中的知識,方便於查找。
這是一個Javascript語言上設計的錯誤,但是似乎這個錯誤是不可避免的,函數是對象,數組是對象等等。引用《Javascript: The Good Parts》中的例子
復制代碼 代碼如下:
function add (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'。
所謂的高階函數,看上去似乎很有用,有興趣可以看看下一篇。