ECMAScriptEdition5 小试张立理zhanglili01@baidu.com                  感谢教主
什么是ECMAScript由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言• Javascript• Jscript• ActionScript版本        发表日期    描述3         1999年...
现有支持度 Firefox4+ | Chrome11+ | IE10PP2 NodeJS(V8) Safari5 – 仅部分 Opera11.5 – 基本无实现   http://test262.ecmascript.org/   ...
ECMAScript5特性 新增、改进的API 更严谨、强大的语法 全新的概念 更多的细节
新增API   Object.create                        Date.now   Object.defineProperty                Array.isArray   Object.g...
先来一个题 varx = 123; delete x; // ?? window.y   = 123; delete y; // ?? Why?
属性描述符 是用于解释某一个被命名的属性具体操作规则  的特性集。 属性描述符中的对应每个字段名都会有一个值。  其中任何一个字段都可以缺省或显式的设置。 属性描述符还会被进一步以字段的实际用途来  分类成--数据属性描述符和访问器属性描...
数据属性 & 访问器属性 Data Descriptor      Accessor Descriptor [[Value]]           [[Get]] [[Writable]]        [[Set]] [[Enume...
数据属性 & 访问器属性 Object.defineProperty(o,   p, descriptor)
数据属性 & 访问器属性 Getter   & Setter in Object Initializer
再来看一段代码      javascript is prototype based      class oriented programming      language      Why Class?
彻底基于原型 很多人觉得javascript不舒服、恶心、语法怪 异,是因为你学的第一个语言不是javascript, 因为你接触的第一种面向对象的实现方案不是 基于原型,而你又没有胆量完全抛开以前的所 有,把javascript作为一门全新...
彻底基于原型 Object.create(proto,   properties)                            •   Pros:                            •   No class, N...
彻底基于原型 继承?
一些细节 varo = Object.create(null); console.log(o + ‘ is created’);                             What happens? ToPrimitive...
对象的内部属性[[Extensible]] Object.preventExtensions(o)
密封 & 冻结 Object.seal(o)    Object.freeze(o) 不能添加属性           不能添加属性 不能删除属性           不能删除属性 不能修改属性描述符        不能修改属性描述...
继续看代码      IE          Firefox     Chrome   Safari      Operax     undefined   undefined   hack     undefined   undefined[...
严格模式 更严格的语法检测 更明确的对象扩展原则 更确定的错误检测机制 更严格的对象绑定机制
严格模式 ECMAScript           v3 – 15.3.4.3    If thisArg is null or undefined, the called function is passed the global    ...
严格模式   不允许访问callee和callee.caller。   索引器对应的属性,仅仅是传递的参数值的拷贝,并不存在与    形参的动态关联性。   callee和caller的特性被设置为[[Configurable:false...
严格模式 通过指令序言(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 Reg...
Obejct Initializer的细节  ECMAScript v3                   ECMAScript v5PropertyName :                  PropertyName : Identif...
保留字 Deywords:    debugger Reserved   Words:    class enum extends super const export     import Reserved   Words (Str...
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=ha     rmony:proposals 有可能是:    原生对象的API增加    新的类型    语法...
原生对象API扩展 Number:    Number.isFinite(n)    Number.isNaN(n)    Number.isInteger(n)    Number.toInteger(str) RegExp: ...
原生对象API扩展 String:    String.prototype.repeat(count)    String.prototype.startsWith(s)    String.prototype.endsWith(s) ...
原生对象API扩展 Function:    更严格的toString实现。 Object:    Object.is(x, y):相当于equals    Object.create改进:仅value的descriptor简    ...
新的类型 Map   & Set    Map是可以以object为key的object hash      get   | set | has | delete    Set是不能有重复元素的Array      add   | h...
新的类型 - Proxy Proxy:    万能工厂?万能拦截器?    getOwnPropertyDescriptor    getPropertyDescriptor    getOwnPropertyNames    ge...
Proxy 简单实现拦截:   has: function(name) -> boolean   hasOwn: function(name) -> boolean   get: function(receiver, name) -> ...
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...
新的语法 默认参数值:    function add(x = 0, y = 0) { /* … */ } 不定量参数:    function sum(x, …others) { /* … */ } 数组解开传参:    sum(...
新的语法 Generator    function*    yield
新的语法 Array      Comprehensions    执行      add(user)     for user of database.all(‘user’)    过滤      print(x)   for (x...
新的语法 模块化    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);
Upcoming SlideShare
Loading in …5
×

Ecma script edition5-小试

1,131 views
1,017 views

Published on

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,131
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ecma script edition5-小试

  1. 1. ECMAScriptEdition5 小试张立理zhanglili01@baidu.com 感谢教主
  2. 2. 什么是ECMAScript由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言• Javascript• Jscript• ActionScript版本 发表日期 描述3 1999年12月 我们所认识的版本4 放弃 关于语言的复杂性出现分歧,被放弃5 2009年12月 增加多项改进Harmony 社区讨论中 将以ECMAScript6发布
  3. 3. 现有支持度 Firefox4+ | Chrome11+ | IE10PP2 NodeJS(V8) Safari5 – 仅部分 Opera11.5 – 基本无实现 http://test262.ecmascript.org/ http://kangax.github.com/es5-compat-table/
  4. 4. ECMAScript5特性 新增、改进的API 更严谨、强大的语法 全新的概念 更多的细节
  5. 5. 新增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
  6. 6. 先来一个题 varx = 123; delete x; // ?? window.y = 123; delete y; // ?? Why?
  7. 7. 属性描述符 是用于解释某一个被命名的属性具体操作规则 的特性集。 属性描述符中的对应每个字段名都会有一个值。 其中任何一个字段都可以缺省或显式的设置。 属性描述符还会被进一步以字段的实际用途来 分类成--数据属性描述符和访问器属性描述符。
  8. 8. 数据属性 & 访问器属性 Data Descriptor Accessor Descriptor [[Value]]  [[Get]] [[Writable]]  [[Set]] [[Enumerable]]  [[Enumerable]] [[Configurable]]  [[Configurable]]
  9. 9. 数据属性 & 访问器属性 Object.defineProperty(o, p, descriptor)
  10. 10. 数据属性 & 访问器属性 Getter & Setter in Object Initializer
  11. 11. 再来看一段代码 javascript is prototype based class oriented programming language Why Class?
  12. 12. 彻底基于原型 很多人觉得javascript不舒服、恶心、语法怪 异,是因为你学的第一个语言不是javascript, 因为你接触的第一种面向对象的实现方案不是 基于原型,而你又没有胆量完全抛开以前的所 有,把javascript作为一门全新的、和java和c 完全没有关系的语言来看,承认自己的无知, 而后如新生婴儿一般求知。
  13. 13. 彻底基于原型 Object.create(proto, properties) • Pros: • No class, No new • Property Descriptor • prototype based • Cons: • No constructor
  14. 14. 彻底基于原型 继承?
  15. 15. 一些细节 varo = Object.create(null); console.log(o + ‘ is created’);  What happens? ToPrimitive -> toString -> null.toString 没有任何规范说对象的[[prototype]]不能为 null或undefined Object.prototype | Function.prototype
  16. 16. 对象的内部属性[[Extensible]] Object.preventExtensions(o)
  17. 17. 密封 & 冻结 Object.seal(o) Object.freeze(o) 不能添加属性  不能添加属性 不能删除属性  不能删除属性 不能修改属性描述符  不能修改属性描述符  不能修改属性的值  相当于常量
  18. 18. 继续看代码 IE Firefox Chrome Safari Operax undefined undefined hack undefined undefined[0] hack ‘’ hack hack hack[1] ‘’ ‘’ 123 ‘’ ‘’
  19. 19. 严格模式 更严格的语法检测 更明确的对象扩展原则 更确定的错误检测机制 更严格的对象绑定机制
  20. 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. 21. 严格模式 不允许访问callee和callee.caller。 索引器对应的属性,仅仅是传递的参数值的拷贝,并不存在与 形参的动态关联性。 callee和caller的特性被设置为[[Configurable:false]]。 arguments以及arguments.callee、arguments.caller、 arguments.callee.caller不允许被重新赋值。
  22. 22. 严格模式 通过指令序言(Directive Prologues)进入
  23. 23. 严格模式 不能给未定义的属性赋值,会产生TypeError eval和arguments相当于关键字 八进制数字直接量和八进制转义序列取消 eval拥有单独执行环境 delete会产生TypeError
  24. 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. 25. Obejct Initializer的细节 ECMAScript v3 ECMAScript v5PropertyName : PropertyName : Identifier IdentifierName StringLiteral StringLiteral NumericLiteral NumericLiteralObjectLiteral : ObjectLiteral : {} {} { PropertyNameAndValueList } { PropertyNameAndValueList } { PropertyNameAndValueList , }
  26. 26. 保留字 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
  27. 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. 28. 谈谈Harmony 正在社区讨论中  http://wiki.ecmascript.org/doku.php?id=ha rmony:proposals 有可能是:  原生对象的API增加  新的类型  语法的大更新:关键字、对象直接量  python + coffee + ruby
  29. 29. 原生对象API扩展 Number:  Number.isFinite(n)  Number.isNaN(n)  Number.isInteger(n)  Number.toInteger(str) RegExp:  ‘y’ flag:sticky模式,固定lastIndex  更加符合Web使用的转义效果
  30. 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. 31. 原生对象API扩展 Function:  更严格的toString实现。 Object:  Object.is(x, y):相当于equals  Object.create改进:仅value的descriptor简 化为{ key: value }形式
  32. 32. 新的类型 Map & Set  Map是可以以object为key的object hash  get | set | has | delete  Set是不能有重复元素的Array  add | has | delete WeakMap  key会被回收的Map  用于解决内存泄露问题
  33. 33. 新的类型 - Proxy Proxy:  万能工厂?万能拦截器?  getOwnPropertyDescriptor  getPropertyDescriptor  getOwnPropertyNames  getPropertyNames  defineProperty  delete  fix
  34. 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. 35. Proxy Let’s MVC
  36. 36. 新的类型- Iterator • import • iterator • next • for…of
  37. 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. 38. 新的语法 默认参数值:  function add(x = 0, y = 0) { /* … */ } 不定量参数:  function sum(x, …others) { /* … */ } 数组解开传参:  sum(1, 2, …array)  -> sum.apply(this, [1, 2].concat(array)
  39. 39. 新的语法 Generator  function*  yield
  40. 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. 41. 新的语法 模块化  module | export | import 类化  class | extends 访问权限  public | private  private name generator
  42. 42. 可能会有的 异步编程语法支持(Promise)  var x = yield $.getJSON(url); print(x); Map的字面量  (x: 1, y: 2) 重载[]运算  Proxy已经可以完成
  43. 43. exit(0);

×