翻譯：ECMAScript 5.1簡介

簡介

ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準最新修正。 與HTML5規範進程本質相似，ES5經過對現有JavaScript方法添加語句和原生ECMAScript對象作合併實現標準化。ES5還引入了一個語法的嚴格變種，被稱爲」嚴格模式(strict mode)」。

本文咱們將介紹一些有用的改變和添加。關於完整列表，請參考官方ECMAScript語言規範附錄D和E (PDF下載, 3MB)，或者查看http://www.ecmascript.org/; 您還能夠以HTML形式查看 – Michael[tm] Smith非官方的HTML版本說明。

瀏覽器支持

隨着Opera 11.60的發佈, 全部5大瀏覽器都支持ES5, 除了一些實現的bugs. 除非另有說明，本文中提到的的一切能夠用在如下瀏覽器版本（或更高）：

• Opera 11.60
• Internet Explorer 9*
• Firefox 4
• Safari 5.1**
• Chrome 13

* IE9不支持嚴格模式 — IE10 添加

** Safari 5.1 仍不支持 Function.prototype.bind, 儘管 Function.prototype.bind如今已經被Webkit所支持。

對於舊版瀏覽器的支持信息，您能夠查看Juriy Zaytsev很讚的 ECMAScript 5 兼容性表。

ES5的嚴格模式

嚴格模式給做者提供了選擇一個限制性更強語言變種的方式——給做者提供額外的可靠性給用戶提供額外的安全性。在JS文件或是函數的頂部添加"use strict"便可啓用嚴格模式。由於"use strict"就是個字符串，所以其會被舊版瀏覽器安全地忽視。

"use strict";

