1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

修改object/proxy

This commit is contained in:
Ruan Yifeng 2015-02-05 23:08:48 +08:00
parent d3fa544cea
commit aa30945f1b
3 changed files with 50 additions and 2 deletions

View File

@ -75,6 +75,19 @@ function do_something() {
上面代码在声明foo之前就使用这个变量结果会抛出一个错误。
这也意味着typeof不再是一个百分之百安全的操作。
```javascript
if (1) {
typeof x; // ReferenceError
let x;
}
```
上面代码中由于块级作用域内typeof运行时x还没有声明所以会抛出一个ReferenceError。
注意let不允许在相同作用域内重复声明同一个变量。
```javascript

View File

@ -590,7 +590,7 @@ obj.time // 35
上面代码中proxy对象是obj对象的原型obj对象本身并没有time属性所有根据原型链会在proxy对象上读取该属性导致被拦截。
对于没有设置拦截的操作,则直接落在目标函数上,按照原先的方式产生结果。
对于没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。
下面是另一个拦截读取操作的例子。
@ -617,6 +617,39 @@ proxy.age // 抛出一个错误
上面代码表示如果访问目标对象不存在的属性会抛出一个错误。如果没有这个拦截函数访问不存在的属性只会返回undefined。
利用proxy可以将读取属性的操作get转变为执行某个函数。
```javascript
var pipe = (function () {
var pipe;
return function (value) {
pipe = [];
return new Proxy({}, {
get: function (pipeObject, fnName) {
if (fnName == "get") {
return pipe.reduce(function (val, fn) {
return fn(val);
}, value);
}
pipe.push(window[fnName]);
return pipeObject;
}
});
}
}());
var double = function (n) { return n*2 };
var pow = function (n) { return n*n };
var reverseInt = function (n) { return n.toString().split('').reverse().join('')|0 };
pipe(3) . double . pow . reverseInt . get
// 63
```
上面代码设置Proxy以后达到了将函数名链式使用的效果。
除了取值函数getProxy还可以设置存值函数set用来拦截某个属性的赋值行为。假定Person对象有一个age属性该属性应该是一个不大于200的整数那么可以使用Proxy对象保证age的属性值符合要求。
```javascript

View File

@ -25,6 +25,7 @@
## 语法点
- Kyle Simpson, [For and against `let`](http://davidwalsh.name/for-and-against-let): 讨论let命令的作用域
- kangax, [Why `typeof` is no longer “safe”](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15): 讨论在块级作用域内let命令的变量声明和赋值的行为
- Nick Fitzgerald, [Destructuring Assignment in ECMAScript 6](http://fitzgeraldnick.com/weblog/50/): 详细介绍解构赋值的用法
- Nicholas C. Zakas, [Understanding ECMAScript 6 arrow functions](http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/)
- Jack Franklin, [Real Life ES6 - Arrow Functions](http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/)
@ -48,6 +49,7 @@
- Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法实现数据对象与DOM对象的双向绑定
- Axel Rauschmayer, [Symbols in ECMAScript 6](http://www.2ality.com/2014/12/es6-symbols.html): Symbol简介
- Axel Rauschmayer, [Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy详解
- Daniel Zautner, [Meta-programming JavaScript Using Proxies](http://dzautner.com/meta-programming-javascript-using-proxies/)使用Proxy实现元编程
## Iterator和Generator