Javascript中this關(guān)鍵字的一些小知識(shí)
Javascript應(yīng)該是現(xiàn)在最流行的跨平臺(tái)語言之一,一直在玩前端的一些有意思的東西,發(fā)現(xiàn)竟然沒有掌握好這門語言。有點(diǎn)舍本逐末,于是想趁著現(xiàn)在這有空的時(shí)候好好補(bǔ)充一點(diǎn)遺漏的東西。
this的隱性綁定
一開始這是我很迷惑的東西,剛開始看到的時(shí)候,不理解。而后,在相似的情況下,又能用類似的方法解決同樣的問題。便試著理清這其中的知識(shí),方便于查找。
這是一個(gè)Javascript語言上設(shè)計(jì)的錯(cuò)誤,但是似乎這個(gè)錯(cuò)誤是不可避免的,函數(shù)是對象,數(shù)組是對象等等。引用《Javascript: The Good Parts》中的例子
function add (a,b) {return a+b}
var sum = add (3,4);
console.log(sum); //sum = 7
此時(shí)sum的結(jié)果是7。
> typeof add
> 'number'
在這里可以看到,add的類型是數(shù)值。
以此模式調(diào)用函數(shù)時(shí),this被綁定到全局變量。
也就是在現(xiàn)在的環(huán)境下,我們可以這樣調(diào)用this
this.add(3,4)
這就是this的隱性綁定,而this會(huì)以不同的方式被綁定。
var hello = function (){
return "Hello, " + this.name;
};
name = 'this';
console.log(hello());
這時(shí)我們就會(huì)得到Hello,this。而當(dāng)
var hello = function (){
return "Hello, " + this.name;
};
var user = {
hello : hello,
name : 'phodal',
};
console.log(user.hello());
這時(shí)user中的hello便指向了hello函數(shù),而這在我們的理解中,這怎么可能,所以是個(gè)Bug。
如果我們在這個(gè)方法中定義一個(gè)變量并給它賦值this,那么內(nèi)部函數(shù)就可以通過那個(gè)變量訪問到this。
var that = this
于是當(dāng)情況稍微復(fù)雜一點(diǎn)的時(shí)候我們就需要用到:
vat that = this;
tips:
1.this變量的作用域總是由其最近的封閉函數(shù)所確定。
2.使用一個(gè)局部變量(如me,self,that)讓this綁定對于內(nèi)部是可用的。
一個(gè)簡單的例子:
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;
這時(shí)的this指向的是M函數(shù),而由MM自身。如果我們將M中的this去掉,那么返回的就是一個(gè)undefined。 于是我們就創(chuàng)建一個(gè)當(dāng)前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();
};
這樣就能返回一個(gè)MM了。除此之外,在ES5中可以用回調(diào)函數(shù)的bind方法。
var MM = function(){
z = new M();
this.name = "MM";
z.printName = function(){
console.log(this.name);
}.bind(this);
return z.printName();
};
bind可以將方法綁定到接收者。
其他
又一個(gè)hello,world
在一次偶然的機(jī)會(huì)中遇到print('Hello')('World'),然后輸出了'Hello, World'。
所謂的高階函數(shù),看上去似乎很有用,有興趣可以看看下一篇。
相關(guān)文章
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )...2007-03-03javascript中一些數(shù)組常用的API總結(jié)
Js中數(shù)組是一個(gè)重要的數(shù)據(jù)結(jié)構(gòu),它相比于字符串有更多的方法,本篇文章總結(jié)了一些數(shù)組中常用的API,我們把它們分成兩類,一類是會(huì)改變原始數(shù)組,一類是不會(huì)改變原始數(shù)組,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03基于JavaScript實(shí)現(xiàn)線性漸變的高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了高斯模糊算法以及線性漸變的高斯模糊算法的原理,并通過一個(gè)小demo展示了如何實(shí)現(xiàn)y方向上線性漸變的高斯模糊效果,需要的可以了解下2024-01-01基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎(jiǎng)系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01