欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Proxy對象是什么

這篇文章主要介紹Proxy對象是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)，是一家集策劃、設(shè)計、技術(shù)開發(fā)一體的專業(yè)互聯(lián)網(wǎng)產(chǎn)品服務(wù)公司，致力于為企業(yè)信息化提供驅(qū)動力。技術(shù)團(tuán)隊10年來致力于為客戶提供企業(yè)網(wǎng)站定制，成都手機(jī)網(wǎng)站制作。先后服務(wù)了成百上千客戶，包括各類中小企業(yè)、高校、政府。 創(chuàng)新互聯(lián)將利用公司在過去10年的資源積累，力爭為客戶打造真正革命性的口碑產(chǎn)品！

1、Proxy 對象到底是什么？

Proxy 對象到底是什么呢？Proxy 的意思是 代理，proxy對象的作用是：通過Proxy 創(chuàng)建1個代理對象，然后通過操作代理對象允許你對指定的對象的一些行為進(jìn)行自定義處理。

Proxy(target,handler); Proxy構(gòu)造函數(shù)接收2個對象，第1個參數(shù)就是要處理的對象，第2個參數(shù)就是要自定義處理的方法的合集(也就是個對象)。

很抽象？其實就和js中的Object.defineProperty很像(也就是訪問器屬性,vue2.x的底層就是用它來實現(xiàn)的)。

Object.defineProperty 定義訪問器屬性，可以對某個屬性的讀寫行為進(jìn)行控制，在Proxy中也可以做到，而且Proxy更靈活和強(qiáng)大，它能做到很多訪問器屬性做不到的事情。

比如，監(jiān)聽屬性刪除事件(delete obj.prop;),in 事件('id' in obj;), apply 調(diào)用等。

先來看看，proxy對象有哪些內(nèi)容。

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    var handler = {};
    
    // 此處，我們先不對targetObj的行為進(jìn)行干預(yù)，所以傳個空對象進(jìn)去即可。
    var proxy = new Proxy(targetObj,handler);
    
    console.log(proxy);

看看打印的proxy是什么鬼，如下圖。

Proxy對象是什么

可以看到，proxy對象中，包含了Handler屬性和Target屬性和IsRevoked，它們的值分別是我們傳入的handler以及 targetObj和false。

這個isRevoked表示是否可撤銷，生成可撤銷的proxy對象用Proxy.revocable()方法，具體可去MDN查看文檔。

2、通過Proxy 對象操作原對象

上面我們創(chuàng)建了1個proxy對象，現(xiàn)在我們嘗試通過操作proxy對象來操作原對象，操作proxy對象就和操作原生對象一樣即可。(其實是proxy對象內(nèi)部做了映射。)

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    var handler = {};
    
    // 此處，我們先不對targetObj的行為進(jìn)行干預(yù)，所以傳個空對象進(jìn)去即可。
    var proxy = new Proxy(targetObj,handler);
    
    
    /**
     * 1、讀取及修改屬性，可以看到原來的對象的屬性也被修改了
     */
    console.log(proxy.age);  // 20
    console.log(targetObj.age); // 20
    proxy.age = 22;
    console.log(proxy.age);  // 22
    console.log(targetObj.age); // 22
    
    /**
     * 2、刪除proxy對象的屬性，影響原來的對象的屬性
     */
    console.log(proxy.school);  // 小學(xué)
    console.log(targetObj.school); // 小學(xué)
    delete proxy.age;
    console.log(proxy.school);  // undefined
    console.log(targetObj.school); // undefined

3、set方法和get方法

好，現(xiàn)在我們可以開始干預(yù)原來對象的行為了，具體我們通過實現(xiàn)以下方法達(dá)到干預(yù)對象行為的目的。

  • handler.apply

  • handler.construct       干預(yù)構(gòu)造函數(shù)的new 行為

  • handler.defineProperty  干預(yù)對象的數(shù)據(jù)屬性或者訪問器屬性定義

  • handler.deleteProperty  干預(yù)對象的屬性刪除行為

  • handler.get             干預(yù)對象的屬性讀取行為

  • handler.getOwnProperty  干預(yù)對象的屬性的特征值

  • handler.has             干預(yù)對象的in行為(prop in obj)

  • handler.isExtensible

  • handler.ownKeys

  • handler.set             干預(yù)對象的屬性設(shè)置行為

  • ...

先來干預(yù)get行為(屬性讀取行為)

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    
    var handler = {
        // 定義get方法，get方法可以接收2個參數(shù)，分別是原來的對象及屬性
        get : function(target,prop){
            console.log(`${prop}屬性正在被查看`);
            console.log(targetObj == target); // true
            return target[prop];
        }
    };
    
    var proxy = new Proxy(targetObj,handler);
    
    console.log(proxy.id);
    
    /**
     * 可以看到，打印順序為:
     *  id屬性正在被查看
     *  true
     *  1
     */

接下來把某些屬性變?yōu)?“私有” ，如不允許讀取id屬性

定義set方法，不允許修改id,name,age屬性

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    
    var handler = {
        // 定義get方法，get方法可以接收2個參數(shù)，分別是原來的對象及屬性
        get : function(target,prop){
            if(prop == 'id'){
                return undefined;
            }
            return target[prop];
        },
        // 定義set方法，set方法比get多1個參數(shù)，那就是該屬性修改時的值
        set : function(target,prop,value){
            if(prop == 'id' || prop == 'name' || prop == 'age'){
                console.log(`不允許修改${prop}屬性`)
            }else{
                target[prop] = value;
            }
        }
    };
    
    var proxy = new Proxy(targetObj,handler);
    
    /**
     * 修改屬性，分別打印
     * 不允許修改id屬性
     * 不允許修改name屬性
     * 不允許修改age屬性
     */
    proxy.id = 2; 
    proxy.name = 'pxh322';
    proxy.age = 23;
    
    proxy.school = '中學(xué)'; // 這個無打印
    
    /**
     * 讀取屬性，可以看到分別打印
     * undefined
     * pxh
     * 20
     * 中學(xué)  // 這個沒有攔截，因此可以修改
     */
    console.log(proxy.id);
    console.log(proxy.name);
    console.log(proxy.age);
    console.log(proxy.school);

4、干預(yù)刪除行為(對delete obj.prop語句生效)

同樣的，我們對刪除對象屬性的行為進(jìn)行干預(yù)，不允許刪除id,name,age屬性。

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    var handler = {
        // 在handler中定義get方法，get方法可以接收2個參數(shù)，分別是原來的對象及屬性
        get : function(target,prop){
            if(prop == 'id'){
                return undefined;
            }
            return target[prop];
        },
        // set方法比get多1個參數(shù)，那就是該屬性修改時的值
        set : function(target,prop,value){
            if(prop == 'id' || prop == 'name' || prop == 'age'){
                console.log(`不允許修改${prop}屬性`)
            }else{
                target[prop] = value;
            }
        },
        /**
         * 這個方法要求返回個boolean值，表示是否刪除成功
         * 如果返回的值不是boolean值，則會進(jìn)行類型轉(zhuǎn)換成boolean值再返回
         */
        deleteProperty : function(target,prop){
            if(prop == 'id' || prop == 'name' || prop == 'age'){
                console.log(`不允許刪除${prop}屬性`);
                return false;
            }else{
                delete target[prop];
                return true;
            }
        }
    };
    
    var proxy = new Proxy(targetObj,handler);
    /**
     * 嘗試刪除id屬性，可以看到打印順序為:
     * 不允許刪除id屬性
     * false
     */
    console.log(delete proxy.id);
    
    /**
     * 刪除school屬性，可以看到打印
     * true
     * undefined
     */
    console.log(delete proxy.school);
    console.log(proxy.school);

5、干預(yù)prop in obj行為(判斷對象是否有某個屬性)

上面我們不允許獲取對象的id值，也不可以修改和刪除，現(xiàn)在我們把它隱藏掉。

    var targetObj = {
        id : 1,
        name : 'pxh',
        age : 20,
        school : '小學(xué)'
    }
    
    var handler = {
        // 在handler中定義get方法，get方法可以接收2個參數(shù)，分別是原來的對象及屬性
        get : function(target,prop){
            if(prop == 'id'){
                return undefined;
            }
            return target[prop];
        },
        // set方法比get多1個參數(shù)，那就是該屬性修改時的值
        set : function(target,prop,value){
            if(prop == 'id' || prop == 'name' || prop == 'age'){
                console.log(`不允許修改${prop}屬性`)
            }else{
                target[prop] = value;
            }
        },
        /**
         * 這個方法要求返回個boolean值，表示是否刪除成功
         * 如果返回的值不是boolean值，則會進(jìn)行類型轉(zhuǎn)換成boolean值再返回
         */
        deleteProperty : function(target,prop){
            if(prop == 'id' || prop == 'name' || prop == 'age'){
                console.log(`不允許刪除${prop}屬性`);
                return false;
            }else{
                delete target[prop];
                return true;
            }
        },
        /**
         * 通過has 方法來控制，返回值也是個boolean，表示對象是否擁有某個屬性
         * 如果返回的值不是boolean值，則會進(jìn)行類型轉(zhuǎn)換成boolean值再返回
         */
        has : function(target,prop){
            if(prop == 'id'){
                return false
            }else{
                return prop in target;
            }
        }
    };
    
    var proxy = new Proxy(targetObj,handler);
    console.log('id' in proxy); // false
    console.log('name' in proxy); // tru

以上是“Proxy對象是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：Proxy對象是什么
網(wǎng)頁地址：http://chinadenli.net/article20/iidgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、搜索引擎優(yōu)化、電子商務(wù)、面包屑導(dǎo)航、服務(wù)器托管、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司