Was ist Proxy in ES6? Detaillierte Analyse von Proxy

Der Inhalt dieses Artikels befasst sich mit der Frage, was Proxy in ES6 ist. Die detaillierte Analyse von Proxy hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Proxy bedeutet Proxy auf Chinesisch. Das Wort hat in anderen Programmiersprachen ähnliche Bedeutungen.

Was ist das?

Proxy ist ein Konstruktor. Das typische Merkmal von Konstruktoren in js ist, dass der erste Buchstabe groß geschrieben wird. Wir erstellen Objekte im neuen Proxy-Format (Originalobjekt, {Proxy-Liste}).
Das heißt:

Proxy-Objekt = neuer Proxy (ursprüngliches Objekt, {Proxy-Liste})

Der Grund, warum ein solches zusätzliches Proxy-Objekt generiert wird, besteht darin, dass das ursprüngliche Objekt beibehalten werden kann Fügen Sie dem Proxy-Objekt neue Funktionen hinzu oder ändern Sie bestimmte Funktionen. Das ursprüngliche Objekt kann zu gegebener Zeit zurückgesetzt werden. Es kann mit dem Agentenmuster in Entwurfsmustern verglichen und verstanden werden.

Verwendungsformat

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

Beispiel für den ersten Schritt

Grundlegende Demonstration von 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)

wird wie folgt erklärt:

• proxy Das Objekt ist ein neues Objekt, das basierend auf dem obj-Objekt erstellt wurde.

• proxyObj.name dient zum Abrufen des Namensattributs des Proxy-Objekts. .操作符会自动去调用get()方法. Das ist sehr wichtig, 在js中，对象是属性的无序集合。对象只有属性，其他什么都没有 Und wir sprechen oft über den Aufruf einer bestimmten Methode eines Objekts: zum Beispiel die Sortiermethode des Array-Objekts arr: arr.sort() Objekt (genauer gesagt ist sort das arr.__proto__-Attribut dieses Objekts). Im Vergleich zum Längenattribut ist der Attributwert des Sortierattributs eine Funktion. Fügen Sie daher () hinzu, um diese Funktion und den Längenwert auszuführen Das Attribut ist ein numerischer Wert, daher ist Add() nicht erforderlich, um es direkt zu verwenden. Nochmals: 对象的.操作，会自动去调用get. Natürlich merken wir das nicht, wenn wir es normalerweise verwenden.

• Im zweiten Parameter des neuen Proxys ist die Get-Methode eindeutig festgelegt: Beim Zugriff auf ein beliebiges Attribut von ProxyObj werden die Werte von Ziel, Schlüssel und Empfänger ausgegeben, und nein wird einheitlich zurückgegeben. Daher erhalten sowohl „proxyObj.name“ als auch „proxyObj.abc“ „Nein“.

Welche Beziehung besteht Ihrer Meinung nach zwischen dem Originalobjekt und dem Proxy-Objekt, wenn Sie dies schreiben? Warum heißt es 代理?

Verstehen Sie die Rolle eines Agenten

Der Agent kann als Agent des Prominenten verstanden werden.

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

Nehmen Sie den obigen Code auch als Beispiel, um die Anforderungen zu verbessern: Wenn jemand nach dem Namen von obj fragt, sagen Sie es der Person direkt; wenn jemand nach dem Alter von obj fragt, geben Sie das Alter um 5 Jahre jünger zurück.

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

wird wie folgt erklärt:

• Die drei Parameter in der Get-Funktion: Ziel, Schlüssel, Empfänger. Ziel ist das ursprüngliche Objekt j, Schlüssel ist der aktuelle Attributname; Empfänger ist das Proxy-Objekt. Sie können jede benutzerdefinierte Verarbeitung in der get-Methode durchführen.

Die Beziehung zwischen dem Proxy-Objekt und dem Originalobjekt

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

Im obigen Code führt dieses Proxy-Objekt keine besonderen Vorgänge aus. Es versteht sich, dass die Manager von Prominenten bei ihrer Arbeit passiv sind: Sie vermitteln die Informationen von der Außenwelt an die Prominenten selbst. Daher wirken sich auf ProxyArr ausgeführte Vorgänge direkt auf arr aus.

In ähnlicher Weise wirken sich Vorgänge auf arr auch auf ProxyArr aus.
Aber bitte beachten Sie: ProxyArr und arr sind zwei verschiedene Objekte: arr !== ProxyArr.

Sie denken vielleicht darüber nach: Warum kann ProxyArr die Push-Methode direkt verwenden? Der Grund ist:

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

Der Grund, warum die vorherige Gleichung wahr ist, wird durch das Gen des neuen Proxys bestimmt: Das ursprüngliche Objekt wird als Proxy verwendet.

Proxy-Liste

Im zweiten Parameter des neuen Proxys können folgende Proxy-Attribute festgelegt werden:

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() Anwendung des Proxys

Array-Indizes dürfen negative Werte sein

In js beginnt die gültige untere Array-Tabelle bei 0.

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

Es ist erwähnenswert, dass das erhaltene Ergebnis undefiniert und kein Fehler ist, wenn die folgende Tabelle außerhalb der Grenzen liegt oder einen negativen Wert hat.

Nachfolgend hoffen wir, dass das Array negative Werte annehmen kann, wie in der Tabelle unten gezeigt. Die Regeln lauten wie folgt:

• -n bedeutet das n-te Element von der Letzte. Beispiel: -1 bedeutet das erste Element vom letzten.

Verwenden Sie Proxy, um das Problem wie folgt zu lösen:

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

Hinweis:

• Number() kann den eingehenden Wert konvertieren in einen numerischen Werttyp umwandeln. Nicht-numerischer Wert –> .

• Wenn es sich um ProxyArr[-1] handelt, ist die Requisite zu diesem Zeitpunkt „-1“, sodass sie in den if-Zweig gelangt: Ändern Sie dabei die Requisite von -1 auf 2 Erzielung der Wirkung der Agentur.

• An diesem Punkt kann ProxyArr als Array verwendet und Methoden wie Sortieren und Push aufgerufen werden. Array.isArray(proxyArr) === true

• Natürlich können Sie es auch weiter in eine Factory-Funktion kapseln.

  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])

Kettenbetrieb

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);

Das obige ist der detaillierte Inhalt vonWas ist Proxy in ES6? Detaillierte Analyse von Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!