Ecma script edition5-小试

ECMAScript
Edition5 小试
张立理
zhanglili01@baidu.com

感谢教主

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

版本发表日期描述
3 1999年12月我们所认识的版本
4 放弃关于语言的复杂性出现分歧，被放弃
5 2009年12月增加多项改进
Harmony 社区讨论中将以ECMAScript6发布

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

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

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

新增API
 Object.create  Date.now
 Object.defineProperty  Array.isArray
 Object.getPrototypeOf  JSON
 Object.keys  Function.prototype.bind
 Object.seal  String.prototype.trim
 Object.freeze  Array.prototype.indexOf
 Object.preventExtensions  Array.prototype.lastIndexOf
 Object.isSealed  Array.prototype.every
 Object.isExtensible  Array.prototype.some
 Object.getOwnPropertyDescriptor  Array.prototype.forEach
 Object.getOwnPropertyNames  Array.prototype.map
 Date.prototype.toISOString  Array.prototype.reduce
 Array.prototype.reduceRight

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

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

 Why?

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

数据属性 & 访问器属性
Data Descriptor Accessor Descriptor
 [[Value]]  [[Get]]
 [[Writable]]  [[Set]]
 [[Enumerable]]  [[Enumerable]]
 [[Configurable]]  [[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

彻底基于原型
 继承？

一些细节
 varo = 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 v3 ECMAScript v5
PropertyName : PropertyName :
Identifier IdentifierName
StringLiteral StringLiteral
NumericLiteral NumericLiteral

ObjectLiteral : ObjectLiteral :
{} {}
{ PropertyNameAndValueList } { PropertyNameAndValueList }
{ PropertyNameAndValueList , }

保留字
 Deywords：
 debugger
 Reserved Words：
 class enum extends super const export
import
 Reserved Words (Strict Mode)：
 implements let private public yield in
terface package protected static

Reference
 http://www.cnblogs.com/_franky/articles/2143688.html




谈谈Harmony
 正在社区讨论中
 http://wiki.ecmascript.org/doku.php?id=ha
rmony: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使用的转义效果

 String：
 String.prototype.repeat(count)
 String.prototype.startsWith(s)
 String.prototype.endsWith(s)
 String.prototype.contains(s)
 String.prototype.toArray()
 Math：
 改进Math.random

 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]

 赋值+取值+遍历

新的类型- 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已经可以完成

Ecma script edition5-小试

More Related Content

What's hot (19)

Viewers also liked (18)

Similar to Ecma script edition5-小试 (20)

Recently uploaded (20)

Ecma script edition5-小试