淺談JavaScript的語言特性

時間 2019-12-07

標籤淺談 javascript 語言特性欄目 JavaScript 简体版

原文原文鏈接

前言

在JavaScript中，做用域、上下文、閉包、函數等算是精華中的精華了。對於初級JSer來講，是進階必備。對於前端攻城師來講，只有靜下心來，理解了這些精華，才能寫出優雅的代碼。 javascript

本文旨在總結容易忘記的重要知識，不會講基本的概念。若是對基本知識不太熟悉，就去翻下《 JavaScript權威指南》吧~ php

參考文章以下(建議讀者朋友用chrome看這些文章吧，否則的話會錯過不少精彩哦~)： html

ECMA-262 前端

Ben Alman html5

ECMA-262 java

語言特性函數表達式 web

先看代碼段： chrome

var f = function foo(){
return typeof foo; // foo是在內部做用域內有效
};
// foo在外部用因而不可見的
typeof foo; // "undefined"
f(); // "function"

這裏想說一點的就是，在函數表達式中的foo，只能在函數內部引用，外面是不能引用的。

json express

不少JavaScript開發人員都錯誤地把JavaScript對象字面量(Object Literals)稱爲JSON對象(JSON Objects)。 JSON是設計成描述數據交換格式的，它也有本身的語法，這個語法是JavaScript的一個子集。 json

{ 「prop」: 「val」 } 這樣的聲明有多是JavaScript對象字面量，也有多是JSON字符串，取決於什麼上下文使用它。若是是用在string上下文(用單引號或雙引號引住，或者從text文件讀取)的話，那它就是JSON字符串，若是是用在對象字面量上下文中，那它就是對象字面量。

// 這是JSON字符串
var foo = '{ "prop": "val" }';
// 這是對象字面量
var bar = { "prop": "val" };

還有一點須要知道的是，JSON.parse用來將JSON字符串反序列化成對象，JSON.stringify用來將對象序列化成JSON字符串。老版本的瀏覽器不支持這個對象，但你能夠經過json2.js來實現一樣的功能。

原型

function Animal (){
// ...
}
function cat (){
// ...
}
cat.prototype = new Animal();//這種方式會繼承構造函數裏面的。
cat.prototype = Animal.prototype;//這種方式不會繼承構造函數裏面的。
//還有一個重要的細節須要注意的就是必定要維護本身的原型鏈,新手總會忘記這個！
cat.prototype.constructor = cat;

若是咱們完全改變函數的prototype屬性（經過分配一個新的對象），那原始構造函數的引用就是丟失，這是由於咱們建立的對象不包括constructor屬性：

