国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

[翻譯] JavaScript Scoping and Hoisting

FingerLiu / 1998人閱讀

摘要:對(duì)于新手來(lái)說(shuō)是最令人困惑的部分之一。函數(shù)聲明通過(guò)的形式。很明顯的,語(yǔ)言自身定義和函數(shù)形參已經(jīng)處于作用域頂端。這就意味著,函數(shù)聲明比變量聲明具有更高的優(yōu)先級(jí)。但是這卻不意味著對(duì)這個(gè)名稱(chēng)的賦值無(wú)效,僅僅是聲明的部分會(huì)被忽略而已。

原文鏈接:JavaScript Scoping and Hoisting

你知道下面的JavaScript代碼執(zhí)行后會(huì)alert出什么值嗎?

var foo = 1;
function bar() {
    if (!foo) {
      var foo = 10;
    }
    alert(foo);
}
bar();

如果答案是"10"令你感到驚訝的話,那么下面這個(gè)會(huì)讓你更加困惑:

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

瀏覽器會(huì)alert“1”。那么,到底是怎么了?盡管這看起來(lái)有點(diǎn)奇怪、有點(diǎn)危險(xiǎn)又有點(diǎn)令人困惑,但這事實(shí)上卻是這門(mén)語(yǔ)言一個(gè)強(qiáng)力的具有表現(xiàn)力的特性。我不知道是不是有個(gè)標(biāo)準(zhǔn)來(lái)定義這種行為,但是我喜歡用”hoisting”來(lái)描述。這篇文章試著去解釋這種機(jī)制,但是首先,讓我們對(duì)JavaScript的scoping做一些必要的了解。

Scoping in JavaScript

對(duì)于JavaScript新手來(lái)說(shuō)scoping是最令人困惑的部分之一。事實(shí)上,不僅僅是新手,我遇到或很多有經(jīng)驗(yàn)的JavaScript程序員也不能完全理解scoping。JavaScript的scoping如此復(fù)雜的原因是它看上去非常像C系語(yǔ)言的成員。請(qǐng)看下面的C程序:

#include 
int main() {
    int x = 1;
    printf("%d, ", x); // 1
    if (1) {
        int x = 2;
        printf("%d, ", x); // 2
    }
    printf("%d
", x); // 1
}

這段程序的輸出是1,2,1。這是因?yàn)樵贑系語(yǔ)言有塊級(jí)作用域(block-level scope),當(dāng)進(jìn)入到一個(gè)塊時(shí),就像if語(yǔ)句,在這個(gè)塊級(jí)作用域中會(huì)聲明新的變量,這些變量不會(huì)影響到外部作用域。但是JavaScript卻不是這樣。在Firebug中試試下面的代碼:

var x = 1;
console.log(x); // 1
if (true) {
    var x = 2;
    console.log(x); // 2
}
console.log(x);// 2

在這段代碼中,F(xiàn)irebug顯示1,2,2。這是因?yàn)镴avaScript是函數(shù)級(jí)作用域(function-level scope)。這和C系語(yǔ)言是完全不同的。塊,就像if語(yǔ)句,并不會(huì)創(chuàng)建一個(gè)新的作用域。只有函數(shù)才會(huì)創(chuàng)建新的作用域。

對(duì)于大部分熟悉C,C++,C#或是Java的程序員來(lái)說(shuō),這是意料之外并且不被待見(jiàn)的。幸運(yùn)的是,因?yàn)镴avaScript函數(shù)的靈活性,對(duì)于這個(gè)問(wèn)題我們有一個(gè)解決方案。如果你必須在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的作用域,請(qǐng)像下面這樣做:

function foo() {
    var x = 1;
    if (x) {
        (function () {
            var x = 2;
            // some other code
        }());
    }
    // x is still 1.
}

這種方面確實(shí)非常靈活,它使用在任何需要?jiǎng)?chuàng)建一個(gè)臨時(shí)作用域的地方,不僅僅是某個(gè)塊中。但是,我強(qiáng)烈建議你花點(diǎn)時(shí)間好好理解下JavaScript scoping。它實(shí)在是非常強(qiáng)力,而且它也是我最喜歡的語(yǔ)言特性之一。如果你很好的理解了scoping,理解hoisting將會(huì)更加容易。

Declarations, Names, and Hoisting

在JavaScript中,一個(gè)作用域(scope)中的名稱(chēng)(name)有以下四種:

語(yǔ)言自身定義(Language-defined): 所有的作用域默認(rèn)都會(huì)包含this和arguments。

函數(shù)形參(Formal parameters): 函數(shù)有名字的形參會(huì)進(jìn)入到函數(shù)體的作用域中。

函數(shù)聲明(Function decalrations): 通過(guò)function foo() {}的形式。

