初入ES6-Proxy和Reflect

BakerJ 发布于2019-08-21 16:53 / 973人阅读

摘要：用于修改某些操作的默认行为和访问器属性的行为类似在对象的前面多一层代理，对象字面量中定义属性的特性方法，访问器属性此时属性被定义为访问器属性不一样的写法中是用代理的写法第一个参数是对象，第二个是要操作的方法对象也有两个属性，一个是目标对象，

1,Proxy用于修改某些操作的默认行为和访问器属性的行为类似,在对象的前面多一层代理，

    const obj = {                            //对象字面量
        name : "obama",
        age : 73
    }
obj.name //obama
//ES5中定义属性的特性方法，访问器属性Object.defineProperty();

    Object.defineProperty(obj,name",{
        get :function(){
            return "hello presdent";
        }
    });
    obj;//{age : 73}此时name属性被定义为访问器属性
    obj.name // "hello presdent";
    var newObj = {
       _name : "obama",
        get name(){            //不一样的写法
            return  "hello presdent";
        }
    }
     //ES6中是用Proxy代理的写法
     var proxy = new Proxy(targetn,handler(target,property))   //第一个参数是对象，第二个是要操作的方法对象,也有两个属性，一个是目标对象，一个是属性
     var obj = {
     name : "obama",
     age : 73
     };
     var fn = {
         get : function(obj){
             alert("hello presdent")
         }
     }

Proxy支持的拦截操作
1，get(),用于读取某个属性的操作

var person = {
    name : "obama"
};
var proxy = new Proxy(person,{
    get : function(target,property){
        if(property in target){
            return target[property]
        }else{
            throw new ReferenceError("you input wrong property")
        }
    }
})
proxy.name  //obama;
proxy.age //Uncaught ReferenceError: you input wrong property
person.age //undefind
//此属性可以继承
var pro = Object.create(proxy);
pro.name //obama;

2,set()，用于拦截属性的赋值操作

var obj = {
    set : function(obj,prop,value){
        if(prop ==="age"){
            if(Number.isInteger(value)){
                obj[prop] = value;
            }else{
                throw new Error("not a number")
            }
        }
        else{
            obj[prop] = value;
        }
    }
};
var person = new Proxy({},obj);
person.age  = 12;//12;
person.age = "test"    //Uncaught Error: not a number
//可以使用这个方法不允许访问内部带有下划线的变量
function validat(key,action){
    if(key[0] === "_"){
        throw new Error("不允许访问内部变量")
    }
}
var obj = {
    get(target,key){
        validat(key,"get");
        return target[key]
    },
    set(target,key,value){
        validat(key,"set");
        return target[key] = value;
    }
};
var target = {};
var proxy = new Proxy(target,obj);

3，apply()拦截调用和apply和call操作
4，has()隐藏某些属性，不被in操作符发现

var handle = {
    has(target,key){
        if(key[0] === "_"){
            return false;
        }
        return key in target
    }
};
var obj = {
    name : "obama"
}
var proxy = new Proxy(obj,handle);

5，construct()拦截new命令

var Fn = function(){return "the world"};
var handle = {
    construct : function(){
        throw new Error("不能使用NEW操作符")
    }
};
var proxy = new Proxy(Fn,handle);
var newp = new proxy;//Uncaught Error: 不能使用NEW操作符
var newp = proxy()    //the world
//同样如果返回的不是对象也会报错

6，deleteProperty()拦截删除操作，如果返回的不是true就无法删除

var handle = {
    deleteProperty(target,key){
        return false;        //返回错误或者false都不能删除
    }
};
var obj ={
    name : "obama"
};
var presdent = new Proxy(obj,handle);
delete presdent.name         //false;

7，enumerate()拦截for in 循环

8，getOwnPropertyDescriptor(),
9,getPrototypeOf()
10,isExtensible(),
11,Own.keys()拦截Object.keys()方法
12，preventExtensions();
13,setProtypeOf();
14,Proxy.revocable()返回一个可以取消的Proxy实例

var handle = {};
var obj = {};
var s= Proxy.revocable(obj,handle);//返回一个对象，
s    //{proxy: Proxy, revoke: ƒ}
s.proxy.name = "obama";        //obama
s.revoke();
s.proxy.name        //Uncaught TypeError: Cannot perform "get" on a proxy

Reflect对象，包含一些特殊的属性，默认是对象的原始行为，Proxy改写的就是这些行为

GPU云服务器云服务器小白初入 reflect go-reflect 智和网络智和网络

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88857.html

ES6-Proxy与数据劫持(12)

摘要：我们先以框架出发，探索其中数据劫持的奥秘。针对对象在数据劫持这个问题上，可以被认为是的升级版。技术支持监测数组的等方法操作，支持对象属性的动态添加和删除，极大的简化了响应化的代码量。随着前端界的空前繁荣，各种框架横空出世，包括各类mvvm框架百家争鸣，比如Anglar、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是...

li21 2019-08-26 13:48 评论0 收藏0
angular2初入眼帘之－搭个环境

angular2是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声，angular2在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...

everfight 2019-08-19 18:05 评论0 收藏0
[译] 实例解析 ES6 Proxy 使用场景

摘要：在下文中，首先我会介绍的使用方式，然后列举具体实例解释的使用场景。如果简单地区分和的使用场景，可以概括为的核心作用是控制外界对被代理者内部的访问，的核心作用是增强被装饰者的功能。文章永久链接地址：http://pinggod.com/2016/%E5%AE%9E%E4%BE%8B%E8%A7%A3%E6%9E%90-ES6-Proxy-%E4%BD%BF%E7%94%A8%E5%9C...

Rainie 2019-08-21 10:55 评论0 收藏0
初入ES6-Symbol

摘要：原始的数据类型和一样是第七种数据类型创建只能用函数来创建，而且不能用可以有参数，用来区分每个只能显试的转化此处是字符串不能在转为数字报错不能隐式的转化报错作为对象的的属性名称主要用在可计算的属性名称，即使带有中括号的属性名称一般是私有不可以 Symbol原始的数据类型和string, boolean,null,undefined,number一样,是JS第七种数据类型 //创建Symb...

ivyzhang 2019-08-21 16:52 评论0 收藏0
angular2初入眼帘之－多components协作

摘要：我们使用了模式书写，并引入了思想，这些以前只在里见到的设计，现在里也有体现，并且在本章中会着重讲解多的协作。如果之前写过，那对于这种书写方式一定无比熟悉。每次数据的变更，无论是还是，都将变化冒泡到，然后由再向下逐级推送各组件是否重绘。前集回顾在上一章里我们讲了如何在angular2下开发一个component(还没做的赶紧去学吧)。我们使用了Unidirectional Data ...

dreamans 2019-08-19 18:08 评论0 收藏0