1 / 43

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 /

forest
Download Presentation

ECMAScript Edition5 小试

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

  3. 现有支持度 • Firefox4+ | Chrome11+ | IE10PP2 • NodeJS(V8) • Safari5 – 仅部分 • Opera11.5 – 基本无实现 • http://test262.ecmascript.org/ • http://kangax.github.com/es5-compat-table/

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

  5. 新增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

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

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

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

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

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

  11. 再来看一段代码 javascript is prototype based class oriented programming language Why Class?

  12. 彻底基于原型 • 很多人觉得javascript不舒服、恶心、语法怪异,是因为你学的第一个语言不是javascript,因为你接触的第一种面向对象的实现方案不是基于原型,而你又没有胆量完全抛开以前的所有,把javascript作为一门全新的、和java和c完全没有关系的语言来看,承认自己的无知,而后如新生婴儿一般求知。

  13. 彻底基于原型 • Object.create(proto, properties) • Pros: • No class, No new • Property Descriptor • prototype based • Cons: • No constructor

  14. 彻底基于原型 • 继承?

  15. 一些细节 • var o = Object.create(null); • console.log(o + ‘ is created’); • What happens? • ToPrimitive -> toString -> null.toString • 没有任何规范说对象的[[prototype]]不能为null或undefined • Object.prototype | Function.prototype

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

  17. 密封 & 冻结 Object.seal(o) Object.freeze(o) 不能添加属性 不能删除属性 不能修改属性描述符 不能修改属性的值 相当于常量 • 不能添加属性 • 不能删除属性 • 不能修改属性描述符

  18. 继续看代码

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

  20. 严格模式 • 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.

  21. 严格模式 • 不允许访问callee和callee.caller。 • 索引器对应的属性,仅仅是传递的参数值的拷贝,并不存在与形参的动态关联性。 • callee和caller的特性被设置为[[Configurable:false]]。 • arguments以及arguments.callee、arguments.caller、arguments.callee.caller不允许被重新赋值。

  22. 严格模式 • 通过指令序言(Directive Prologues)进入

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

  24. 正则表达式的细节 • 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.

  25. Obejct Initializer的细节 ECMAScript v3 ECMAScript v5 PropertyName : IdentifierName StringLiteral NumericLiteral ObjectLiteral : { } { PropertyNameAndValueList } { PropertyNameAndValueList , } PropertyName: Identifier StringLiteral NumericLiteral ObjectLiteral: { } { PropertyNameAndValueList}

  26. 保留字 • Deywords: • debugger • Reserved Words: • class enum extends super const export import • Reserved Words (Strict Mode): • implements let private public yield interface package protected static

  27. 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

  28. 谈谈Harmony • 正在社区讨论中 • http://wiki.ecmascript.org/doku.php?id=harmony:proposals • 有可能是: • 原生对象的API增加 • 新的类型 • 语法的大更新:关键字、对象直接量 • python + coffee + ruby

  29. 原生对象API扩展 • Number: • Number.isFinite(n) • Number.isNaN(n) • Number.isInteger(n) • Number.toInteger(str) • RegExp: • ‘y’ flag:sticky模式,固定lastIndex • 更加符合Web使用的转义效果

  30. 原生对象API扩展 • String: • String.prototype.repeat(count) • String.prototype.startsWith(s) • String.prototype.endsWith(s) • String.prototype.contains(s) • String.prototype.toArray() • Math: • 改进Math.random

  31. 原生对象API扩展 • Function: • 更严格的toString实现。 • Object: • Object.is(x, y):相当于equals • Object.create改进:仅value的descriptor简化为{ key: value }形式

  32. 新的类型 • Map & Set • Map是可以以object为key的object hash • get | set | has | delete • Set是不能有重复元素的Array • add | has | delete • WeakMap • key会被回收的Map • 用于解决内存泄露问题

  33. 新的类型 - Proxy • Proxy: • 万能工厂?万能拦截器? • getOwnPropertyDescriptor • getPropertyDescriptor • getOwnPropertyNames • getPropertyNames • defineProperty • delete • fix

  34. 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] • 赋值+取值+遍历

  35. Proxy Let’s MVC

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

  37. 新的语法 • 变量声明: • 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); }

  38. 新的语法 • 默认参数值: • function add(x = 0, y = 0) { /* … */ } • 不定量参数: • function sum(x, …others) { /* … */ } • 数组解开传参: • sum(1, 2, …array) • -> sum.apply(this, [1, 2].concat(array)

  39. 新的语法 • Generator • function* • yield

  40. 新的语法 • 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])]

  41. 新的语法 • 模块化 • module | export | import • 类化 • class | extends • 访问权限 • public | private • private name generator

  42. 可能会有的 • 异步编程语法支持(Promise) • var x = yield $.getJSON(url); print(x); • Map的字面量 • (x: 1, y: 2) • 重载[]运算 • Proxy已经可以完成

  43. exit(0);

More Related