變量聲明(Variable declarations): 通過(guò)var foo;的形式。

函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。很明顯的,語(yǔ)言自身定義和函數(shù)形參已經(jīng)處于作用域頂端。這就像下面的代碼:

function foo() {
    bar();
    var x = 1;
}

實(shí)際上被解釋成像下面那樣:

function foo() {
    var x;
    bar();
    x = 1;
}

結(jié)果是不管聲明是否被執(zhí)行都沒(méi)有影響。下面的兩段代碼是等價(jià)的:

function foo() {
    if (false) {
        var x = 1;
    }
    return;
    var y = 1;
}
function foo() {
    var x, y;
    if (false) {
        x = 1;
    }
    return;
    y = 1;
}

注意到聲明的賦值部分并沒(méi)有被提升(hoist)。只有聲明的名稱(chēng)被提升了。這和函數(shù)聲明不同,函數(shù)聲明中,整個(gè)函數(shù)體也都會(huì)被提升。但是請(qǐng)記住,聲明一個(gè)函數(shù)一般來(lái)說(shuō)有兩種方式。考慮下面的JavaScript代碼:

function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // 函數(shù)表達(dá)式被賦值給變量"foo"
        alert("this won"t run!");
    }
    function bar() { // 名為"bar"的函數(shù)聲明
        alert("this will run!");
    }
}
test();

在這里,只有函數(shù)聲明的方式會(huì)連函數(shù)體一起提升,而函數(shù)表達(dá)式中只會(huì)提升名稱(chēng),函數(shù)體只有在執(zhí)行到賦值語(yǔ)句時(shí)才會(huì)被賦值。

以上就包括了所有關(guān)于提升(hoisting)的基礎(chǔ),看起來(lái)并沒(méi)有那么復(fù)雜或是令人困惑對(duì)吧。但是,這是JavaScript,在某些特殊情況下,總會(huì)有那么一點(diǎn)復(fù)雜。

Name Resolution Order

需要記住的最最重要的特例就是名稱(chēng)解析順序(name resolution order)。記住一個(gè)名稱(chēng)進(jìn)入一個(gè)作用域一共有四種方式。我上面列出的順序就是他們解析的順序。總的來(lái)說(shuō),如果一個(gè)名稱(chēng)已經(jīng)被定義了,他絕不會(huì)被另一個(gè)擁有不用屬性的同名名稱(chēng)覆蓋。這就意味著,函數(shù)聲明比變量聲明具有更高的優(yōu)先級(jí)。但是這卻不意味著對(duì)這個(gè)名稱(chēng)的賦值無(wú)效,僅僅是聲明的部分會(huì)被忽略而已。但是有下面幾個(gè)例外:

內(nèi)置的名稱(chēng)arguments的行為有些怪異。他似乎是在形參之后,函數(shù)聲明之前被聲明。這就意味著名為arguments的形參會(huì)比內(nèi)置的arguments具有更高的優(yōu)先級(jí),即使這個(gè)形參是undefined。這是一個(gè)不好的特性,不要使用arguments作為形參。
任何地方試圖使用this作為一個(gè)標(biāo)識(shí)都會(huì)引起語(yǔ)法錯(cuò)誤,這是一個(gè)好的特性。
如果有多個(gè)同名形參,那位于列表最后的形參擁有最高的優(yōu)先級(jí),即使它是undefined。

Name Function Expressions

你可以在函數(shù)表達(dá)式中給函數(shù)定義名稱(chēng),就像函數(shù)聲明的語(yǔ)句一樣。但這并不會(huì)使它成為一個(gè)函數(shù)聲明,并且這個(gè)名稱(chēng)也不會(huì)被引入到作用域中,而且,函數(shù)體也不會(huì)被提升(hoist)。這里有一些代碼可以說(shuō)明我說(shuō)的是什么意思:

foo(); // TypeError "foo is not a function"
bar(); // valid
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"

var foo = function () {}; // 匿名函數(shù)表達(dá)式("foo"被提升)
function bar() {}; // 函數(shù)聲明("bar"和函數(shù)體被提升)
var baz = function spam() {}; // 命名函數(shù)表達(dá)式(只有"baz"被提升)

foo(); // valid
bar(); // valid
baz(); // valid
spam(); // ReferenceError "spam is not defined"
How to Code With This Knowledge

現(xiàn)在你明白了作用域和提升,那么這對(duì)編寫(xiě)JavaScript代碼意味著什么呢?最重要的一條是聲明變量時(shí)總是使用var語(yǔ)句。我強(qiáng)烈的建議你在每個(gè)作用域中都只在最頂端使用一個(gè)var。如果你強(qiáng)制自己這么做,你永遠(yuǎn)也不會(huì)被提升相關(guān)的問(wèn)題困擾。盡管這么做會(huì)使的跟蹤當(dāng)前作用域?qū)嶋H聲明了哪些變量變得更加困難。我建議在JSLint使用onevar選項(xiàng)。如果你做了所有前面的建議,你的代碼看起來(lái)會(huì)是下面這樣:

