淺談關(guān)于JavaScript的語(yǔ)言特性分析
前言
在JavaScript中，作用域、上下文、閉包、函數(shù)等算是精華中的精華了。對(duì)于初級(jí)JSer來(lái)說(shuō)，是進(jìn)階必備。對(duì)于前端攻城師來(lái)說(shuō)，只有靜下心來(lái)，理解了這些精華，才能寫出優(yōu)雅的代碼。
本文旨在總結(jié)容易忘記的重要知識(shí)，不會(huì)講基本的概念。如果對(duì)基本知識(shí)不太熟悉，就去翻下《 JavaScript權(quán)威指南》吧~
語(yǔ)言特性函數(shù)表達(dá)式
先看代碼段：
[javascript] view plaincopyprint?
var f = function foo(){
return typeof foo; // foo是在內(nèi)部作用域內(nèi)有效
};
// foo在外部用于是不可見(jiàn)的
typeof foo; // "undefined"
f(); // "function"
var f = function foo(){
return typeof foo; // foo是在內(nèi)部作用域內(nèi)有效
};
// foo在外部用于是不可見(jiàn)的
typeof foo; // "undefined"
f(); // "function"
這里想說(shuō)一點(diǎn)的就是，在函數(shù)表達(dá)式中的foo，只能在函數(shù)內(nèi)部引用，外面是不能引用的。
json
很多JavaScript開發(fā)人員都錯(cuò)誤地把JavaScript對(duì)象字面量(Object Literals)稱為JSON對(duì)象(JSON Objects)。 JSON是設(shè)計(jì)成描述數(shù)據(jù)交換格式的，它也有自己的語(yǔ)法，這個(gè)語(yǔ)法是JavaScript的一個(gè)子集。
{ “prop”: “val” } 這樣的聲明有可能是JavaScript對(duì)象字面量，也有可能是JSON字符串，取決于什么上下文使用它。如果是用在string上下文(用單引號(hào)或雙引 號(hào)引住，或者從text文件讀取)的話，那它就是JSON字符串，如果是用在對(duì)象字面量上下文中，那它就是對(duì)象字面量。
[javascript] view plaincopyprint?
// 這是JSON字符串
var foo = '{ "prop": "val" }';
// 這是對(duì)象字面量
var bar = { "prop": "val" };
// 這是JSON字符串
var foo = '{ "prop": "val" }';
// 這是對(duì)象字面量
var bar = { "prop": "val" };
還有一點(diǎn)需要知道的是，JSON.parse用來(lái)將JSON字符串反序列化成對(duì)象，JSON.stringify用來(lái)將對(duì)象序列化成JSON字符串。老版本的瀏覽器不支持這個(gè)對(duì)象，但你可以通過(guò)json2.js來(lái)實(shí)現(xiàn)同樣的功能。
原型
function Animal (){
// ...
}
function cat (){
// ...
}
cat.prototype = new Animal();//這種方式會(huì)繼承構(gòu)造函數(shù)里面的。
cat.prototype = Animal.prototype;//這種方式不會(huì)繼承構(gòu)造函數(shù)里面的。
//還有一個(gè)重要的細(xì)節(jié)需要注意的就是一定要維護(hù)自己的原型鏈,新手總會(huì)忘記這個(gè)！
cat.prototype.constructor = cat;
如果我們徹底改變函數(shù)的prototype屬性（通過(guò)分配一個(gè)新的對(duì)象），那原始構(gòu)造函數(shù)的引用就是丟失，這是因?yàn)槲覀儎?chuàng)建的對(duì)象不包括constructor屬性：
function A() {}
A.prototype = {
x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // false!
讓我們一起看下MDN上關(guān)于constructor的解釋吧：prototype：Returns a reference to the Object function that created the instance's prototype.因此，對(duì)函數(shù)的原型引用需要手工恢復(fù)：
function A() {}
A.prototype = {
constructor: A,
x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // true
然而，提交prototype屬性不會(huì)影響已經(jīng)創(chuàng)建對(duì)象的原型（只有在構(gòu)造函數(shù)的prototype屬性改變的時(shí)候才會(huì)影響到)，就是說(shuō)新創(chuàng)建的對(duì)象才有有新的原型，而已創(chuàng)建對(duì)象還是引用到原來(lái)的舊原型（這個(gè)原型已經(jīng)不能被再被修改了）。
function A() {}
A.prototype.x = 10;
var a = new A();
alert(a.x); // 10
A.prototype = {
constructor: A,
x: 20
y: 30
};
// 對(duì)象a是通過(guò)隱式的[[Prototype]]引用從原油的prototype上獲取的值
alert(a.x); // 10
alert(a.y) // undefined
var b = new A();
// 但新對(duì)象是從新原型上獲取的值
alert(b.x); // 20
alert(b.y) // 30
因此，“動(dòng)態(tài)修改原型將影響所有的對(duì)象都會(huì)擁有新的原型”是錯(cuò)誤的，新原型僅僅在原型修改以后的新創(chuàng)建對(duì)象上生效。這里的主要規(guī)則是：對(duì)象的原型是對(duì)象的創(chuàng)建的時(shí)候創(chuàng)建的，并且在此之后不能修改為新的對(duì)象，如果依然引用到同一個(gè)對(duì)象，可以通過(guò)構(gòu)造函數(shù)的顯式prototype引用，對(duì)象創(chuàng)建以后，只能對(duì)原型的屬性進(jìn)行添加或修改。
變量對(duì)象在函數(shù)執(zhí)行上下文中，VO(variable object)是不能直接訪問(wèn)的，此時(shí)由活動(dòng)對(duì)象(activation object)扮演VO的角色。 活動(dòng)對(duì)象是在進(jìn)入函數(shù)上下文時(shí)刻被創(chuàng)建的，它通過(guò)函數(shù)的arguments屬性初始化。arguments屬性的值是Arguments對(duì)象：
function foo(x, y, z) {
// 聲明的函數(shù)參數(shù)數(shù)量arguments (x, y, z)
alert(foo.length); // 3
// 真正傳進(jìn)來(lái)的參數(shù)個(gè)數(shù)(only x, y)
alert(arguments.length); // 2
// 參數(shù)的callee是函數(shù)自身
alert(arguments.callee === foo); // true
}
當(dāng)進(jìn)入執(zhí)行上下文(代碼執(zhí)行之前)時(shí)，VO里已經(jīng)包含了下列屬性：1. 函數(shù)的所有形參(如果我們是在函數(shù)執(zhí)行上下文中)；
•所有函數(shù)聲明(FunctionDeclaration, FD)；
•所有變量聲明(var, VariableDeclaration)；
另一個(gè)經(jīng)典例子：
alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20
根據(jù)規(guī)范函數(shù)聲明是在當(dāng)進(jìn)入上下文時(shí)填入的; 在進(jìn)入上下文的時(shí)候還有一個(gè)變量聲明“x”，那么正如我們?cè)谏厦嫠f(shuō)，變量聲明在順序上跟在函數(shù)聲明和形式參數(shù)聲明之后，而且在這個(gè)進(jìn)入上下文階段，變量聲明不會(huì)干擾VO中已經(jīng)存在的同名函數(shù)聲明或形式參數(shù)聲明。變量相對(duì)于簡(jiǎn)單屬性來(lái)說(shuō)，變量有一個(gè)特性(attribute)：{DontDelete},這個(gè)特性的含義就是不能用delete操作符直接刪除變量屬性。
a = 10;
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
var b = 20;
alert(window.b); // 20
alert(delete b); // false
alert(window.b); // still 20。b is variable,not property!
var a = 10; // 全局上下文中的變量
(function () {
var b = 20; // function上下文中的局部變量
})();
alert(a); // 10
alert(b); // 全局變量 "b" 沒(méi)有聲明.
this在一個(gè)函數(shù)上下文中，this由調(diào)用者提供，由調(diào)用函數(shù)的方式來(lái)決定。如果調(diào)用括號(hào)()的左邊是引用類型的值，this將設(shè)為引用類型值 的base對(duì)象（base object），在其他情況下（與引用類型不同的任何其它屬性），這個(gè)值為null。不過(guò)，實(shí)際不存在this的值為null的情況，因?yàn)楫?dāng)this的值 為null的時(shí)候，其值會(huì)被隱式轉(zhuǎn)換為全局對(duì)象。
(function () {
alert(this); // null => global
})();<SPAN style="LINE-HEIGHT: 25.2px; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; FONT-SIZE: 14px"> </SPAN>
在這個(gè)例子中，我們有一個(gè)函數(shù)對(duì)象但不是引用類型的對(duì)象（它不是標(biāo)示符，也不是屬性訪問(wèn)器），相應(yīng)地，this值最終設(shè)為全局對(duì)象。
var foo = {
bar: function () {
alert(this);
}
};
foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo
(foo.bar = foo.bar)(); // global
(false || foo.bar)(); // global
(foo.bar, foo.bar)(); // global
問(wèn)題在于后面的三個(gè)調(diào)用，在應(yīng)用一定的運(yùn)算操作之后，在調(diào)用括號(hào)的左邊的值不在是引用類型。
•第一個(gè)例子很明顯———明顯的引用類型，結(jié)果是，this為base對(duì)象，即foo。
•在第二個(gè)例子中，組運(yùn)算符并不適用，想想上面提到的，從引用類型中獲得一個(gè)對(duì)象真正的值的方法，如GetValue。相應(yīng)的，在組運(yùn)算的返回中———我們得到仍是一個(gè)引用類型。這就是this值為什么再次設(shè)為base對(duì)象，即foo。
•第三個(gè)例子中，與組運(yùn)算符不同，賦值運(yùn)算符調(diào)用了GetValue方法。返回的結(jié)果是函數(shù)對(duì)象（但不是引用類型），這意味著this設(shè)為null，結(jié)果是global對(duì)象。
•第四個(gè)和第五個(gè)也是一樣——逗號(hào)運(yùn)算符和邏輯運(yùn)算符（OR）調(diào)用了GetValue 方法，相應(yīng)地，我們失去了引用而得到了函數(shù)。并再次設(shè)為global。
正如我們知道的，局部變量、內(nèi)部函數(shù)、形式參數(shù)儲(chǔ)存在給定函數(shù)的激活對(duì)象中。
function foo() {
function bar() {
alert(this); // global
}
bar(); // the same as AO.bar()
}
活動(dòng)對(duì)象總是作為this返回，值為null——（即偽代碼的AO.bar()相當(dāng)于null.bar()）。這里我們?cè)俅位氐缴厦婷枋龅睦?，this設(shè)置為全局對(duì)象。
作用域鏈
通過(guò)函構(gòu)造函數(shù)創(chuàng)建的函數(shù)的scope屬性總是唯一的全局對(duì)象。
一個(gè)重要的例外，它涉及到通過(guò)函數(shù)構(gòu)造函數(shù)創(chuàng)建的函數(shù)。
var x = 10;
function foo() {
var y = 20;
function barFD() { // 函數(shù)聲明
alert(x);
alert(y);
}
var barFn = Function('alert(x); alert(y);');
barFD(); // 10, 20
barFn(); // 10, "y" is not defined
}
foo();
還有：
var x = 10, y = 10;
with ({x: 20}) {
var x = 30, y = 30;
//這里的 x = 30 覆蓋了x = 20；
alert(x); // 30
alert(y); // 30
}
alert(x); // 10
alert(y); // 30
在進(jìn)入上下文時(shí)發(fā)生了什么？標(biāo)識(shí)符“x”和“y”已被添加到變量對(duì)象中。此外，在代碼運(yùn)行階段作如下修改：
•x = 10, y = 10;
•對(duì)象{x:20}添加到作用域的前端;
•在with內(nèi)部，遇到了var聲明，當(dāng)然什么也沒(méi)創(chuàng)建，因?yàn)樵谶M(jìn)入上下文時(shí)，所有變量已被解析添加;
•在第二步中，僅修改變量“x”，實(shí)際上對(duì)象中的“x”現(xiàn)在被解析，并添加到作用域鏈的最前端，“x”為20，變?yōu)?0;
•同樣也有變量對(duì)象“y”的修改，被解析后其值也相應(yīng)的由10變?yōu)?0;
•此外，在with聲明完成后，它的特定對(duì)象從作用域鏈中移除（已改變的變量“x”－－30也從那個(gè)對(duì)象中移除），即作用域鏈的結(jié)構(gòu)恢復(fù)到with得到加強(qiáng)以前的狀態(tài)。
•在最后兩個(gè)alert中，當(dāng)前變量對(duì)象的“x”保持同一，“y”的值現(xiàn)在等于30，在with聲明運(yùn)行中已發(fā)生改變。
函數(shù)
關(guān)于圓括號(hào)的問(wèn)題
讓我們看下這個(gè)問(wèn)題：‘ 為何在函數(shù)創(chuàng)建后的立即調(diào)用中必須用圓括號(hào)來(lái)包圍它？'，答案就是：表達(dá)式句子的限制就是這樣的。
按照標(biāo)準(zhǔn)，表達(dá)式語(yǔ)句不能以一個(gè)大括號(hào) { 開始是因?yàn)樗茈y與代碼塊區(qū)分，同樣，他也不能以函數(shù)關(guān)鍵字開始，因?yàn)楹茈y與函數(shù)聲明進(jìn)行區(qū)分。即，所以，如果我們定義一個(gè)立即執(zhí)行的函數(shù)，在其創(chuàng)建后立即按以下方式調(diào)用：
function () {
...
}();
// 即便有名稱
function foo() {
...
}();
我們使用了函數(shù)聲明，上述2個(gè)定義，解釋器在解釋的時(shí)候都會(huì)報(bào)錯(cuò)，但是可能有多種原因。如果在全局代碼里定義（也就是程序級(jí)別），解釋器會(huì)將它看做是函數(shù)聲明，因?yàn)樗且詅unction關(guān)鍵字開頭，第一個(gè)例子，我們會(huì)得到SyntaxError錯(cuò)誤，是因?yàn)楹瘮?shù)聲明沒(méi)有名字（我們前面提到了函數(shù)聲明必須有名字）。第二個(gè)例子，我們有一個(gè)名稱為foo的一個(gè)函數(shù)聲明正常創(chuàng)建，但是我們依然得到了一個(gè)語(yǔ)法錯(cuò)誤——沒(méi)有任何表達(dá)式的分組操作符錯(cuò)誤。在函數(shù)聲明后面他確實(shí)是一個(gè)分組操作符，而不是一個(gè)函數(shù)調(diào)用所使用的圓括號(hào)。所以如果我們聲明如下代碼：
// "foo" 是一個(gè)函數(shù)聲明，在進(jìn)入上下文的時(shí)候創(chuàng)建
alert(foo); // 函數(shù)
function foo(x) {
alert(x);
}(1); // 這只是一個(gè)分組操作符，不是函數(shù)調(diào)用！
foo(10); // 這才是一個(gè)真正的函數(shù)調(diào)用，結(jié)果是10
創(chuàng)建表達(dá)式最簡(jiǎn)單的方式就是用分組操作符括號(hào)，里邊放入的永遠(yuǎn)是表達(dá)式，所以解釋器在解釋的時(shí)候就不會(huì)出現(xiàn)歧義。在代碼執(zhí)行階段這個(gè)的function就會(huì)被創(chuàng)建，并且立即執(zhí)行，然后自動(dòng)銷毀（如果沒(méi)有引用的話）
(function foo(x) {
alert(x);
})(1); // 這才是調(diào)用，不是分組操作符
上述代碼就是我們所說(shuō)的在用括號(hào)括住一個(gè)表達(dá)式，然后通過(guò)（1）去調(diào)用。注意，下面一個(gè)立即執(zhí)行的函數(shù)，周圍的括號(hào)不是必須的，因?yàn)楹瘮?shù)已經(jīng)處在表達(dá)式的位置，解析器知道它處理的是在函數(shù)執(zhí)行階段應(yīng)該被創(chuàng)建的FE，這樣在函數(shù)創(chuàng)建后立即調(diào)用了函數(shù)。
var foo = {
bar: function (x) {
return x % 2 != 0 ? 'yes' : 'no';
}(1)
};
alert(foo.bar); // 'yes'
就像我們看到的，foo.bar是一個(gè)字符串而不是一個(gè)函數(shù)，這里的函數(shù)僅僅用來(lái)根據(jù)條件參數(shù)初始化這個(gè)屬性——它創(chuàng)建后并立即調(diào)用。
1.因此，”關(guān)于圓括號(hào)”問(wèn)題完整的答案如下：
2.當(dāng)函數(shù)不在表達(dá)式的位置的時(shí)候，分組操作符圓括號(hào)是必須的——也就是手工將函數(shù)轉(zhuǎn)化成FE。
3.如果解析器知道它處理的是FE，就沒(méi)必要用圓括號(hào)。
自由變量：
function testFn() {
var localVar = 10;//對(duì)于innerFn函數(shù)來(lái)說(shuō)，localVar就屬于自由變量。
function innerFn(innerParam) {
alert(innerParam + localVar);
}
return innerFn;
}
閉包的靜態(tài)作用域：
var z = 10;
function foo() {
alert(z);
}
foo(); // 10 – 使用靜態(tài)和動(dòng)態(tài)作用域的時(shí)候
(function () {
var z = 20;
foo(); // 10 – 使用靜態(tài)作用域, 20 – 使用動(dòng)態(tài)作用域
})();
// 將foo作為參數(shù)的時(shí)候是一樣的
(function (funArg) {
var z = 30;
funArg(); // 10 – 靜態(tài)作用域, 30 – 動(dòng)態(tài)作用域
})(foo);
理論：因?yàn)樽饔糜蜴?，使得所有的函?shù)都是閉包（與函數(shù)類型無(wú)關(guān)： 匿名函數(shù)，F(xiàn)E，NFE，F(xiàn)D都是閉包）。從實(shí)踐角度：以下函數(shù)才算是閉包：* 即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在（比如，內(nèi)部函數(shù)從父函數(shù)中返回）
* 在代碼中引用了自由變量
最后：
ECMAScript是一種面向?qū)ο笳Z(yǔ)言，支持基于原型的委托式繼承。
相關(guān)文章
Parcel?是現(xiàn)代前端開發(fā)中不可或缺的工具之一,以其“零配置”的特性迅速贏得了開發(fā)者的青睞,本文將通過(guò)幾個(gè)實(shí)例詳細(xì)介紹如何進(jìn)行?Parcel?的自定義配置,感興趣的小伙伴可以了解下2024-12-12
JS實(shí)現(xiàn)滑動(dòng)門效果的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)門效果的方法,結(jié)合實(shí)例形式分析了滑動(dòng)門效果的實(shí)現(xiàn)原理、步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
JavaScript中計(jì)算網(wǎng)頁(yè)中某個(gè)元素的位置
這篇文章主要介紹了JavaScript中計(jì)算網(wǎng)頁(yè)中某個(gè)元素的位置,本文先是講解了一些必要的知識(shí)和實(shí)現(xiàn)難點(diǎn),然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了JS中雙擊和單擊事件沖突的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)模板,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能
這篇文章主要介紹了JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)tab選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
在使用uni-app完成掃碼功能時(shí),有時(shí)需要聚焦文本框的同時(shí),需要軟鍵盤消失,下面這篇文章主要給大家介紹了關(guān)于uniapp中input聚焦禁止軟鍵盤彈出的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
JavaScript計(jì)算字符串中每個(gè)字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計(jì)算字符串中每個(gè)字符出現(xiàn)的次數(shù)，有需要的朋友可以參考一下2013-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05