ECMAScript Edition5 小试

ECMAScript Edition5 小试 张立理 zhanglili01@baidu.com 感谢教主

什么是ECMAScript • 由欧洲计算机制造商协会（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 • 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 • Object.create • Object.defineProperty • Object.getPrototypeOf • Object.keys • Object.seal • Object.freeze • Object.preventExtensions • Object.isSealed • Object.isExtensible • Object.getOwnPropertyDescriptor • Object.getOwnPropertyNames • Date.prototype.toISOString

先来一个题 • var x = 123; • delete x; // ?? • window.y = 123; • delete y; // ?? • Why?

属性描述符 • 是用于解释某一个被命名的属性具体操作规则的特性集。 • 属性描述符中的对应每个字段名都会有一个值。其中任何一个字段都可以缺省或显式的设置。 • 属性描述符还会被进一步以字段的实际用途来分类成--数据属性描述符和访问器属性描述符。

数据属性 & 访问器属性 Data Descriptor Accessor Descriptor [[Get]] [[Set]] [[Enumerable]] [[Configurable]] • [[Value]] • [[Writable]] • [[Enumerable]] • [[Configurable]]

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

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

再来看一段代码 javascript is prototype based class oriented programming language Why 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) 不能添加属性不能删除属性不能修改属性描述符不能修改属性的值相当于常量 • 不能添加属性 • 不能删除属性 • 不能修改属性描述符

继续看代码

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

严格模式 • 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 v3 ECMAScript v5 PropertyName : IdentifierName StringLiteral NumericLiteral ObjectLiteral : { } { PropertyNameAndValueList } { PropertyNameAndValueList , } PropertyName: Identifier StringLiteral NumericLiteral ObjectLiteral: { } { 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 • http://www.cnblogs.com/_franky/articles/2184461.html • http://www.cnblogs.com/_franky/articles/2184581.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] • 赋值+取值+遍历

Proxy Let’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的字面量 • (x: 1, y: 2) • 重载[]运算 • Proxy已经可以完成

exit(0);

ECMAScript Edition5 小试