Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ES5 introduction

757 views

Published on

Introduction to key features of ECMAScript 5

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

ES5 introduction

  1. 1. ECMAScript Edition5 小试 张立理 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  Object.defineProperty  Object.getPrototypeOf  Object.keys  Object.seal  Object.freeze  Object.preventExtensions  Object.isSealed  Object.isExtensible  Object.getOwnPropertyDescriptor  Object.getOwnPropertyNames  Date.prototype.toISOString  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
  6. 6. 先来一个题  var x = 123;  delete x; // ??  window.y = 123;  delete y; // ?? Why?
  7. 7. 属性描述符  是用于解释某一个被命名的属性具体操作规则 的特性集。  属性描述符中的对应每个字段名都会有一个值。 其中任何一个字段都可以缺省或显式的设置。  属性描述符还会被进一步以字段的实际用途来 分类成--数据属性描述符和访问器属性描述符。
  8. 8. 数据属性& 访问器属性 Data Descriptor  [[Value]]  [[Writable]]  [[Enumerable]]  [[Configurable]] Accessor Descriptor  [[Get]]  [[Set]]  [[Enumerable]]  [[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. 一些细节  var o = 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 Opera x 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 PropertyName : Identifier StringLiteral NumericLiteral ObjectLiteral : { } { PropertyNameAndValueList } ECMAScript v5 PropertyName : IdentifierName StringLiteral NumericLiteral ObjectLiteral : { } { 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(Dict)的字面量  (x: 1, y: 2)或[x: 1, y: 2]  Tuple  (1, 2, 3)  重载[]运算  Proxy已经可以完成
  43. 43. exit(0);

×