Compartilhamento de tecnologia

Explicação detalhada do ES6 Refletir (3)

2024-07-12

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

O objeto Reflect, assim como o objeto Proxy, é uma nova API fornecida pelo ES6 para operar objetos. Os objetos refletidos são projetados para 4 finalidades.

  1. Coloque alguns métodos do objeto Object que são obviamente internos à linguagem (como Object.defineProperty) no objeto Reflect. Neste estágio, alguns métodos são implantados em objetos Object e Reflect, e novos métodos no futuro serão implantados apenas em objetos Reflect. Em outras palavras, os métodos internos da linguagem podem ser obtidos a partir do objeto Reflect.
  2. Modifique os resultados de retorno de alguns métodos Object para torná-los mais razoáveis. Por exemplo, Object.defineProperty(obj, name, desc) gerará um erro quando a propriedade não puder ser definida, enquanto Reflect.defineProperty(obj, name, desc) retornará 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. Deixe as operações de objetos se tornarem comportamentos funcionais. Algumas operações de objeto são imperativas, como name in obj e delete obj[name], mas Reflect.has(obj, name) e Reflect.deleteProperty(obj, name) as transformam em comportamentos funcionais.
// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true
  • 1
  • 2
  • 3
  • 4
  1. Os métodos do objeto Reflect correspondem aos métodos do objeto Proxy um a um. Contanto que seja um método do objeto Proxy, o método correspondente pode ser encontrado no objeto Reflect. Isso permite que o objeto Proxy chame facilmente o método Reflect correspondente para completar o comportamento padrão e servir como base para modificar o comportamento. Em outras palavras, não importa como o Proxy modifique o comportamento padrão, você sempre poderá obter o comportamento padrão no 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

O método Proxy intercepta o comportamento de atribuição de atributos do objeto de destino. Ele usa o método Reflect.set para atribuir valores às propriedades do objeto, garantindo que o comportamento original seja concluído e, em seguida, implanta funcionalidades adicionais.

Métodos comumente usados:

Reflect.get(target, propertyKey[, receiver]): Obtenha as propriedades do objeto.
Reflect.set(target, propertyKey, value[, receiver]): Defina as propriedades do objeto.
Reflect.has(target, propertyKey): Determine se a propriedade existe no objeto.
Reflect.deleteProperty(target, propertyKey): Exclui as propriedades do objeto.
Reflect.ownKeys(target): Retorna um array de todas as propriedades do próprio objeto.
Reflect.getOwnPropertyDescriptor(target, propertyKey): Obtenha o descritor da propriedade do objeto.
Reflect.defineProperty(target, propertyKey, atributos): Defina ou modifique as propriedades do objeto.
Reflect.preventExtensions(target): Impede que o objeto seja estendido.
Reflect.isExtensible(target): Determine se o objeto é extensível.
Reflect.getExtension(target): Obtenha o protótipo do objeto.
Reflect.setPrototypeOf(target, protótipo): Defina o protótipo do objeto.

Exemplo 1: Usando 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

Exemplo 2: Usando 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

Exemplo 3: Usando Reflect.has

let obj = { name: "Alice" };

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

Exemplo 4: Usando 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

Exemplo 5: Usando Reflect.ownKeys

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

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

Exemplo 6: Usando 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

Exemplo 7: Usando Reflect.isExtensible

let obj = { name: "Alice" };

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

Exemplo 8: Usando 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

O objeto Reflect fornece um conjunto de métodos correspondentes às armadilhas Proxy, tornando a interceptação de operações JavaScript mais intuitiva e conveniente. O uso do Reflect garante consistência e comportamento esperado das operações, especialmente quando condições de falha ou erros precisam ser capturados explicitamente.