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