es5 introduction

ECMAScript Edition5 小试张立理[email protected]

感谢教主

什么是 ECMAScript

版本发表日期描述3 1999 年 12

月我们所认识的版本

4 放弃关于语言的复杂性出现分歧，被放弃5 2009 年 12

月增加多项改进

Harmony 社区讨论中将以 ECMAScript6 发布

由欧洲计算机制造商协会（ ECMA ）通过 ECMA-262 标准化的脚本程序设计语言• Javascript• Jscript• ActionScript

现有支持度 Firefox4+ | Chrome11+ | IE10PP2 NodeJS(V8) Safari5 – 仅部分 Opera11.5 – 基本无实现

http://test262.ecmascript.org/ http://kangax.github.com/es5-compat-table/

ECMAScript5 特性新增、改进的 API 更严谨、强大的语法全新的概念更多的细节

新增 API Object.create Object.defineProperty Object.getPrototypeOf Object.keys Object.seal Object.freeze Object.preventExtensions Object.isSealed Object.isExtensible Object.getOwnPropertyDescrip

tor Object.getOwnPropertyNames Date.prototype.toISOString

Date.now Array.isArray JSON Function.prototype.bind String.prototype.trim Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.reduce Array.prototype.reduceRight

先来一个题 var x = 123; delete x; // ??

window.y = 123; delete y; // ??

Why?

属性描述符是用于解释某一个被命名的属性具体操作规则

的特性集。属性描述符中的对应每个字段名都会有一个值。

其中任何一个字段都可以缺省或显式的设置。属性描述符还会被进一步以字段的实际用途来

分类成 -- 数据属性描述符和访问器属性描述符。

数据属性 & 访问器属性Data Descriptor

[[Value]] [[Writable]] [[Enumerable]] [[Configurable]]

Accessor Descriptor

[[Get]] [[Set]] [[Enumerable]] [[Configurable]]

数据属性 & 访问器属性 Object.defineProperty(o, p, descriptor)

数据属性 & 访问器属性 Getter & Setter in Object Initializer

再来看一段代码

javascript is prototype based class oriented programming languageWhy Class?

彻底基于原型很多人觉得 javascript 不舒服、恶心、语法怪

异，是因为你学的第一个语言不是javascript ，因为你接触的第一种面向对象的实现方案不是基于原型，而你又没有胆量完全抛开以前的所有，把 javascript 作为一门全新的、和 java 和 c 完全没有关系的语言来看，承认自己的无知，而后如新生婴儿一般求知。

彻底基于原型 Object.create(proto, properties)

• Pros:• No class, No new• Property Descriptor• prototype based

• Cons:• No constructor

彻底基于原型继承？

一些细节 var o = Object.create(null); console.log(o + ‘ is created’);

What happens?

ToPrimitive -> toString -> null.toString 没有任何规范说对象的 [[prototype]] 不能为

null 或 undefined Object.prototype | Function.prototype

对象的内部属性[[Extensible]] Object.preventExtensions(o)

密封 & 冻结Object.seal(o)

不能添加属性不能删除属性不能修改属性描述符

Object.freeze(o) 不能添加属性不能删除属性不能修改属性描述符不能修改属性的值

相当于常量

继续看代码

IE Firefox Chrome

Safari Opera

x undefined undefined hack undefined undefined

[0] hack ‘’ hack hack hack

[1] ‘’ ‘’ 123 ‘’ ‘’

严格模式更严格的语法检测更明确的对象扩展原则更确定的错误检测机制更严格的对象绑定机制

严格模式

ECMAScript v3 – 15.3.4.3 If thisArg is null or undefined, the called function is passed the

global object as the this value. Otherwise, the called function is passed ToObject(thisArg) as the this value.

ECMAScript v5 – 15.3.4.3 Return the result of calling the [[Call]] internal method of func,

providing thisArg as the this value and argListas the list of arguments.

严格模式

不允许访问 callee 和 callee.caller 。索引器对应的属性，仅仅是传递的参数值的拷贝，并不存在与形

参的动态关联性。 callee 和 caller 的特性被设置为 [[Configurable:false]] 。 arguments 以及 arguments.callee 、 arguments.caller 、

arguments.callee.caller 不允许被重新赋值。

严格模式通过指令序言（ Directive Prologues ）进入

