430 likes | 620 Views
ECMAScript Edition5 小试. 张立理 zhanglili01@baidu.com 感谢教主. 什么是 ECMAScript. 由欧洲计算机制造商协会( ECMA )通过 ECMA-262 标准化的脚本程序设计语言 Javascript Jscript ActionScript. 现有支持度. Firefox4+ | Chrome11+ | IE10PP2 NodeJS (V8) Safari5 – 仅部分 Opera11.5 – 基本无实现 http://test262.ecmascript.org /
E N D
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已经可以完成