Detaillierte Einführung in Proxy in JavaScript (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) über Proxy in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Proxy ermöglicht es uns, die meisten Verhaltensweisen eines Objekts zu überwachen und in sie einzugreifen und individuellere Programmverhaltensweisen zu implementieren.

Verwendung: neuer Proxy (Ziel, Handler).

Proxy erfasst das Verhalten des Programms auf dem entsprechenden Objekt, indem er eine Verhaltensüberwachungsmethode festlegt.

    const obj = {};
    const proxy = new Proxy(obj, {
        // ...
    })

Der Konstruktor von Proxy akzeptiert zwei Parameter. Der erste Parameter ist das Zielobjekt, das gepackt werden muss. Der zweite Parameter ist der Listener, der verwendet wird, um das Verhalten des Zielobjekts zu überwachen um das entsprechende Programmverhalten zu überwachen.
Attribute, Parameter und Überwachungsinhalte abhören

属性值	监听器参数	监听内容
has	(target, prop)	监听 in 语句的使用
get	(target, prop, reciver)	监听目标对象的属性读取
set	(target, prop, value, reciver)	监听目标对象的属性赋值
deleteProperty	(target, prop)	监听 delete 语句对目标对象的删除属性行为
ownKeys	(target)	监听 Object.getOwnPropertyName() 的读取
apply	(target, thisArg, arguments)	监听目标函数(作为目标对象)的调用行为
construct	(target, arguments, newTarget)	监听目标构造函数(作为目标对象)利用 new 而生成实例的行为
getPrototypeOf	(target)	监听 Objext.getPrototypeOf() 的读取
setPrototypeOf	(target, prototype)	监听 Objext.setPrototypeOf() 的调用
isExtensible	(target)	监听 Objext.isExtensible() 的读取
preventExtensions	(target)	监听 Objext.preventExtensions() 的读取
getOwnPropertyDescriptor	(target, prop)	监听 Objext.getOwnPropertyDescriptor() 的调用
defineProperty	(target, property, descriptor)	监听 Object.defineProperty() 的调用

has

Sie können die Has-Abhörmethode für den Proxy-Handler definieren, damit das Abhörprogramm eine Zeichenfolge oder Zahl durch überprüfen kann in-Anweisung Der Prozess, ob es sich um den Eigenschaftsschlüssel einer Eigenschaft im Zielobjekt dieses Proxys handelt.

const p = new Proxy({}, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return true;
    }
})

console.log('foo' in p);
// Checking "foo" is in the target or not
// true

Bei dieser Abhörmethode sind zwei Dinge zu beachten. Wenn diese beiden Situationen auftreten, wird ein TypeError ausgelöst.

1. Wenn das Zielobjekt von anderen Programmen über Object.preventExtensions() deaktiviert wird (das Objekt kann keine neuen Attribute hinzufügen, kann es nur einmal mit den aktuell vorhandenen Attributen arbeiten, einschließlich Lesen und Bedienen und Löschen). gelöscht, kann nicht neu definiert werden) und der überprüfte Eigenschaftsschlüssel im Zielobjekt vorhanden ist, kann die Überwachungsmethode nicht „false“ zurückgeben.

const obj = {foo: 1};

Object.preventExtensions(obj);

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false; 
    }
})

console.log('foo' in p);   
//抛出Uncaught TypeError:

2. Wenn der überprüfte Eigenschaftsschlüssel im Zielobjekt vorhanden ist und die konfigurierbare Konfiguration der Eigenschaft falsch ist, kann die Überwachungsmethode nicht „false“ zurückgeben.

const obj = {};

Object.defineProperty(obj, 'foo', {
    configurable: false,
    value: 10
})

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false;
    }
})

console.log('foo' in p);
//抛出Uncaught TypeError:

get

Getter kann nur bekannte Eigenschaftsschlüssel überwachen, aber nicht alle Verhaltensweisen beim Lesen von Eigenschaften abfangen, während Proxy durch Festlegen der Get-Listening-Methode alle Eigenschaften des Zielobjekts abfangen und stören kann .

const obj = {foo: 1};
const p = new Proxy(obj, {
    get(target, prop){
        console.log(`Program is trying to fetch the property "${prop}".`);
        return target[prop];
    }
})

alert(p.foo);  // Program is trying to fetch the property "foo".
alert(p.something);    // Program is trying to fetch the property "something".

  Auch bei dieser Abhörmethode ist etwas zu beachten: Wenn die konfigurierbaren und beschreibbaren Eigenschaften der Leseeigenschaften des Zielobjekts beide falsch sind, muss der von der Abhörmethode zurückgegebene Endwert mit dem ursprünglichen Eigenschaftswert übereinstimmen des Zielobjekts.

const obj = {};

Object.defineProperty(obj, 'foo', {
    configurable: false,
    value: 10,
    writable: false
})

const p = new Proxy(obj, {
    get(target, prop){
        return 20;
    }
})

console.log(p.foo);

set

 handler.set wird verwendet, um alle Attributzuweisungsverhalten des Zielobjekts zu überwachen. Beachten Sie, dass, wenn eine Eigenschaft des Zielobjekts selbst nicht beschreibbar oder konfigurierbar ist, set den Wert dieser Eigenschaft nicht ändern darf und nur denselben Wert zurückgeben kann, andernfalls wird ein Fehler gemeldet.

const obj = {};
const p = new Proxy(obj, {
    set(target, prop, value){
        console.log(`Setting value "${value}" on the key "${prop}" in the target object`);
        target[prop] = value;
        return true;
    }
})

p.foo = 1;  
// Setting value "1" on the key "foo" in the target object

apply

handler.apply , Proxy stellt der Funktion auch als Zielobjekt Attribute zur Verfügung, um ihr Aufrufverhalten zu überwachen.

const sum = function(...args) {
  return args
    .map(Number)
    .filter(Boolean)
    .reduce((a, b) => a + b);

}

const p = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`Function is being called with arguments [${args.join()}] and context ${thisArg}`);
    return target.call(thisArg, ...args);
  }
})

console.log(p(1, 2, 3));
// Function is being called with arguments [1,2,3] and context undefined
// 6

construct

 handler.construct, Proxy kann die Klasse auch als Ziel-Listening-Objekt verwenden und ihr Verhalten beim Erzeugen neuer Instanzen durch die neue Anweisung überwachen. Dies kann auch als Konstruktor verwendet werden . auf dem Konstruktor.

class Foo{};

const p = new Proxy(Foo, {
    construct(target, args, newTarget){
        return {arguments: args}    // 这里返回的结果会是 new 所得到的实例
    }
});

const obj = new p(1, 2, 3);
console.log(obj.arguments);  // [1, 2, 3]

Ein widerrufbares Proxy-Objekt erstellen

Verwendung: Proxy.revocable(target, handler) : (proxy, revoke).

const obj = {foo: 10};
const revocable = Proxy.revocable(obj, {
    get(target, prop){
        return 20;
    }
})
const proxy = revocable.proxy;
console.log(proxy.foo); // 20
revocable.revoke();
console.log(proxy.foo); 
// TypeError: Cannot perform 'get' on a proxy that has been revoked

Proxy.revocable(target, handler) gibt ein Objekt mit zwei Attributen zurück. Eines der Proxy-Objekte ist das von dieser Funktion generierte widerrufbare Proxy-Objekt und das andere revoke ist das von der Funktion generierte widerrufbare Proxy-Objekt . Entlassungsmethode des Proxy-Objekts.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Proxy in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!