advertisement

ES5 introduction

50 %
50 %
advertisement
Information about ES5 introduction
Engineering

Published on September 26, 2014

Author: otakustay

Source: slideshare.net

Description

Introduction to key features of ECMAScript 5
advertisement

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

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

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

数据属性& 访问器属性 Data Descriptor  [[Value]]  [[Writable]]  [[Enumerable]]  [[Configurable]] Accessor Descriptor  [[Get]]  [[Set]]  [[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)  不能添加属性  不能删除属性  不能修改属性描述符  不能修改属性的值  相当于常量

继续看代码 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 PropertyName : Identifier StringLiteral NumericLiteral ObjectLiteral : { } { PropertyNameAndValueList } ECMAScript v5 PropertyName : IdentifierName StringLiteral NumericLiteral ObjectLiteral : { } { 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  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=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使用的转义效果

原生对象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(Dict)的字面量  (x: 1, y: 2)或[x: 1, y: 2]  Tuple  (1, 2, 3)  重载[]运算  Proxy已经可以完成

exit(0);

Add a comment

Comments

 | 29/01/15

Related presentations

Discrete element method modelling (DEM) has proven over many years to be a powerfu...

Segregation Testing to confirm packer isolation and well integrity. Monitor w...

A small presentation of History matching and a case study on it. Also on Gas mater...

Manual 2 pavco cad

Manual 2 pavco cad

November 2, 2014

CONSTRUCION

Tire sua duvidas a respeito da implementação da NR 12 Converse com um especialis...

Related pages

A re-introduction to JavaScript (JS tutorial) - JavaScript ...

Why a re-introduction? Because JavaScript is notorious for being the world's most misunderstood programming language. It is often derided as being a toy ...
Read more

Annotated ES5

This is not the normative ECMAScript Language specification. ... //github.com/es5/es5.github.io. ... Introduction # ...
Read more

Introduction | MobX

Introduction. MobX is a battle tested library that makes state management simple and scalable by transparently ... MobX runs on any ES5 environment, ...
Read more

ECMA-262-5 in detail. Chapter 0. Introduction. – ds.laboratory

We have finished analysis of the most important parts and theoretical aspects concerning 3rd edition of the ECMA-262 specification, i.e. standard devoted ...
Read more

ES6 In Depth: An Introduction ★ Mozilla Hacks – the Web ...

ES6 In Depth: An Introduction. ... the committee members agreed to publish a relatively modest ES5 and then proceed to work on more substantial new features.
Read more

Introduction to ECMAScript 6 - coenraets

Introduction to ECMAScript 6 Christophe Coenraets @ccoenraets. Christophe Coenraets. Boston, MA. ... ES5 Function var greeting = function(message, name) ...
Read more

Introducing ECMAScript 5.1 - Dev.Opera

Introducing ECMAScript 5.1. ... Introduction. ECMAScript 5.1 (or just ES5) ... ES5 also introduces a strict variant of the language known as “strict mode”.
Read more

Introduction to Basics of Angular 1.4 newRouter - CodeProject

Introduction to Basics of Angular 1.4 newRouter. ... router.es5.js available at router.es5.js; ... Introduction to Angular.js.
Read more

ECMA-262 specification

ECMA-262 specification
Read more