js Proxyの原理詳細

4287 ワード

何が代理モードですか?
現実生活の実例を紹介する
私たちはユーザーとしてどのように家の善し悪しを評価しますか?住宅手続きなどの煩雑なものがありますか?明らかにユーザーはこのようにしたくないです。ユーザーが最も関心を持っているのは、結果として、ユーザーが家に対して需要を出したり、対等な価値のお金を提供したりすれば、満足できる家が得られるということです。
誰がユーザーのために一連の煩わしい家を買う過程を解決しますか?もちろん「不動産屋」です。不動産開発経営と消費の需給市場において、取引先の評価、取引、代理、コンサルティングなどのサービスとサービスを提供する機関が不動産仲介の役割を果たしています。
判例と関連して代理パターンの定義を理解する。
場合によっては、1つのオブジェクトが他のオブジェクトを直接参照することができないか、または、プロキシオブジェクトは、クライアントとターゲットオブジェクトとの間で仲介の役割を果たすことができる。
代理モードは他のユーザーに代理を提供するもので、ユーザーは家を買う具体的な過程を知らないで、ユーザーはどのように満足のいく結果を得るべきかに関心を持っています。代理はこの家を買う過程を完成することが必要です。
何がProxyですか
Proxyがサポートするブロック操作は多くの中にあります。現在はgetとsetとsetに対してのみ言います。
  • get方法:ブロック対象属性の読み取り;
  • set方法:ブロック対象属性の設定。
  • get(target,propKey,receiver)
    Personオブジェクトを定義し、これはProxyによってプロキシされ、外部からProxyオブジェクトを通じてPersonオブジェクトを訪問する。
    
    var person = {
        name: "kongsam",
        age: 21,
        hobbies: [
            "   ",
            "  ",
            "   "
        ]
    }
    
    Proxyオブジェクトを実装し、Personオブジェクトに対する外界の操作を遮断するために使用されます。
    
    var proxy = new Proxy(person, {
        get: function (target, property) {
              //   target property,         。
              console.log("target = ", target);
              console.log("property = ", property);
              //                      。
              if (property in target) {
                    return target[property];
              } else {
                    //                     ,    。
                    throw new ReferenceError('Property "' + property + '"    。');
              }
        },
    });
    
    プロxy.name操作を行うと、Personオブジェクトは既にProxyによってプロキシされているので、Proxyのインスタンスオブジェクトを通じてPersonに存在する属性にアクセスするたびに、get方法を呼び出し、get方法は対象属性の読み取りを遮断するものである。
    get:functionの2つのパラメータtargetとpropertyがそれぞれ受信した情報を図に示すように。

    プロキシオブジェクトを介してPersonオブジェクトに存在する属性には何の異常も発生しません。存在しない属性にアクセスすると何が発生しますか?

    何ですか?存在しない属性にアクセスすると異常が発生しますか?
    これは、外部からのPersonオブジェクトへのアクセスは、Proxyによって設定されたブロック層を通過しなければならず、ブロック層は外部へのアクセスをフィルタリングしたり書き換えたりする仕組みを提供しているからです。
    
    //                      。
    if (property in target) {
        return target[property];
    } else {
        //                     ,    。
        throw new ReferenceError('Property "' + property + '"    。');
    }
    
    if文はブロック層の具体的な操作で、外部へのアクセスをフィルタリングし、書き換えます。いいえ、アクセスが存在しない属性はundefinedに戻ります。

    set(target,propKey,value,receiver)
    相変わらずPersonオブジェクトです。この時、私は新しい需要があります。つまり、age属性を修正する時、値は150を超えてはいけません。整数です。
    Proxyオブジェクトのset方法を追加します。
    
    var proxy = new Proxy(person, {
        set: function (target, property, value) {
              //   target、property value,         。
              console.log("target = ", target);
              console.log("property = ", property);
              console.log("value = ", value);
              if (property === "age") {
                    if (!Number.isInteger(value)) {
                      throw new TypeError("age      !");
                    }
                    if (value > 150) {
                      throw new RangeError("age      150!");
                    }
              }
        },
    });
    
    proxy.age=100を実行すると、setの3つのパラメータがそれぞれ受信した情報は下図のようになります。

    setメソッドは、ある属性の割り当て操作をブロックするために使用されます。私は、ageの割り当て操作が条件を満たしていない場合、何が発生しますか?

    明らかに、異常を投げます。
    締め括りをつける
    Proxyはブロック層であり、ブロックされた対象を与え、外部からの訪問はブロック層を通じて、Proxyの例示的な対象を訪問しなければならない。Proxyを通じて外部訪問のためにフィルタリングと書き換えを行います。例えば、賦課時に条件を満たす必要があります。
    エージェントの中には、has、deleteProperty、ownKeys、getOwnPropertyDescriptorなど、さまざまな状況をブロックするための方法があります。
    以上はjs Proxyの原理の詳しい内容です。js Proxyに関する資料は他の関連記事に注目してください。