Condivisione della tecnologia

ES6 Rifletti Spiegazione dettagliata (3)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

L'oggetto Reflect, come l'oggetto Proxy, è una nuova API fornita da ES6 per il funzionamento degli oggetti. Gli oggetti Reflect sono progettati per 4 scopi.

  1. Inserisci alcuni metodi dell'oggetto Object che sono ovviamente interni al linguaggio (come Object.defineProperty) nell'oggetto Reflect. In questa fase, alcuni metodi vengono distribuiti sia sugli oggetti Object che su quelli Reflect e i nuovi metodi in futuro verranno distribuiti solo sugli oggetti Reflect. In altre parole, i metodi interni del linguaggio possono essere ottenuti dall'oggetto Reflect.
  2. Modificare i risultati restituiti di alcuni metodi Object per renderli più ragionevoli. Ad esempio, Object.defineProperty(obj, name, desc) genererà un errore quando la proprietà non può essere definita, mentre Reflect.defineProperty(obj, name, desc) restituirà false.
// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  1. Lascia che le operazioni degli oggetti diventino comportamenti funzionali. Alcune operazioni sugli oggetti sono imperative, come name in obj ed delete obj[name], ma Reflect.has(obj, name) e Reflect.deleteProperty(obj, name) le trasformano in comportamenti funzionali.
// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true
  • 1
  • 2
  • 3
  • 4
  1. I metodi dell'oggetto Reflect corrispondono uno a uno ai metodi dell'oggetto Proxy Finché si tratta di un metodo dell'oggetto Proxy, il metodo corrispondente può essere trovato sull'oggetto Reflect. Ciò consente all'oggetto Proxy di chiamare facilmente il metodo Reflect corrispondente per completare il comportamento predefinito e servire come base per modificare il comportamento. In altre parole, indipendentemente da come Proxy modifica il comportamento predefinito, puoi sempre ottenere il comportamento predefinito su Reflect.
Proxy(target, {
  set: function(target, name, value, receiver) {
    var success = Reflect.set(target, name, value, receiver);
    if (success) {
      console.log('property ' + name + ' on ' + target + ' set to ' + value);
    }
    return success;
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Il metodo Proxy intercetta il comportamento di assegnazione degli attributi dell'oggetto di destinazione. Utilizza il metodo Reflect.set per assegnare valori alle proprietà dell'oggetto, assicurando che il comportamento originale sia completato, quindi distribuisce funzionalità aggiuntive.

Metodi comunemente usati:

Reflect.get(target, propertyKey[, receiver]): ottiene le proprietà dell'oggetto.
Reflect.set(target, propertyKey, value[, receiver]): imposta le proprietà dell'oggetto.
Reflect.has(target, propertyKey): determina se la proprietà esiste sull'oggetto.
Reflect.deleteProperty(target, propertyKey): elimina le proprietà dell'oggetto.
Reflect.ownKeys(target): restituisce un array di tutte le proprietà dell'oggetto stesso.
Reflect.getOwnPropertyDescriptor(target, propertyKey): ottiene il descrittore della proprietà dell'oggetto.
Reflect.defineProperty(target, propertyKey, attributi): definisce o modifica le proprietà dell'oggetto.
Reflect.preventExtensions(target): impedisce l'estensione dell'oggetto.
Reflect.isExtensible(target): determina se l'oggetto è estensibile.
Reflect.getExtension(target): ottieni il prototipo dell'oggetto.
Reflect.setPrototypeOf(target, prototipo): imposta il prototipo dell'oggetto.

Esempio 1: utilizzo di Reflect.get

let obj = { name: "Alice", age: 25 };
let propName = "name";

console.log(Reflect.get(obj, propName)); // 输出:Alice
console.log(Reflect.get(obj, "gender")); // 输出:undefined
  • 1
  • 2
  • 3
  • 4
  • 5

Esempio 2: utilizzo di Reflect.set

let obj = { name: "Alice" };

// 设置属性
console.log(Reflect.set(obj, "age", 30)); // 输出:true

console.log(obj); // 输出:{ name: "Alice", age: 30 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Esempio 3: utilizzo di Reflect.has

let obj = { name: "Alice" };

console.log(Reflect.has(obj, "name")); // 输出:true
console.log(Reflect.has(obj, "age"));  // 输出:false
  • 1
  • 2
  • 3
  • 4

Esempio 4: utilizzo di Reflect.deleteProperty

let obj = { name: "Alice", age: 30 };

// 删除属性
console.log(Reflect.deleteProperty(obj, "age")); // 输出:true

console.log(obj); // 输出:{ name: "Alice" }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Esempio 5: utilizzo di Reflect.ownKeys

let obj = { name: "Alice", age: 30 };

console.log(Reflect.ownKeys(obj)); // 输出:["name", "age"]
  • 1
  • 2
  • 3

Esempio 6: utilizzo di Reflect.preventExtensions

let obj = { name: "Alice" };

// 防止对象被扩展
console.log(Reflect.preventExtensions(obj)); // 输出:true

// 尝试添加新属性
console.log(Reflect.set(obj, "age", 30)); // 输出:false
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Esempio 7: utilizzo di Reflect.isExtensible

let obj = { name: "Alice" };

console.log(Reflect.isExtensible(obj)); // 输出:true
  • 1
  • 2
  • 3

Esempio 8: utilizzo di Reflect.getPrototypeOf e Reflect.setPrototypeOf

let proto = { sayHello: function() { console.log("Hello!"); }};
let obj = Object.create(proto);

console.log(Reflect.getPrototypeOf(obj) === proto); // 输出:true

// 设置新原型
let newProto = { sayGoodbye: function() { console.log("Goodbye!"); }};
Reflect.setPrototypeOf(obj, newProto);

console.log(obj.sayGoodbye); // 可以访问新原型上的方法
obj.sayGoodbye(); // 输出:Goodbye!
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

L'oggetto Reflect fornisce una serie di metodi corrispondenti alle trappole proxy, rendendo l'intercettazione delle operazioni JavaScript più intuitiva e conveniente. L'utilizzo di Reflect garantisce la coerenza e il comportamento previsto delle operazioni, soprattutto quando è necessario acquisire esplicitamente condizioni di fallimento o errori.