function A() {}
A.prototype = {
x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // false!

讓咱們一塊兒看下MDN上關於constructor的解釋吧：prototype：Returns a reference to the Object function that created the instance’s prototype.所以，對函數的原型引用須要手工恢復：

function A() {}
A.prototype = {
constructor: A,
x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // true

然而，提交prototype屬性不會影響已經建立對象的原型（只有在構造函數的prototype屬性改變的時候纔會影響到)，就是說新建立的對象纔有有新的原型，而已建立對象仍是引用到原來的舊原型（這個原型已經不能被再被修改了）。

function A() {}
A.prototype.x = 10;
var a = new A();
alert(a.x); // 10
A.prototype = {
constructor: A,
x: 20
y: 30
};
// 對象a是經過隱式的[[Prototype]]引用從原油的prototype上獲取的值
alert(a.x); // 10
alert(a.y) // undefined
var b = new A();
// 但新對象是重新原型上獲取的值
alert(b.x); // 20
alert(b.y) // 30

所以，「動態修改原型將影響全部的對象都會擁有新的原型」是錯誤的，新原型僅僅在原型修改之後的新建立對象上生效。這裏的主要規則是：對象的原型是對象的建立的時候建立的，而且在此以後不能修改成新的對象，若是依然引用到同一個對象，能夠經過構造函數的顯式prototype引用，對象建立之後，只能對原型的屬性進行添加或修改。

變量對象在函數執行上下文中，VO(variable object)是不能直接訪問的，此時由活動對象(activation object)扮演VO的角色。活動對象是在進入函數上下文時刻被建立的，它經過函數的arguments屬性初始化。arguments屬性的值是Arguments對象：

function foo(x, y, z) {
// 聲明的函數參數數量arguments (x, y, z)
alert(foo.length); // 3
// 真正傳進來的參數個數(only x, y)
alert(arguments.length); // 2
// 參數的callee是函數自身
alert(arguments.callee === foo); // true
}

當進入執行上下文(代碼執行以前)時，VO裏已經包含了下列屬性：1. 函數的全部形參(若是咱們是在函數執行上下文中)；

全部函數聲明(FunctionDeclaration, FD)；
全部變量聲明(var, VariableDeclaration)；

另外一個經典例子：

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20

根據規範函數聲明是在當進入上下文時填入的; 在進入上下文的時候還有一個變量聲明「x」，那麼正如咱們在上面所說，變量聲明在順序上跟在函數聲明和形式參數聲明以後，並且在這個進入上下文階段，變量聲明不會干擾VO中已經存在的同名函數聲明或形式參數聲明。變量相對於簡單屬性來講，變量有一個特性(attribute)：{DontDelete},這個特性的含義就是不能用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" 沒有聲明.

this在一個函數上下文中，this由調用者提供，由調用函數的方式來決定。若是調用括號()的左邊是引用類型的值，this將設爲引用類型值的base對象（base object），在其餘狀況下（與引用類型不一樣的任何其它屬性），這個值爲null。不過，實際不存在this的值爲null的狀況，由於當this的值爲null的時候，其值會被隱式轉換爲全局對象。

(function () {
alert(this); // null => global
})();

在這個例子中，咱們有一個函數對象但不是引用類型的對象（它不是標示符，也不是屬性訪問器），相應地，this值最終設爲全局對象。

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

問題在於後面的三個調用，在應用必定的運算操做以後，在調用括號的左邊的值不在是引用類型。

第一個例子很明顯———明顯的引用類型，結果是，this爲base對象，即foo。
在第二個例子中，組運算符並不適用，想一想上面提到的，從引用類型中得到一個對象真正的值的方法，如GetValue。相應的，在組運算的返回中———咱們獲得還是一個引用類型。這就是this值爲何再次設爲base對象，即foo。
第三個例子中，與組運算符不一樣，賦值運算符調用了GetValue方法。返回的結果是函數對象（但不是引用類型），這意味着this設爲null，結果是global對象。
第四個和第五個也是同樣——逗號運算符和邏輯運算符（OR）調用了GetValue 方法，相應地，咱們失去了引用而獲得了函數。並再次設爲global。

正如咱們知道的，局部變量、內部函數、形式參數儲存在給定函數的激活對象中。

function foo() {
function bar() {
alert(this); // global
}
bar(); // the same as AO.bar()
}

活動對象老是做爲this返回，值爲null——（即僞代碼的AO.bar()至關於null.bar()）。這裏咱們再次回到上面描述的例子，this設置爲全局對象。

做用域鏈

經過函構造函數建立的函數的scope屬性老是惟一的全局對象。

一個重要的例外，它涉及到經過函數構造函數建立的函數。

var x = 10;
function foo() {
var y = 20;
function barFD() { // 函數聲明
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

在進入上下文時發生了什麼？標識符「x」和「y」已被添加到變量對象中。此外，在代碼運行階段做以下修改：

x = 10, y = 10;
對象{x:20}添加到做用域的前端;
在with內部，遇到了var聲明，固然什麼也沒建立，由於在進入上下文時，全部變量已被解析添加;
在第二步中，僅修改變量「x」，實際上對象中的「x」如今被解析，並添加到做用域鏈的最前端，「x」爲20，變爲30;
一樣也有變量對象「y」的修改，被解析後其值也相應的由10變爲30;
此外，在with聲明完成後，它的特定對象從做用域鏈中移除（已改變的變量「x」－－30也從那個對象中移除），即做用域鏈的結構恢復到with獲得增強之前的狀態。
在最後兩個alert中，當前變量對象的「x」保持同一，「y」的值如今等於30，在with聲明運行中已發生改變。

函數

關於圓括號的問題

讓咱們看下這個問題：‘ 爲什麼在函數建立後的當即調用中必須用圓括號來包圍它？’，答案就是：表達式句子的限制就是這樣的。

按照標準，表達式語句不能以一個大括號 { 開始是由於他很難與代碼塊區分，一樣，他也不能以函數關鍵字開始，由於很難與函數聲明進行區分。即，因此，若是咱們定義一個當即執行的函數，在其建立後當即按如下方式調用：

function () {
...
}();
// 即使有名稱
function foo() {
...
}();

咱們使用了函數聲明，上述2個定義，解釋器在解釋的時候都會報錯，可是可能有多種緣由。若是在全局代碼裏定義（也就是程序級別），解釋器會將它看作是函數聲明，由於他是以function關鍵字開頭，第一個例子，咱們會獲得SyntaxError錯誤，是由於函數聲明沒有名字（咱們前面提到了函數聲明必須有名字）。第二個例子，咱們有一個名稱爲foo的一個函數聲明正常建立，可是咱們依然獲得了一個語法錯誤——沒有任何表達式的分組操做符錯誤。在函數聲明後面他確實是一個分組操做符，而不是一個函數調用所使用的圓括號。因此若是咱們聲明以下代碼：