成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript:萬惡的this拿命來（一）

loostudy / 2408人閱讀

摘要：在腳本中，默認(rèn)指向一個(gè)空對(duì)象，并不是指向，也不是指向。舉個(gè)栗子，在函數(shù)執(zhí)行后，覆蓋原先的值我們?cè)谕獠慷x了一個(gè)名為的全局變量，它會(huì)被默認(rèn)添加到全局的屬性上?？偨Y(jié)在不同的執(zhí)行環(huán)境中的默認(rèn)指代通過省略聲明變量導(dǎo)致變量提升現(xiàn)象的發(fā)生及預(yù)防

侃侃JavaScript中的this 
  
this為何如此多變？


this總是跟它的執(zhí)行上下文有關(guān)，而在JavaScript總會(huì)有開辟新的執(zhí)行上下文的東西，比如函數(shù)，所以，this才如此的變化。

  
執(zhí)行環(huán)境對(duì)JavaScript中的this有影響嗎？


JavaScript是一門解釋型語(yǔ)言，需要有一個(gè)執(zhí)行環(huán)境去執(zhí)行它，通常的執(zhí)行環(huán)境是瀏覽器，還有node腳本，還有`REPL`(“讀取-求值-輸出”循環(huán)（Read-Eval-Print Loop，簡(jiǎn)稱REPL）)。

如果對(duì)REPL有興趣的話，博客中的另一篇文章介紹了`REPL`

  
this默認(rèn)指代誰(shuí)？


在不同的執(zhí)行環(huán)境中，會(huì)指代不同的對(duì)象

瀏覽器中：

> this              // Window {top: Window, window: Window,...
> this === window   //true

> var a = 1;        //在全局中，用var聲明變量，會(huì)默認(rèn)給window添加
> this.a   // 1
> window.a // 1
> b = 1;            //不使用var聲明變量，會(huì)默認(rèn)給全局的this添加屬性
> this.b   // 1
> window.b // 1

在node腳本中

console.log(this);              //{}
console.log(this === global);   //false
console.log(this === window);   //ReferenceError: window is not defined

var a = 1;         //在全局中，使用var聲明變量，未給global添加屬性

console.log(this.a);            //undefined
console.log(global.a);          //undefined
console.log(window.a);          //ReferenceError: window is not defined

b = 1;            //不使用var聲明變量，會(huì)默認(rèn)給全局的global添加屬性。

console.log(this.b);            //undefined
console.log(global.b);          // 1   

在node腳本中，this默認(rèn)指向一個(gè)空對(duì)象，并不是指向global，也不是指向window。

在REPL中

> this
{ DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  ...
> global === this  //true

> var a = 1;       //在全局中，使用var聲明變量，會(huì)默認(rèn)給全局的global添加屬性
> this.a           // 1
> global.a         // 1

> b = 1;           //不使用var聲明變量，會(huì)默認(rèn)給全局的this添加屬性
> this.b           // 1 
> global.b         // 1
實(shí)例擴(kuò)展 
  
我們對(duì)于省略var的變量聲明方式，我們總說它是不安全的，但是是合法的。

為什么不安全？

如上文所述：不使用var聲明變量，會(huì)讓變量默認(rèn)的添加到了全局的this中，這有時(shí)候會(huì)莫名的給變量提升它的作用域，從而影響其他全局變量。

舉個(gè)栗子：

var position = "outer";           //this.position = "outer"

function test(){
    position = "inner";           //this.position = "inner"，在函數(shù)執(zhí)行后，覆蓋原先的值
    console.log(this.position);
}

test();

我們?cè)谕獠慷x了一個(gè)名為position的全局變量，它會(huì)被默認(rèn)添加到全局this的屬性上。

然后在我們的test函數(shù)中，又定義了一個(gè)同名的變量，但是注意，函數(shù)中的變量聲明沒有用var。

因?yàn)槲覀儾]有對(duì)函數(shù)實(shí)例化，所以this.position的this會(huì)默認(rèn)指代全局。

而當(dāng)我們調(diào)用函數(shù)test時(shí)，函數(shù)會(huì)生成一個(gè)執(zhí)行上下文，而內(nèi)部position會(huì)將作用域從函數(shù)內(nèi)部提升到全局，從而覆蓋（污染）了外部全局定義的position變量。