function strict(){ "use strict"; //... } function sloppy(){ eval("window.foo = 'bar'"); }

在嚴格模式下運行腳本，很多致使提醒或buggy行爲的事情會拋出錯誤，例如：

• 未聲明的變量賦值拋出一個ReferenceError, 而不是建立一個全局變量。
• 不止一次對對象字面量分配相同的屬性會拋出SyntaxError.
• 使用with語句拋出SyntaxError.

MDSN的嚴格模式文章有個關於全部這些差別頗有用的總結表格。

JSON

ES5提供一個全局的JSON對象，用來序列化(JSON.stringify)和反序列化(JSON.parse)對象爲JSON格式。

對於老的瀏覽器，能夠考慮使用Douglas Crockford的json2.js, 可讓舊的瀏覽器實現一樣的功能（原始支持功能測試後）。

JSON.parse(text [, reviver])

JSON.parse接受文本(JSON格式)並轉換成一個ECMAScript值。該可選的reviver參數是有帶有key和value兩個參數的函數，其做用於結果——讓過濾和轉換返回值成爲可能。

>> var result = JSON.parse('{"a": 1, "b": "2"}'); Object >> result.b "2"

若是咱們想確保解析的值是個整數，咱們可使用reviver方法。

var result = JSON.parse('{"a": 1, "b": "2"}', function(key, value){ if (typeof value == 'string'){ return parseInt(value); } else { return value; } }) >> result.b 2

JSON.stringify(value [, replacer [, space]])

JSON.stringify容許做者接受一個ECMAScript值而後轉換成JSON格式的字符串。 在其最簡單的形式中，JSON.stringify接受一個值返回一個字符串，

>>> var mike = JSON.stringify({mike: "taylor"}) undefined >> mike '{"mike": "taylor"}' >> typeof mike "string"

若是咱們須要改變值字符串化的方式，或是對咱們選擇的提供過濾，咱們能夠將其傳給replacer函數。例如，咱們想過濾出即將被字符串化的對象中值爲13的屬性：

var nums = { "first": 7, "second": 14, "third": 13 } var luckyNums = JSON.stringify(nums, function(key, value){ if (value == 13) { return undefined; } else { return value; } }); >> luckyNums '{"first": 7, "second": 14}'

若是replacer方法返回undefined, 則鍵值對就不會包含在最終的JSON中。咱們一樣能夠傳遞一個space參數以便得到返回結果的可讀性幫助。space參數能夠是個數字，代表了做縮進的JSON字符串或字符串每一個水平上縮進的空格數。若是參數是個超過10的數值，或是超過10個字符的字符串，將致使取數值10或是截取前10個字符。

var luckyNums = JSON.stringify(nums, function(key, value) { if (value == 13) { return undefined; } else { return value; } }, 2); >> luckyNums '{ "first":7, "second":14 }'

附加對象

下面的方法是添加到Object上的構造器：

• Object.getPrototypeOf
• Object.getOwnPropertyDescriptor
• Object.getOwnPropertyNames
• Object.create
• Object.defineProperty
• Object.defineProperties
• Object.seal
• Object.freeze
• Object.preventExtensions
• Object.isSealed
• Object.isFrozen
• Object.isExtensible
• Object.keys

這些新增的好處之一是對象的屬性有了更多控制，例如哪些是容許被修改的，哪些是能夠枚舉的，哪些是能夠刪除的等。這個的實現經過程序訪問對象的屬性描述符(property descriptors). 例如：

var cat = {}; Object.defineProperty(cat, "name", { value: "Maru", writable: false, enumerable: true, configurable: false }); Object.defineProperty(cat, "skill", { value: "exploring boxes", writable: true, enumerable: true, configurable: true });

對於咱們的cat對象, 其名字name不能被改變，可是會出如今for-in循環中。在其餘方面，Maru擅長探索盒子(exploring boxes), 可是能夠在未來改變，由於skill屬性是writable和configurable的。

在以後的文章咱們將詳細探討全部附加的對象。

額外的數組

如下方法添加到了Arrayprototype對象上:

• Array.prototype.indexOf
• Array.prototype.lastIndexOf
• Array.prototype.every
• Array.prototype.some
• Array.prototype.forEach
• Array.prototype.map
• Array.prototype.filter
• Array.prototype.reduce
• Array.prototype.reduceRight

關於ES5數組」extras」 Dmitry Soshnikov寫過一篇有深度的參考文章。

Dmitry的文章中有一個沒有提到，就是Array.isArray, 正如你看到的，這廝直接寫在了Array構造器上，而不是prototype對象上。Array.isArray會按照你所期待的那樣去作 — 這是一個根據參數的[[Class]]內部屬性是不是」Array」返回true或false.

Array.isArray("NO U") >> false Array.isArray(["NO", "U"]) >> true

在ES3中，惟一可靠的肯定一個值是數組的方式就是使用「the Miller Device」, 即比對一個數組其內在的[[Class]]屬性。

Object.prototype.toString.apply(value) === '[object Array]'

Function.prototype.bind(thisArg [, arg1 [, arg2, …]])

Function.prototype.bind返回一個新的函數對象，該函數對象的this綁定到了thisArg參數上。從本質上講，這容許你在其餘對象鏈中執行一個函數。

function locate(){ console.log(this.location); } function Maru(location){ this.location = location; } var kitty = new Maru("cardboard box"); var locateMaru = locate.bind(kitty); locateMaru();

在這個例子中，咱們將Maru對象的上下文應用在location函數中。由於location是個全局對象的屬性，其this值就是全局對象(window)。在這種狀況下，咱們向上尋找cat, 並非Location對象，由於咱們能夠經過綁定的老是kitty的this值建立一個新方法locateMaru.

補充參考

• ECMAScript 5 對象和屬性 by John Resig
• 理解JavaScript函數調用和」this」 by Yehuda Katz
• JavaScript嚴格模式 by Angus Croll
• ECMA-262-5詳細 介紹 by Dmitry Soshnikov
• ECMAScript 5 兼容性表 by Juriy Zaytsev

本文許可自Creative Commons Attribution 3.0 Unported許可。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2148