/*jslint onevar: true [...] */
function foo(a, b, c) {
    var x = 1,
        bar,
        baz = "something";
}
What the Standard Says

我發(fā)現(xiàn)直接參考ECMAScript Standard (pdf)來(lái)理解這些東西是如何運(yùn)作的總是很有用。下面是關(guān)于變量聲明和作用域的一段摘錄(section 12.2.2):

If the variable statement occurs inside a FunctionDeclaration, the variables are defined with function-local scope in that function, as described in section 10.1.3. Otherwise, they are defined with global scope (that is, they are created as members of the global object, as described in section 10.1.3) using property attributes { DontDelete }. Variables are created when the execution scope is entered. A Block does not define a new execution scope. Only Program and FunctionDeclaration produce a new scope. Variables are initialised to undefined when created. A variable with an Initialiser is assigned the value of its AssignmentExpression when the VariableStatement is executed, not when the variable is created.

我希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫(xiě)的全面,以免引起更多的困惑。如果我寫(xiě)錯(cuò)了或是漏掉了某些重要的東西,請(qǐng)一定讓我知道。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/78533.html

相關(guān)文章

  • 理解 JavaScript(二)

    摘要:所以形式參數(shù)是本地的,不是外部的或者全局的。這叫做函數(shù)聲明,函數(shù)聲明會(huì)連通命名和函數(shù)體一起被提升至作用域頂部。這叫做函數(shù)表達(dá)式,函數(shù)表達(dá)式只有命名會(huì)被提升,定義的函數(shù)體則不會(huì)。 Scoping & Hoisting var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; ...

    luxixing 評(píng)論0 收藏0
  • JS基礎(chǔ)篇--函數(shù)聲明與定義,作用域,函數(shù)聲明與表達(dá)式的區(qū)別

    摘要:在中,有四種方式可以讓命名進(jìn)入到作用域中按優(yōu)先級(jí)語(yǔ)言定義的命名比如或者,它們?cè)谒凶饔糜騼?nèi)都有效且優(yōu)先級(jí)最高,所以在任何地方你都不能把變量命名為之類(lèi)的,這樣是沒(méi)有意義的形式參數(shù)函數(shù)定義時(shí)聲明的形式參數(shù)會(huì)作為變量被至該函數(shù)的作用域內(nèi)。 Scoping & Hoisting 例: var a = 1; function foo() { if (!a) { var ...

    TerryCai 評(píng)論0 收藏0
  • javascript 聲明前置與作用域 ( hoisting& Scoping

    摘要:特別注意的是不用聲明的變量那么他歸所有也就是全局作用域所有。如果到達(dá)全局作用域但是這個(gè)變量仍未找到,則會(huì)拋出異常。語(yǔ)句結(jié)束后,作用域鏈恢復(fù)正常。 1.javascript不管是變量(or 叫變量表達(dá)式?或者變量的聲明與賦值吧 var scope=loacal)的聲明還是函數(shù)(or 函數(shù)表達(dá)式)的聲明,都遵循命名在當(dāng)前作用域前置(提升到當(dāng)前命名空間頂端)函數(shù)體保留在原地。 var sco...

    mmy123456 評(píng)論0 收藏0
  • JavaScript中的變量提升、作用域

    摘要:即的變量提升此處變量未聲明時(shí)便可以使用,其實(shí)是因?yàn)闀?huì)自動(dòng)將聲明語(yǔ)句提升到頂部。但名字的初始化卻是按其在代碼中書(shū)寫(xiě)的順序進(jìn)行的,不受以上優(yōu)先級(jí)的影響。 變量提升(hoisting) 在JavaScript中,函數(shù)、變量的聲明都會(huì)被提升(hoisting)到該函數(shù)或變量所在的scope的頂部。即——JavaScript的變量提升. var x = 5; alert(x); ...

    wwq0327 評(píng)論0 收藏0
  • JavaScript 變量聲明提升

    摘要:輸出的結(jié)果為輸出的結(jié)果為提升后輸出的結(jié)果為重新定義了變量輸出的結(jié)果為如果定義了相同的函數(shù)變量聲明,后定義的聲明會(huì)覆蓋掉先前的聲明,看如下代碼輸出練習(xí)的值是多少的值是多少第二題的解析請(qǐng)看這里參考資料文章文章中文版鏈接文章推薦文章變量提升 JavaScript 變量聲明提升 原文鏈接 一個(gè)小例子 先來(lái)看個(gè)例子: console.log(a); // undefined var a =...

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

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

0條評(píng)論

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