初入ES6-Proxy和Reflect

BakerJ 發布于2019-08-21 16:53 / 1001人閱讀

摘要：用于修改某些操作的默認行為和訪問器屬性的行為類似在對象的前面多一層代理，對象字面量中定義屬性的特性方法，訪問器屬性此時屬性被定義為訪問器屬性不一樣的寫法中是用代理的寫法第一個參數是對象，第二個是要操作的方法對象也有兩個屬性，一個是目標對象，

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 智和網絡智和網絡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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