严格模式不能给未定义的属性赋值，会产生 TypeError eval 和 arguments相当于关键字八进制数字直接量和八进制转义序列取消 eval拥有单独执行环境 delete 会产生 TypeError

正则表达式的细节

ECMAScript v3 – 7.8.5 A regular expression literal is an input element that is

converted to a RegExp object (section 15.10) when it is scanned. The object is created before evaluation of the containing program or function begins. Evaluation of the literal produces a reference to that object; it does not create a new object.

ECMAScript v5 – 7.8.5 A regular expression literal is an input element that is

converted to a RegExp object (see 15.10) each time the literal is evaluated.

Obejct Initializer 的细节

ECMAScript v3PropertyName : Identifier StringLiteral NumericLiteral

ObjectLiteral : { }

{ PropertyNameAndValueList }

ECMAScript v5PropertyName : IdentifierName StringLiteral NumericLiteral

ObjectLiteral : { }

{ PropertyNameAndValueList }

{ PropertyNameAndValueList , }

保留字 Deywords：

debugger Reserved Words：

class enum extends super const export import

Reserved Words (Strict Mode)： implements let private public yield interface package protected static

Reference http://www.cnblogs.com/_franky/articles/

2143688.html

http://www.cnblogs.com/_franky/articles/2149843.html



谈谈 Harmony正在社区讨论中

http://wiki.ecmascript.org/doku.php?id=harmony:proposals

有可能是：原生对象的 API 增加新的类型语法的大更新：关键字、对象直接量 python + coffee + ruby

原生对象 API 扩展 Number：

Number.isFinite(n) Number.isNaN(n) Number.isInteger(n) Number.toInteger(str)

RegExp： ‘y’ flag： sticky 模式，固定 lastIndex 更加符合Web使用的转义效果

原生对象 API 扩展 String：

String.prototype.repeat(count) String.prototype.startsWith(s) String.prototype.endsWith(s) String.prototype.contains(s) String.prototype.toArray()

Math：改进 Math.random

原生对象 API 扩展 Function：

更严格的 toString 实现。 Object：

Object.is(x, y)：相当于 equals Object.create 改进：仅 value 的 descriptor简化为 { key: value } 形式

新的类型 Map & Set

Map 是可以以 object 为 key 的 object hash get | set | has | delete

Set 是不能有重复元素的 Array add | has | delete

WeakMap key 会被回收的 Map 用于解决内存泄露问题

新的类型 - Proxy Proxy：

万能工厂？万能拦截器？ getOwnPropertyDescriptor getPropertyDescriptor getOwnPropertyNames getPropertyNames defineProperty delete fix

Proxy简单实现拦截：

has: function(name) -> boolean hasOwn: function(name) -> boolean get: function(receiver, name) -> any set: function(receiver, name, val) -> boolean

enumerate: function() -> [string] keys: function() -> [string]

赋值 +取值 +遍历

ProxyLet’s MVC

新的类型 - Iterator• import• iterator• next• for…of

新的语法变量声明：

const：不可变常量 let：块作用域变量

解构： [x, y, z] = 1 [a, b] = [b, a] var { x: a, y: b, z: c } = { a: 1, b: 2, c: 3 }

for (let [key, value] in o) { print(value); }

新的语法默认参数值：

function add(x = 0, y = 0) { /* … */ } 不定量参数：

function sum(x, …others) { /* … */ } 数组解开传参：

sum(1, 2, …array) -> sum.apply(this, [1, 2].concat(array)

新的语法 Generator

function* yield

新的语法 Array Comprehensions

执行 add(user) for user of database.all(‘user’)

过滤 print(x) for (x of [1, 2, 3]) if (x % 2 === 0)

多维 [x, y] for (x of rows) for (y of columns)

映射 [Math.abs(x) for (x of [1, -1, 2, -3, 4, 9])]

新的语法模块化

module | export | import 类化

class | extends 访问权限

public | private private name generator

可能会有的异步编程语法支持（ Promise ）

var x = yield $.getJSON(url); print(x); Map （ Dict ）的字面量

(x: 1, y: 2) 或 [x: 1, y: 2] Tuple

(1, 2, 3) 重载 []运算

Proxy已经可以完成

exit(0);

es5 introduction

Engineering