所以，在JavaScript的嚴(yán)格模式中，是不允許省略var來聲明變量的。故在聲明變量的時(shí)候，就順手加上var吧。

總結(jié)

this在不同的執(zhí)行環(huán)境中的默認(rèn)指代

通過省略var聲明變量導(dǎo)致“變量提升”現(xiàn)象的發(fā)生及預(yù)防

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91498.html

相關(guān)文章

  • JavaScript:萬惡的this拿命來（二）

    摘要：構(gòu)造函數(shù)對(duì)于被實(shí)例化的，我們稱之為構(gòu)造函數(shù)，及使用關(guān)鍵字調(diào)用的，對(duì)于它們來說，會(huì)被改變，指向?qū)嵗Ｉ侠踝尤仲x上屬性通過關(guān)鍵字創(chuàng)建實(shí)例，改變函數(shù)內(nèi)部指向注解通過這個(gè)栗子，我們可以看出，通過創(chuàng)建構(gòu)造函數(shù)的實(shí)例，使得的指向改變，指向了實(shí)例本身。 用栗子說this Bug年年有，今年特別多 對(duì)于JavaScript這么靈活的語(yǔ)言來說，少了this怎么活！ function ...

    fox_soyoung 評(píng)論0 收藏0

  • JavaScript:萬惡的 this 拿命來（三）

    摘要：閉包執(zhí)行上下文決定了變量作用域而閉包，它其實(shí)是一種決策，是一種模式，讓我們可以靈活的改變變量作用域。所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。只要咱們弄明白閉包，其中的自然跑不掉。 閉包 this 執(zhí)行上下文決定了變量作用域 而閉包，它其實(shí)是一種決策，是一種模式，讓我們可以靈活的改變變量作用域。 按慣例，上栗子 var global = glo...

    Cympros 評(píng)論0 收藏0

  • 異步流程控制：7 行代碼學(xué)會(huì) co 模塊

    摘要：而在中是迭代器生成器，被創(chuàng)造性的拿來做異步流程控制了。當(dāng)執(zhí)行的時(shí)候，并不執(zhí)行函數(shù)體，而是返回一個(gè)迭代器。行代碼再看看文章開頭的行代碼首先生成一個(gè)迭代器，然后執(zhí)行一遍，得到的是一個(gè)對(duì)象，里面再執(zhí)行。 廣告招人：阿里巴巴招前端，在這里你可以享受大公司的福利和技術(shù)體系，也有小團(tuán)隊(duì)的挑戰(zhàn)和成長(zhǎng)空間。聯(lián)系： qingguang.meiqg at alibaba-inc.com 首先請(qǐng)?jiān)徫业臉?biāo)題...

    tinna 評(píng)論0 收藏0

  • 不用 Spring Security 可否？試試這個(gè)小而美的安全框架

    摘要：寫在前面在一款應(yīng)用的整個(gè)生命周期，我們都會(huì)談及該應(yīng)用的數(shù)據(jù)安全問題。用戶的合法性與數(shù)據(jù)的可見性是數(shù)據(jù)安全中非常重要的一部分。 寫在前面 在一款應(yīng)用的整個(gè)生命周期，我們都會(huì)談及該應(yīng)用的數(shù)據(jù)安全問題。用戶的合法性與數(shù)據(jù)的可見性是數(shù)據(jù)安全中非常重要的一部分。但是，一方面，不同的應(yīng)用對(duì)于數(shù)據(jù)的合法性和可見性要求的維度與粒度都有所區(qū)別；另一方面，以當(dāng)前微服務(wù)、多服務(wù)的架構(gòu)方式，如何共享Sessi...

    toddmark 評(píng)論0 收藏0

  • JavaScript面試系列：JavaScript設(shè)計(jì)模式之橋接模式和懶加載

    摘要：橋接模式的核心在于將抽象部分和它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立的變化?？雌饋磉@個(gè)版本已經(jīng)很完美了不，它仍然有可以優(yōu)化的空間，即題目提到的橋接模式。使用橋接模式的實(shí)現(xiàn)版本這個(gè)實(shí)現(xiàn)包含了三個(gè)函數(shù)。這個(gè)例子體現(xiàn)了橋接模式的作用。 我寫的程序員面試系列文章 Java面試系列-webapp文件夾和WebContent文件夾的區(qū)別？ 程序員面試系列：Spring MVC能響應(yīng)HTTP請(qǐng)求的原因？...

    tracymac7 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<