資訊專(zhuān)欄INFORMATION COLUMN
摘要：不過(guò)匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其對(duì)象通常指向。在閉包中使用對(duì)象可能會(huì)導(dǎo)致一些問(wèn)題。這個(gè)對(duì)象還包含一個(gè)方法它返回一個(gè)匿名函數(shù)，而匿名函數(shù)又返回，這個(gè)匿名函數(shù)就是閉包。偽代碼過(guò)程在定義匿名函數(shù)之前，把對(duì)象賦值給了一個(gè)名叫的變量。
this對(duì)象
前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書(shū)中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScript高級(jí)程序設(shè)計(jì)第三版》。
this對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定：
在全局環(huán)境中， this等于window，而當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就指向了那個(gè)對(duì)象。
不過(guò)匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其this對(duì)象通常指向window。
在閉包中使用this對(duì)象可能會(huì)導(dǎo)致一些問(wèn)題。
有時(shí)候由于編寫(xiě)閉包的方式不同，這一點(diǎn)可能不會(huì)那么明顯。
// 在全局環(huán)境中，this等于window
function thisBoundForWindow(){
console.log(this);
console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就指向了那個(gè)對(duì)象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;
//在閉包中使用this對(duì)象可能會(huì)導(dǎo)致一些問(wèn)題。
//有時(shí)候由于編寫(xiě)閉包的方式不同，這一點(diǎn)可能不會(huì)那么明顯。
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
return function() {
console.log(this.name);
}
}
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
return function() {
console.log(this.name);
}
} => ()調(diào)用，還是在全局環(huán)境下調(diào)用的，所以this.name = window.name => "The Window"
*/
以上代碼先創(chuàng)建了一個(gè)全局變量name，又創(chuàng)建了一個(gè)包含name屬性的對(duì)象。
這個(gè)對(duì)象還包含一個(gè)方法——getNameFunc(), 它返回一個(gè)匿名函數(shù)，而匿名函數(shù)又返回this.name，這個(gè)匿名函數(shù)就是閉包。
再來(lái)回顧一下“閉包”的定義：
有權(quán)訪(fǎng)問(wèn)另外一個(gè)作用域中的變量的函數(shù)就是閉包。
由于getNameFunc()返回一個(gè)函數(shù)，因此調(diào)用object.getNameFunc()()就會(huì)調(diào)用它返回的函數(shù)，結(jié)果就是控制臺(tái)打印出一個(gè)字符竄。
然而，這個(gè)例子返回的字符竄是"The Window"，即全局name變量的值。
那么，如何把this指向例子中的object呢？
把外部作用域的this對(duì)象保存在一個(gè)閉包能夠訪(fǎng)問(wèn)到的變量里，就可以讓閉包訪(fǎng)問(wèn)該對(duì)象了。（注意，這種手法，在使用回調(diào)函數(shù)的時(shí)候也經(jīng)常用到）。
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function() {
console.log(that.name);
}
}
}
object.getNameFunc()(); // "My Object"
/*
// 偽代碼過(guò)程
object.getNameFunc execute
=> this = object = that
=>function() {console.log(that.name);}
=> ()
=> that.name = object.name
=> "My Object"
*/
在定義匿名函數(shù)之前，把this對(duì)象賦值給了一個(gè)名叫that的變量。
而在定義了閉包之后，閉包也可以訪(fǎng)問(wèn)這個(gè)變量，因?yàn)樗俏覀冊(cè)诎瘮?shù)中特意聲明的一個(gè)變量。
即使在函數(shù)返回之后，that也仍然引用著object， 所以調(diào)用Object.getNameFunc()就返回了"My Object"。
在幾種特殊情況下，this的值可能會(huì)意外地改變。比如，下面的代碼時(shí)修改前面例子的結(jié)果。
var name = "The Window";
var object = {
name: "My Object",
getName: function() {
console.log(this.name);
}
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"
第一行代碼跟平常一樣調(diào)用了object.getName()，返回時(shí)"My Object"，因?yàn)閠his.name就是object.name。
第二行代碼在調(diào)用這個(gè)方法前給它加上了括號(hào)，雖然加上括號(hào)之后，就好像是在引用一個(gè)函數(shù)，但this的值得到了維持，因?yàn)閛bject.getName和(object.getName)的定義是相同的。
第三行代碼先執(zhí)行了一條賦值語(yǔ)句，然后再調(diào)用賦值后的結(jié)果。因?yàn)檫@個(gè)賦值表達(dá)式是函數(shù)本身，所以this的值得不到維持，結(jié)果就返回了"The Window"。
//第三個(gè)例子偽代碼
//理解此段代碼，首先要明確一個(gè)知識(shí)點(diǎn)：賦值語(yǔ)句是有返回值的，返回值就是所賦的值（也就是‘=’右邊的值）。
(object.getName = object.getName)(); // "The Window"
(object.getName = function(){ console.log(this.name)})();
(function(){console.log(this.name)})();
//所以this指向window
當(dāng)然，我們不太可能會(huì)像第二行和第三行代碼一樣調(diào)用這個(gè)方法。暫時(shí)理解不了也沒(méi)事，這個(gè)例子有助于說(shuō)明即使是語(yǔ)法的細(xì)微變化，都有可能意外地改變this值。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98774.html
摘要：另外，的綁定和函數(shù)聲明的位置沒(méi)有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。請(qǐng)看下面代碼這樣，我們就可以在調(diào)用的時(shí)候強(qiáng)制把它的綁定到上綁定在傳統(tǒng)的面向類(lèi)語(yǔ)言中，使用初始化類(lèi)時(shí)會(huì)調(diào)用類(lèi)中的構(gòu)造函數(shù)。 關(guān)于this 上一章我們講了關(guān)于作用域和閉包的相關(guān)知識(shí)，現(xiàn)在開(kāi)始新一輪的學(xué)習(xí)，那就是JavaScript中最復(fù)雜的機(jī)制之一---this關(guān)鍵字。它是一個(gè)很特別的關(guān)鍵字，被自動(dòng)定義在所有函數(shù)的作用域中。...
摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類(lèi)繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法，包括，，。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?，因此文中只看懂?8 成左右，希望能夠給大家?guī)?lái)幫助....（據(jù)說(shuō)是阿里的前端妹子寫(xiě)的） this 的值到底...
摘要：模擬實(shí)現(xiàn)操作符構(gòu)造函數(shù)返回結(jié)果創(chuàng)建一個(gè)空對(duì)象取傳入的第一個(gè)參數(shù)，即構(gòu)造函數(shù)，并刪除第一個(gè)參數(shù)。二處理返回值構(gòu)造函數(shù)也是函數(shù)，有不同類(lèi)型返回值。有時(shí)候構(gòu)造函數(shù)會(huì)返回指定的對(duì)象內(nèi)容，所以要對(duì)這部分進(jìn)行處理。 本文共 1230 字，讀完只需 5 分鐘 寫(xiě)在前面 最近工作太忙，快接近兩周沒(méi)更新博客，總感覺(jué)有一些事情等著自己去做，雖然工作內(nèi)容對(duì)自己提升挺大，但我總覺(jué)得，一直埋著頭走路，偶爾也...
摘要：之前總結(jié)了的一些常見(jiàn)綁定情況前端工程師手冊(cè)之的筆記，但是還有一些沒(méi)有說(shuō)到，今天繼續(xù)學(xué)習(xí)一下。參考資料箭頭函數(shù)你不知道的上卷 之前總結(jié)了this的一些常見(jiàn)綁定情況（【前端工程師手冊(cè)】JavaScript之this的筆記），但是還有一些沒(méi)有說(shuō)到，今天繼續(xù)學(xué)習(xí)一下。 es6箭頭函數(shù) 先說(shuō)結(jié)論：箭頭函數(shù)沒(méi)有自己的this，它是根據(jù)外層(函數(shù)或者全局，后面會(huì)說(shuō)到箭頭函數(shù)作為某個(gè)對(duì)象的方法時(shí)的情況...
摘要：第四點(diǎn)也要著重講下，記住構(gòu)造函數(shù)被操作，要讓正常作用最好不能在構(gòu)造函數(shù)里 4) this、new、call和apply的相關(guān)問(wèn)題 講解this指針的原理是個(gè)很復(fù)雜的問(wèn)題，如果我們從javascript里this的實(shí)現(xiàn)機(jī)制來(lái)說(shuō)明this，很多朋友可能會(huì)越來(lái)越糊涂，因此本篇打算換一個(gè)思路從應(yīng)用的角度來(lái)講解this指針，從這個(gè)角度理解this指針更加有現(xiàn)實(shí)意義。 下面我們看看在ja...
閱讀 3823·2023-04-25 19:07
閱讀 3571·2021-11-22 12:02
閱讀 3147·2021-10-12 10:11
閱讀 3935·2021-09-03 10:49
閱讀 2899·2019-08-30 13:21
閱讀 3012·2019-08-30 11:14
閱讀 2096·2019-08-29 15:40
閱讀 2882·2019-08-28 18:29
