首頁  >  文章  >  web前端  >  JavaScript探針var預解析與副作用

JavaScript探針var預解析與副作用

高洛峰
高洛峰原創
2016-11-28 14:39:081033瀏覽

var的副作用

隱式全域變數和明確定義的全域變數間有些小的差異,就是透過delete操作符讓變數未定義的能力。

透過var建立的全域變數(任何函數以外的程式中建立)是不能被刪除的。

無var所建立的隱式全域變數(無視是否在函數中建立)是能被刪除的。

這表明,在技術上,隱式全域變數並不是真正的全域變量,但它們是全域物件的屬性。屬性是可以透過delete運算子刪除的,而變數是不能的:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;       // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());
 
// 试图删除
delete global_var;      // false
delete global_novar;    // true
delete global_fromfunc; // true
 
// 测试该删除
typeof global_var;      // "number"
typeof global_novar;    // "undefined"
typeof global_fromfunc; // "undefined"

在ES5嚴格模式下,未聲明的變數(如在前面的程式碼片段中的兩個反面教材)工作時會拋出一個錯誤。

單var形式

在函數頂部使用單var語句是比較有用的一種形式,其好處在於:

提供了一個單一的地方去尋找功能所需的所有局部變數

防止變數在定義之前使用的邏輯錯誤

幫助你記住聲明的全局變量,因此較少了全局變量//zxx:此處我自己是有點暈乎的…

少代碼(類型啊傳值啊單線完成)

單var形式長得就像下面這個樣子:

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {},
       i,
       j;
   // function body...
}

您可以使用一個var語句聲明多個變量,並以逗號分隔。像這種初始化變數同時初始化值的做法是很好的。這樣子可以防止邏輯錯誤(所有未初始化但宣告的變數的初始值是undefined)和增加程式碼的可讀性。在你看到程式碼後,你可以根據初始化的值知道這些變數大致的用途,例如是要當作物件呢還是當作整數來使。

你也可以在聲明的時候做一些實際的工作,例如前面程式碼中的sum = a + b這個情況,另外一個例子就是當你使用DOM(文檔物件模型)引用時,你可以使用單一的var把DOM引用一起指定為局部變量,就如下面程式碼所示的:

function updateElement() {
   var el = document.getElementById("result"),
       style = el.style;
   // 使用el和style干点其他什么事...
}

vars變量預解析

JavaScript中,你可以在函數的任何位置聲明多個var語句,並且它們就好像是在函數頂部宣告一樣發揮作用,這種行為稱為hoisting(懸置/置頂解析/預解析)。當你使用了一個變量,然後不久在函數中重新聲明的話,就可能產生邏輯錯誤。對於JavaScript,只要你的變數是在同一個作用域中(同一函數),它都被當作是宣告的,即使是它在var宣告前使用的時候。看下面這個例子:

// 反例
myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();

在這個例子中,你可能會以為第一個alert彈出的是”global”,第二個彈出”loacl”。這種期許是可以理解的,因為在第一個alert 的時候,myname未聲明,此時函數肯定很自然而然地看全域變數myname,但是,實際上並不是這樣運作的。第一個alert會彈 出」undefined」是因為myname被當做了函數的局部變數(儘管是之後宣告的),所有的變數宣告當被懸置到函數的頂部了。因此,為了避免這種混亂,最好是預先聲明你想使用的全部變數。

上面的程式碼片段執行的行為可能就像下面這樣:

myname = "global"; // global variable
function func() {
   var myname; // 等同于 -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"}
func();

為了完整,我們再提一提執行層面的稍微複雜點的東西。程式碼處理分為兩個階段,第一階段是變量,函數聲明,以及正常格式的參數創建,這是解析和進入上下文 的階段。第二個階段是程式碼執行,函數表達式和不合格的標識符(為聲明的變數)被創建。但是,出於實用的目的,我們就採用了”hoisting”這個概念, 這種ECMAScript標準中並未定義,通常用來描述行為。

存取全域物件

在瀏覽器中,全域物件可以透過window屬性在程式碼的任何位置存取(除非你做了些比較出格的事情,像是聲明了一個名為window的局部變數)。但是在其他環境下,這個方便的屬性可能被叫做其他什麼東西(甚至在程式中不可用)。如果你需要在沒有硬編碼的window標識符下存取全域對象,你可以在任何層級的函數作用域中做以下操作:

var global = (function () {
   return this;
}());

这种方法可以随时获得全局对象,因为其在函数中被当做函数调用了(不是通过new构造),this总是指向全局对象。实际上这个病不适用于ECMAScript 5严格模式,所以,在严格模式下时,你必须采取不同的形式。例如,你正在开发一个JavaScript库,你可以将你的代码包裹在一个即时函数中,然后从全局作用域中,传递一个引用指向this作为你即时函数的参数。


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn