ES6 のプロキシとは何ですか?プロキシの詳細分析-jsチュートリアル-php.cn

この記事の内容は、ES6 のプロキシとは何ですか? Proxy の詳細な分析は、参考になると思います。

プロキシとは中国語で代理という意味です。この単語は他のプログラミング言語でも同様の意味を持ちます。

それは何ですか

プロキシはコンストラクターです。 js のコンストラクターの典型的な特徴は、最初の文字が大文字であることです。新しい Proxy (元のオブジェクト、{proxy list}) 形式でオブジェクトを作成します。作成されたオブジェクトは、プロキシオブジェクトと呼ばれます。
つまり:

プロキシオブジェクト = 新しいプロキシ (元のオブジェクト, {プロキシリスト})

このような追加のプロキシオブジェクトが生成される理由は、元のオブジェクトを保持できるためです。新しい関数をプロキシオブジェクトに追加するか、特定の関数を変更します。元のオブジェクトは、適切な時点でロールバックできます。デザインパターンにおけるエージェントパターンと比較して理解することができます。

使用形式

var obj;
var proxyObj = new Proxy(obj, {
    对obj的操作1: 函数1，
    对obj的操作2: 函数2，
    ...
    
})

ログイン後にコピー

入門例

Proxyの基本デモ

var obj = {name:'fan',age:34}
console.info(obj.name)

var proxyObj = new Proxy(obj,{
    get:function(target,key,receiver){console.info(target,key,receiver); return 'no'}
})

console.info(proxyObj.name) 
console.info(proxyObj.abc)

ログイン後にコピー

説明は次のとおりです:

proxy オブジェクトは、obj オブジェクトに基づいて作成された新しいオブジェクトです。
proxyObj.name は、プロキシオブジェクトの name 属性を取得します。 .オペレーターは自動的に get() メソッド を呼び出します。これは非常に重要です。 js では、オブジェクトは順序付けされていないプロパティのコレクションです。オブジェクトには属性のみがあり、他には何もありません。たとえば、配列オブジェクト arr の sort メソッド: arr.sort() の呼び出しについてはよく話されます。 object (より厳密には) の場合、sort はオブジェクトの属性です (arr.__proto__)。 length 属性と比較すると、sort 属性の属性値は関数なので、この関数を実行するにはその後に () を追加します。 length 属性は数値なので、() を追加せずにそのまま使用できます。もう一度強調しておきますが、オブジェクトの操作では get が自動的に呼び出されます。もちろん、普段使っているときにはこのことに気づきません。
新しい Proxy の 2 番目のパラメーターでは、get メソッドが明確に設定されています。proxyObj の属性にアクセスすると、ターゲット、キー、レシーバーの値が出力され、何も出力されません。一律に返却されます。したがって、proxyObj.name と proxyObj.abc はどちらも no になります。

これを書いて、元のオブジェクトとプロキシオブジェクトの間にはどのような関係があると思いますか?なぜ

エージェント と呼ばれるのですか?

エージェントの役割を理解する

エージェントオブジェクトは、スターのエージェントとして理解できます。

外界 <----> 原对象；
外界 <----> 代理对象 <------> 原对象；

ログイン後にコピー

要件を改善するための例として上記のコードを取り上げます。誰かが obj の名前を尋ねた場合は、その人に直接伝え、obj の年齢を尋ねた場合は 5 歳下の年齢を返します。

var obj = {name:'fan',age:34}
console.info(obj.age)           // 34
var proxyObj = new Proxy(obj,{
    get:function(target,key,receiver){
        console.info(target === obj);           //true
        console.info(receiver === proxyObj);    //true
        if('age' === key){
            return target[key] - 5;
        }
        else{
            return target[key]
        }
    }
})

console.info(proxyObj.age)  // 34- 5 = 29

ログイン後にコピー

説明は次のとおりです:

get 関数の 3 つのパラメーター: ターゲット、キー、レシーバー。 target は元のオブジェクト j、keys は現在の属性名、receiver はプロキシオブジェクトです。 get メソッドでは任意のカスタム処理を実行できます。

プロキシオブジェクトと元のオブジェクトの関係

var arr = [2,1]
var proxyArr = new Proxy(arr,{} )
proxyArr.push(3);
console.info(arr) // [2,1,3]
console.info(arr === proxyArr) // false
arr.sort();
console.info(proxyArr[0]) // 1

ログイン後にコピー

上記のコードでは、このプロキシオブジェクトは特別な操作を実行しません。有名人のマネージャーは、外界からの情報を有名人自身に伝えるという受動的な仕事をしていると理解されています。したがって、proxyArr で実行される操作は arr に直接影響します。

同様に、arr に対する操作も proxyArr に影響します。

ただし、注意してください: proxyArr と arr は 2 つの異なるオブジェクトです: arr !== proxyArr。

次のように考えられるかもしれません。なぜ proxyArr はプッシュメソッドを直接使用できるのでしょうか?理由は次のとおりです:

proxyArr.__proto__ === arr.__proto__ === Array.prototype

ログイン後にコピー

前の式が真である理由は、新しいプロキシの遺伝子によって決まります。つまり、元のオブジェクトがプロキシされます。

プロキシリスト

新規プロキシの第二引数に設定できるプロキシ属性は以下の通りです。

var proxyObj = new Proxy(obj, {

    get: function(tagert,key,receiver){},
    set: function(tagert,key,receiver){},
    has: function(tagert,key){},
    deleteProperty: function(tagert,key){},
    ownKeys: function(tagert){},
    getOwnPropertyDescriptor: function(tagert,key){},
    defineProperty: function(tagert,key,desc){},
    preventExtensions: function(tagert){},
    getPrototypeOf: function(tagert){},
    isExtensible: function(tagert){},
    setPrototypeof: function(tagert,proto){},
    apply: function(tagert,obj,args){},
    construct: function(tagert,args){},
    
})

ログイン後にコピー

get() プロキシの適用

配列の添え字に負の値を許可する

#js では、有効な配列テーブルは 0 から始まります。

var arr = [1,2,3];
console.info(arr[0])  // 1
console.info(arr[-1]) // undefined
console.info(arr[100]) // undefined

ログイン後にコピー

次のテーブルが範囲外である場合、または負の値がある場合、得られる結果はエラーではなく未定義であることに注意してください。

以下の表に示すように、配列が負の値を取ることができることを期待します。ルールは次のとおりです。

var arr = [1,2,3];

var proxyArr = new Proxy(arr,{
    get: (target,prop)=>{
        let index = Number(prop);
        if(index < 0){
            prop = target.length + index;
        }
        return target[prop];
        
    }
})
console.info(arr[-1]);      // undefined
console.info(proxyArr[-1]); // 3

ログイン後にコピー

注:

function myArr(...args){
    var arr = new Array(...args);

    var proxyArr = new Proxy(arr,{
        get: (target,key)=>{
            let index = Number(key);
            if(index < 0){
                key = target.length + index;
            }
            return target[key];

        }
    })
    return proxyArr;
}
var obj = myArr([1,2,3]);
console.info(obj[0],obj[-1])

ログイン後にコピー

チェーン操作

var double = n => n*2;
var pow2 = n => n*n;
var half = n => n/ 2;
var add1 = n => n+1;

function pipe (num){
    let funs = []
    let obj = new Proxy({},{
        get:function(target,prop){
            if(prop === 'end'){
                return funs.reduce((val,currentfn)=>currentfn(val),num);
            }else{
                funs.push(window[prop])
            }
            return obj;
        }
    })

    return obj;
};

console.info( pipe(4).double.pow2.end);
console.info( pipe(4).pow.double.pow2.add1.end);

ログイン後にコピー

以上がES6 のプロキシとは何ですか?プロキシの詳細分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。