Partage de technologie

ES6 Refléter une explication détaillée (3)

2024-07-12

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

L'objet Reflect, comme l'objet Proxy, est une nouvelle API fournie par ES6 pour les objets opérationnels. Les objets Reflect sont conçus à 4 fins.

  1. Placez certaines méthodes de l'objet Object qui sont évidemment internes au langage (telles que Object.defineProperty) sur l'objet Reflect. À ce stade, certaines méthodes sont déployées à la fois sur les objets Object et Reflect, et les nouvelles méthodes à l'avenir seront déployées uniquement sur les objets Reflect. Autrement dit, les méthodes internes du langage peuvent être obtenues à partir de l’objet Reflect.
  2. Modifiez les résultats de retour de certaines méthodes Object pour les rendre plus raisonnables. Par exemple, Object.defineProperty(obj, name, desc) générera une erreur lorsque la propriété ne peut pas être définie, tandis que Reflect.defineProperty(obj, name, desc) renverra 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. Laissez les opérations sur les objets devenir des comportements fonctionnels. Certaines opérations d'objet sont impératives, comme name in obj et delete obj[name], mais Reflect.has(obj, name) et Reflect.deleteProperty(obj, name) les transforment en comportements fonctionnels.
// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true
  • 1
  • 2
  • 3
  • 4
  1. Les méthodes de l'objet Reflect correspondent aux méthodes de l'objet Proxy one-to-one. Tant qu'il s'agit d'une méthode de l'objet Proxy, la méthode correspondante se retrouve sur l'objet Reflect. Cela permet à l'objet Proxy d'appeler facilement la méthode Reflect correspondante pour compléter le comportement par défaut et servir de base pour modifier le comportement. En d’autres termes, quelle que soit la manière dont Proxy modifie le comportement par défaut, vous pouvez toujours obtenir le comportement par défaut sur 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

La méthode Proxy intercepte le comportement d'affectation d'attribut de l'objet cible. Il utilise la méthode Reflect.set pour attribuer des valeurs aux propriétés de l'objet, garantissant que le comportement d'origine est terminé, puis déploie des fonctionnalités supplémentaires.

Méthodes couramment utilisées :

Reflect.get(target, propertyKey[, Receiver]) : récupère les propriétés de l'objet.
Reflect.set(target, propertyKey, value[, Receiver]) : définit les propriétés de l'objet.
Reflect.has(target, propertyKey) : déterminez si la propriété existe sur l'objet.
Reflect.deleteProperty(target, propertyKey) : supprime les propriétés de l'objet.
Reflect.ownKeys(target) : renvoie un tableau de toutes les propriétés de l'objet lui-même.
Reflect.getOwnPropertyDescriptor(target, propertyKey) : récupère le descripteur de la propriété de l'objet.
Reflect.defineProperty(target, propertyKey, attribues) : définir ou modifier les propriétés de l'objet.
Reflect.preventExtensions(target) : empêche l'extension de l'objet.
Reflect.isExtensible(target) : déterminez si l'objet est extensible.
Reflect.getExtension(target) : récupère le prototype de l'objet.
Reflect.setPrototypeOf(target, prototype) : définit le prototype de l'objet.

Exemple 1 : Utilisation de 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

Exemple 2 : Utilisation de 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

Exemple 3 : Utilisation de Reflect.has

let obj = { name: "Alice" };

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

Exemple 4 : Utilisation de 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

Exemple 5 : Utilisation de Reflect.ownKeys

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

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

Exemple 6 : Utilisation de 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

Exemple 7 : Utilisation de Reflect.isExtensible

let obj = { name: "Alice" };

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

Exemple 8 : Utilisation de Reflect.getPrototypeOf et 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'objet Reflect fournit un ensemble de méthodes correspondant aux pièges du proxy, rendant l'interception des opérations JavaScript plus intuitive et plus pratique. L'utilisation de Reflect garantit la cohérence et le comportement attendu des opérations, en particulier lorsque les conditions de défaillance ou les erreurs doivent être capturées explicitement.