JavaScript變量作用域_動力節(jié)點(diǎn)Java學(xué)院整理
在JavaScript中,用var
申明的變量實(shí)際上是有作用域的。
如果一個變量在函數(shù)體內(nèi)部申明,則該變量的作用域?yàn)檎麄€函數(shù)體,在函數(shù)體外不可引用該變量:
'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 無法在函數(shù)體外引用變量x
如果兩個不同的函數(shù)各自申明了同一個變量,那么該變量只在各自的函數(shù)體內(nèi)起作用。換句話說,不同函數(shù)內(nèi)部的同名變量互相獨(dú)立,互不影響:
'use strict'; function foo() { var x = 1; x = x + 1; } function bar() { var x = 'A'; x = x + 'B'; }
由于JavaScript的函數(shù)可以嵌套,此時(shí),內(nèi)部函數(shù)可以訪問外部函數(shù)定義的變量,反過來則不行:
'use strict'; function foo() { var x = 1; function bar() { var y = x + 1; // bar可以訪問foo的變量x! } var z = y + 1; // ReferenceError! foo不可以訪問bar的變量y! }
如果內(nèi)部函數(shù)和外部函數(shù)的變量名重名怎么辦?
'use strict'; function foo() { var x = 1; function bar() { var x = 'A'; alert('x in bar() = ' + x); // 'A' } alert('x in foo() = ' + x); // 1 bar(); }
這說明JavaScript的函數(shù)在查找變量時(shí)從自身函數(shù)定義開始,從“內(nèi)”向“外”查找。如果內(nèi)部函數(shù)定義了與外部函數(shù)重名的變量,則內(nèi)部函數(shù)的變量將“屏蔽”外部函數(shù)的變量。
變量提升
JavaScript的函數(shù)定義有個特點(diǎn),它會先掃描整個函數(shù)體的語句,把所有申明的變量“提升”到函數(shù)頂部:
'use strict'; function foo() { var x = 'Hello, ' + y; alert(x); var y = 'Bob'; } foo();
雖然是strict模式,但語句var x = 'Hello, ' + y;
并不報(bào)錯,原因是變量y
在稍后申明了。但是alert
顯示Hello, undefined
,說明變量y
的值為undefined
。這正是因?yàn)镴avaScript引擎自動提升了變量y
的聲明,但不會提升變量y
的賦值。
對于上述foo()
函數(shù),JavaScript引擎看到的代碼相當(dāng)于:
function foo() { var y; // 提升變量y的申明 var x = 'Hello, ' + y; alert(x); y = 'Bob'; }
由于JavaScript的這一怪異的“特性”,我們在函數(shù)內(nèi)部定義變量時(shí),請嚴(yán)格遵守“在函數(shù)內(nèi)部首先申明所有變量”這一規(guī)則。最常見的做法是用一個var
申明函數(shù)內(nèi)部用到的所有變量:
function foo() { var x = 1, // x初始化為1 y = x + 1, // y初始化為2 z, i; // z和i為undefined // 其他語句: for (i=0; i<100; i++) { ... } }
全局作用域
不在任何函數(shù)內(nèi)定義的變量就具有全局作用域。實(shí)際上,JavaScript默認(rèn)有一個全局對象window
,全局作用域的變量實(shí)際上被綁定到window
的一個屬性:
'use strict'; var course = 'Learn JavaScript'; alert(course); // 'Learn JavaScript' alert(window.course); // 'Learn JavaScript'
因此,直接訪問全局變量course
和訪問window.course
是完全一樣的。
你可能猜到了,由于函數(shù)定義有兩種方式,以變量方式var foo = function () {}
定義的函數(shù)實(shí)際上也是一個全局變量,因此,頂層函數(shù)的定義也被視為一個全局變量,并綁定到window
對象:
'use strict'; function foo() { alert('foo'); } foo(); // 直接調(diào)用foo() window.foo(); // 通過window.foo()調(diào)用
進(jìn)一步大膽地猜測,我們每次直接調(diào)用的alert()函數(shù)其實(shí)也是window的一個變量:
'use strict'; window.alert('調(diào)用window.alert()'); // 把a(bǔ)lert保存到另一個變量: var old_alert = window.alert; // 給alert賦一個新函數(shù): window.alert = function () {} // 恢復(fù)alert: window.alert = old_alert; alert('又可以用alert()了!');
這說明JavaScript實(shí)際上只有一個全局作用域。任何變量(函數(shù)也視為變量),如果沒有在當(dāng)前函數(shù)作用域中找到,就會繼續(xù)往上查找,最后如果在全局作用域中也沒有找到,則報(bào)ReferenceError錯誤。
名字空間
全局變量會綁定到window
上,不同的JavaScript文件如果使用了相同的全局變量,或者定義了相同名字的頂層函數(shù),都會造成命名沖突,并且很難被發(fā)現(xiàn)。
減少沖突的一個方法是把自己的所有變量和函數(shù)全部綁定到一個全局變量中。例如:
// 唯一的全局變量MYAPP: var MYAPP = {}; // 其他變量: MYAPP.name = 'myapp'; MYAPP.version = 1.0; // 其他函數(shù): MYAPP.foo = function () { return 'foo'; };
把自己的代碼全部放入唯一的名字空間MYAPP
中,會大大減少全局變量沖突的可能。
許多著名的JavaScript庫都是這么干的:jQuery,YUI,underscore等等。
局部作用域
由于JavaScript的變量作用域?qū)嶋H上是函數(shù)內(nèi)部,我們在for
循環(huán)等語句塊中是無法定義具有局部作用域的變量的:
'use strict'; function foo() { for (var i=0; i<100; i++) { // } i += 100; // 仍然可以引用變量i }
為了解決塊級作用域,ES6引入了新的關(guān)鍵字let,用let替代var可以申明一個塊級作用域的變量:
'use strict'; function foo() { var sum = 0; for (let i=0; i<100; i++) { sum += i; } i += 1; // SyntaxError }
常量
由于var
和let
申明的是變量,如果要申明一個常量,在ES6之前是不行的,我們通常用全部大寫的變量來表示“這是一個常量,不要修改它的值”:
var PI = 3.14;
ES6標(biāo)準(zhǔn)引入了新的關(guān)鍵字const來定義常量,const與let都具有塊級作用域:
'use strict'; const PI = 3.14; PI = 3; // 某些瀏覽器不報(bào)錯,但是無效果! PI; // 3.14
相關(guān)文章
js判斷當(dāng)頁面無法回退時(shí)關(guān)閉網(wǎng)頁否則就history.go(-1)
當(dāng)頁面沒有前驅(qū)歷史記錄時(shí),點(diǎn)擊返回按鈕時(shí)直接關(guān)閉頁面,否則就退回到前一頁2014-08-08javascript制作坦克大戰(zhàn)全紀(jì)錄(1)
本文寫作的目的是鞏固一下自己最近學(xué)習(xí)的js知識, 這個教程適合熟悉js基本語法和面向?qū)ο笳Z法的小伙伴學(xué)習(xí)。由于自己也是剛學(xué)js不久,所以難免出現(xiàn)錯誤。如果發(fā)現(xiàn)希望給予指正。2014-11-11javascript 實(shí)現(xiàn)的完全兼容鼠標(biāo)滾軸縮放圖片的代碼
以前看到的都是用IE的zoom,所以非IE就不支持,昨天看到這個js中鼠標(biāo)滾輪事件詳解 ,于是完全兼容(IE6-8,FF,Chrome,Opera,Safari)的鼠標(biāo)滾軸縮放圖片效果今天就誕生了2010-02-02跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說明
昨天去 大牛 司徒正美 的blog 看博文 突然看到 關(guān)于 onmouseenter 和onmouseleave 兩個ie專有事件..2010-05-05nuxtjs通過ecosystem.config.js配置pm2的方法
ecosystem.config.js 是一個特殊的配置文件,它允許您定義應(yīng)用的各種屬性,如腳本路徑、環(huán)境變量、日志設(shè)置等,這篇文章主要介紹了nuxtjs通過ecosystem.config.js配置pm2的方法,需要的朋友可以參考下2024-03-03javascript實(shí)現(xiàn)全角半角檢測的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角半角檢測的方法,涉及javascript針對字符遍歷與檢測的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07