變量作用域與解構(gòu)賦值


變量提升

JavaScript的函數(shù)定義有個特點金矛,它會先掃描整個函數(shù)體的語句腐泻,把所有申明的變量“提升”到函數(shù)頂部:

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
}

foo();

雖然是strict模式桐经,但語句var x = 'Hello, ' + y;并不報錯拓哟,原因是變量y在稍后申明了几缭。但是alert顯示Hello, undefined河泳,說明變量y的值為undefined。這正是因為JavaScript引擎自動提升了變量y的聲明年栓,但不會提升變量y的賦值拆挥。

對于上述foo()函數(shù),JavaScript引擎看到的代碼相當(dāng)于:

function foo() {
    var y; // 提升變量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

由于JavaScript的這一怪異的“特性”某抓,我們在函數(shù)內(nèi)部定義變量時纸兔,請嚴(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)定義的變量就具有全局作用域否副。實際上汉矿,JavaScript默認(rèn)有一個全局對象window,全局作用域的變量實際上被綁定到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ù)的定義也被視為一個全局變量队腐,并綁定到window對象:

'use strict';

function foo() {
    alert('foo');
}

foo(); // 直接調(diào)用foo()
window.foo(); // 通過window.foo()調(diào)用

名字空間

全局變量會綁定到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; // 某些瀏覽器不報錯,但是無效果晤揣!
PI; // 3.14

解構(gòu)賦值

什么是解構(gòu)賦值桥爽?我們先看看傳統(tǒng)的做法,如何把一個數(shù)組的元素分別賦值給幾個變量:

var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];

現(xiàn)在昧识,在ES6中钠四,可以使用解構(gòu)賦值,直接對多個變量同時賦值:

'use strict';

// 如果瀏覽器支持解構(gòu)賦值就不會報錯:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

注意滞诺,對數(shù)組元素進(jìn)行解構(gòu)賦值時形导,多個變量要用[...]括起來。

如果數(shù)組本身還有嵌套习霹,也可以通過下面的形式進(jìn)行解構(gòu)賦值朵耕,注意嵌套層次和位置要保持一致:

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'

解構(gòu)賦值還可以忽略某些元素:

let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前兩個元素,只對z賦值第三個元素
z; // 'ES6'

如果需要從一個對象中取出若干屬性淋叶,也可以使用解構(gòu)賦值阎曹,便于快速獲取對象的指定屬性:

'use strict';

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;

對一個對象進(jìn)行解構(gòu)賦值時,同樣可以直接對嵌套的對象屬性進(jìn)行賦值煞檩,只要保證對應(yīng)的層次是一致的:

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
var {name, address: {city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因為屬性名是zipcode而不是zip
// 注意: address不是變量处嫌,而是為了讓city和zip獲得嵌套的address對象的屬性:
address; // Uncaught ReferenceError: address is not defined

使用解構(gòu)賦值對對象屬性進(jìn)行賦值時,如果對應(yīng)的屬性不存在斟湃,變量將被賦值為undefined熏迹,這和引用一個不存在的屬性獲得undefined是一致的。如果要使用的變量名和屬性名不一致凝赛,可以用下面的語法獲茸怠:

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};

// 把passport屬性賦值給變量id:
let {name, passort:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是變量坛缕,而是為了讓變量id獲得passport屬性:
passport; // Uncaught ReferenceError: passport is not defined

解構(gòu)賦值還可以使用默認(rèn)值,這樣就避免了不存在的屬性返回undefined的問題:

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678'
};

// 如果person對象沒有single屬性捆昏,默認(rèn)賦值為true:
var {name, single=true} = person;
name; // '小明'
single; // true

有些時候赚楚,如果變量已經(jīng)被聲明了,再次賦值的時候骗卜,正確的寫法也會報語法錯誤:

// 聲明變量:
var x, y;
// 解構(gòu)賦值:
{x, y} = { name: '小明', x: 100, y: 200};
// 語法錯誤: Uncaught SyntaxError: Unexpected token =

這是因為JavaScript引擎把{開頭的語句當(dāng)作了塊處理宠页,于是=不再合法。解決方法是用小括號括起來:

({x, y} = { name: '小明', x: 100, y: 200});

使用場景

解構(gòu)賦值在很多時候可以大大簡化代碼寇仓。例如举户,交換兩個變量x和y的值,可以這么寫焚刺,不再需要臨時變量:

var x=1, y=2;
[x, y] = [y, x]

快速獲取當(dāng)前頁面的域名和路徑:

var {hostname:domain, pathname:path} = location;

如果一個函數(shù)接收一個對象作為參數(shù)敛摘,那么,可以使用解構(gòu)直接把對象的屬性綁定到變量中乳愉。例如兄淫,下面的函數(shù)可以快速創(chuàng)建一個Date對象:

function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
}

它的方便之處在于傳入的對象只需要year、month和day這三個屬性:

buildDate({ year: 2017, month: 1, day: 1 });
// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)

也可以傳入hour蔓姚、minute和second屬性:

buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
// Sun Jan 01 2017 20:15:00 GMT+0800 (CST)

使用解構(gòu)賦值可以減少代碼量捕虽,但是,需要在支持ES6解構(gòu)賦值特性的現(xiàn)代瀏覽器中才能正常運行坡脐。目前支持解構(gòu)賦值的瀏覽器包括Chrome泄私,F(xiàn)irefox,Edge等备闲。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末晌端,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子恬砂,更是在濱河造成了極大的恐慌咧纠,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泻骤,死亡現(xiàn)場離奇詭異漆羔,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)狱掂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進(jìn)店門演痒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人趋惨,你說我怎么就攤上這事鸟顺。” “怎么了器虾?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵诊沪,是天一觀的道長养筒。 經(jīng)常有香客問我,道長端姚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任挤悉,我火速辦了婚禮渐裸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘装悲。我一直安慰自己昏鹃,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布诀诊。 她就那樣靜靜地躺著洞渤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪属瓣。 梳的紋絲不亂的頭發(fā)上载迄,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天,我揣著相機(jī)與錄音抡蛙,去河邊找鬼护昧。 笑死粗截,一個胖子當(dāng)著我的面吹牛惋耙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播熊昌,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绽榛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了婿屹?” 一聲冷哼從身側(cè)響起灭美,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎选泻,沒想到半個月后冲粤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡页眯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年梯捕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窝撵。...
    茶點故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡傀顾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出碌奉,到底是詐尸還是另有隱情短曾,我是刑警寧澤寒砖,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站嫉拐,受9級特大地震影響哩都,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜婉徘,卻給世界環(huán)境...
    茶點故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一漠嵌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧盖呼,春花似錦儒鹿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蟹瘾,卻和暖如春圾浅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背热芹。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工贱傀, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人伊脓。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓府寒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親报腔。 傳聞我的和親對象是個殘疾皇子株搔,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,947評論 2 355

推薦閱讀更多精彩內(nèi)容