Nouvelles fonctionnalités d'ES6 : explication détaillée du code objet Reflect en JavaScript

Introduction à Reflect :

L'objet Reflect n'a pas été implémenté dans mon nœud (v4.4.3), ni babel (6.7.7). Oui, ff prend en charge Proxy et Reflect depuis longtemps. Si vous souhaitez que Node prenne en charge Reflect, vous pouvez installer Harmony-Reflect ;

Reflect n'est pas un constructeur. Lorsque vous souhaitez l'utiliser, appelez-le directement. via Reflect.method(). Reflect a Les méthodes sont similaires à celles de Proxy, et la plupart des méthodes natives Object Reflect ont été réimplémentées.

Pourquoi utiliser Reflect

Voici quelques raisons pour lesquelles vous devriez utiliser Reflect Adresse de traduction : Reflect, traduite grossièrement :

1 : Valeurs de retour plus utiles : Reflect en a. méthodes identiques aux méthodes Object dans ES5, telles que : Reflect.getOwnPropertyDescriptor et Reflect.defineProperty. Cependant, si Object.defineProperty(obj, name, desc) est exécuté avec succès, il renverra obj, ainsi que les erreurs provoquées. pour d'autres raisons. Reflect .defineProperty ne retournera que false ou true pour indiquer si la propriété de l'objet est définie. Le code suivant peut être refactorisé :

try {
  Object.defineProperty(obj, name, desc);
  // property defined successfully
} catch (e) {
  // possible failure (and might accidentally catch the wrong exception)
}

Refactorisé comme ceci :

if (Reflect.defineProperty(obj, name, desc)) {
  // success
} else {
  // failure
}

Le reste des méthodes, par exemple, Relect.set, Reflect.deleteProperty, Reflect.preventExtensions, Reflect.setPrototypeOf, peuvent toutes être refactorisées

2 : Opération de fonction, si vous souhaitez déterminer si un obj ; a une définition ou hérite du nom de l'attribut, dans ES5 Jugez de cette façon : name in obj; ou supprimez un attribut : delete obj[name]. Bien qu'ils soient faciles à utiliser, très courts et très clairs, ils doivent être encapsulés dans un. class lorsqu'il est utilisé ;

Il y a Reflect, il l'encapsule pour vous, Reflect.has(obj, name), Reflect.deleteProperty(obj, name);

3 : Une fonctionnalité plus fiable méthode d'exécution : dans ES, vous devez exécuter une fonction f et lui transmettre un ensemble d'arguments de paramètres. Si vous souhaitez lier ceci, vous devez l'écrire comme ceci :

f.apply(obj, args)

Mais f s'applique. peut être redéfini comme l'application propre à l'utilisateur, donc c'est toujours comme ça. Il est plus fiable d'écrire :

Function.prototype.apply.call(f, obj, args)

Le code ci-dessus est trop long et difficile à comprendre. Avec Reflect, nous pouvons le raccourcir, plus concis et clair :

Reflect.apply(f, obj, args)

4 : Constructeur sous forme de paramètres variables : Imaginez que vous souhaitiez instancier un constructeur avec des paramètres de longueur indéfinie. Dans ES5, on peut utiliser des symboles d'expansion, qui peuvent être. écrit comme ceci :

var obj = new F(...args)

Mais dans ES5 Dans ES5, les caractères d'extension ne sont pas pris en charge, nous ne pouvons donc utiliser que F.apply ou F.call pour passer différents paramètres. Malheureusement, F est un constructeur, ce qui est un constructeur. c'est une arnaque. Mais avec Reflect, on est en ES5 Cela peut s'écrire ainsi :

var obj = Reflect.construct(F, args)

5 : Ceci contrôle l'accesseur ou le lecteur : En ES5, si vous souhaitez lire les attributs d'un élément. ou définir les attributs, vous devez faire ceci :

var name = ... // get property name as a string
obj[name] // generic property lookup
obj[name] = value // generic property update

Les méthodes Reflect.get et Reflect.set nous permettent de faire la même chose, et elles ajoutent un paramètre supplémentaire récepteur, nous permettant de définir le contexte setter et getter de l'objet :

var name = ... // get property name as a string
Reflect.get(obj, name, wrapper) // if obj[name] is an accessor, it gets run with `this === wrapper`
Reflect.set(obj, name, value, wrapper)

Accès Le conteneur ne souhaite pas utiliser sa propre méthode, mais souhaite la rediriger vers le wrapper :

var obj = {
    set foo(value) { return this.bar(); },
    bar: function() {
        alert(1);
    }
};
var wrapper = {
    bar : function() {
        console.log("wrapper");
    }
}
Reflect.set(obj, "foo", "value", wrapper);

6 : Éviter l'accès direct à __proto__ : ES5 fournit Object.getPrototypeOf(obj) pour accéder au prototype de l'objet, ES6 fournit également

et Reflect.setPrototypeOf(obj, newProto). Il s'agit d'une nouvelle méthode pour accéder et définir le prototype d'un objet : Reflect.getPrototypeOf(obj)

Utilisation de Reflect.apply

Reflect .apply est en fait le remplaçant de Function.prototype.apply() dans ES5 Trois paramètres sont requis pour exécuter Reflect.apply

<.>Le premier paramètre est : La fonction qui doit être exécutée ;

Le deuxième paramètre est : Le contexte qui doit être utilisé pour exécuter la fonction

Le troisième paramètre est : C'est un tableau ou un pseudo- ; array, qui sera utilisé comme paramètre pour exécuter la fonction

<script>
let fn = function() {
    this.attr = [0,1,2,3];
};
let obj = {};
Reflect.apply(fn, obj, [])
console.log(obj);  
</script>

DEMO de Reflect.apply :

<script>
Reflect.apply(Math.floor, undefined, [1.75]); // 输出：1;
Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]); // 输出："hello"
Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index; //输出： 4
Reflect.apply("".charAt, "ponies", [3]); // 输出："i"
</script>

Reflect peut être utilisé conjointement avec Proxy :

{
    var  Fn = function(){
    };
    Fn.prototype.run = function() {
        console.log( "runs out" );
    };
    var ProxyFn  = new Proxy(Fn, {
        construct (target ,arugments) {
            console.log("proxy constructor");
            var obj = new target(...arugments);
            //Reflect.apply的使用方法;
            Reflect.apply(target.prototype.run, obj, arugments);
            return obj;
        }
    });
    new ProxyFn ();  //会先输出: "proxy constructor" ； 再输出： runs out
}

Reflect.construct() Utilisation :

Reflect.construct est en fait un constructeur d'instanciation.Il est implémenté sous la forme de passage de paramètres.La méthode d'exécution est différente, mais l'effet est en fait le même.Le premier paramètre de construct est le constructeur et le deuxième paramètre est le constructeur. pseudo-tableaux composés de paramètres. La méthode d'utilisation de base est :

Donc Reflect.consturct est le même que le nouveau constructeur, du moins jusqu'à présent..

var Fn = function(arg) {
    this.args = [arg]
};
console.log( new Fn(1), Reflect.construct(Fn,[1]) ); // 输出是一样的

var d = Reflect.construct(Date, [1776, 6, 4]);
d instanceof Date; // true
d.getFullYear(); // 1776
//所以Reflect.consturct和new 构

Nous pouvons passer le troisième paramètre à Reflect.construct. Le troisième paramètre est une super classe. Le nouvel élément héritera de cette super classe

<script>
function someConstructor() {}
var result = Reflect.construct(Array, [], someConstructor);
Reflect.getPrototypeOf(result); // someConstructor.prototype
Array.isArray(result); // true
//or
var Fn = function() {
    this.attr = [1];
};
var Person = function() {
};
Person.prototype.run = function() {
};
console.log( Reflect.construct(Fn, [], Person) );
</script>

Nous pouvons donc utiliser ceci. tableau, hérite du tableau, mais possède également ses propres méthodes ;

var Fn = function() {
    Array.apply(this, arguments);
    this.shot = ()=> {
        console.log("heheda");
    };
};
var arr = Reflect.construct(Fn, [])

Utilisation de Reflect.defineProperty;

Reflect.defineProperty renvoie une valeur booléenne Ajout d'attributs. et les valeurs d'attribut à un objet par affectation directe renvoient un objet entier si l'ajout échoue, une erreur sera générée

Utilisez Reflect.defineProperty pour ajouter des valeurs ;

<script>
var obj = {};
if( Reflect.defineProperty(obj, "x", {value : 7 }) ) {
    console.log("added success");
}else{
    console.log("添加失败");
};
</script>

如果我们执行preventExtensions， 通过Object.defindProperty定义新属性报错了， 但是通过Reflect.defineProperty没有报错， 返回了一个false的值：

var obj = {};
Object.preventExtensions(obj);
Object.defineProperty(obj, "x" , {
    value: 101,
    writable: false,
    enumerable: false,
    configurable: false
});// 直接抛错了;
console.log( Reflect.defineProperty(obj, "x", {value:101}) ) //返回false：

如果通过直接赋值的方式， 无论是否正确赋值， 都返回设置的值， 除非我们手动确认对象的属性值是否设置成功；

<script>
var obj = {};
Object.preventExtensions(obj);
console.log( obj.aa = 1 ); //输出：1；
console.log(obj.aa) //输出：undefined；
</script>

Reflect.deleteProperty的使用：

Reflect.deleteProperty和Reflect.defineProperty的使用方法差不多， Reflect.deleteProperty和 delete obj.xx的操作结果是一样， 区别是使用形式不同：一个是操作符，一个是函数调用；

Reflect.deleteProperty(Object.freeze({foo: 1}), "foo"); // false
delete Object.freeze({foo: 1}).foo; //输出：false；

Reflect.get()方法的使用

这个方法的有两个必须的参数： 第一个为obj目标对象， 第二个为属性名对象， 第三个是可选的，是作为读取器的上下文(this);

var obj = {};
obj.foo = 1;
console.log( obj.foo ); //输出：1;
console.log( Reflect.get(obj, "foo") ) //输出：1;

如果Reflect.get有第三个参数的话, 第三个参数会作为读取器的上下文：

var Reflect = require('harmony-reflect');

var obj = {
    "foo" : 1,
    get bar() {
        return this.foo;
    }
};
var foo = {};
foo.foo = "heheda";
console.log(Reflect.get(obj, "bar", foo));

Reflect.getOwnPropertyDescritptor()方法的使用：

通过Reflect.getOwnPropertyDescritptor获取属性描述：

Reflect.getOwnPropertyDescriptor({x: "hello"}, "x");
//也可以这样获取：
Object.getOwnPropertyDescriptor({x:"1"},"x");
//这两个的区别是一个会包装对象， 一个不会：
Reflect.getOwnPropertyDescriptor("hello",0); //抛出异常
Object.getOwnPropertyDescriptor("hello",0); //输出： {value: "h", writable: false, enumerable: true, configurable: false}

Reflect.getPrototypeOf()方法的使用：

Reflect.getPrototypeOf和Object.getPrototypeOf是一样的, 他们都是返回一个对象的原型

Reflect.getPrototypeOf({}); // 输出：Object.prototype
Reflect.getPrototypeOf(Object.prototype); // 输出：null
Reflect.getPrototypeOf(Object.create(null)); // 输出： null

Reflect.has的使用

Reflect.has这个方法有点像操作符：in ， 比如这样： xx in obj;

<script>
Reflect.has({x:0}, "x") //输出： true；
Reflect.has({y:0}, "y") //输出：true
； var obj = {x:0}; console.log( "x" in obj); 
var proxy = new Proxy(obj, { has : function(target, args) { console.log("执行has方法"); 
return Reflect.has(target,...args); } }); 
console.log( "x" in proxy); //输出：true； console.log(Reflect.has(proxy, "x")) //输出：true； </script>

这个demo的obj相当于变成了一个方法了， 没他什么用 ， 只是利用了他的has方法：

obj = new Proxy({}, {
    has(t, k) { return k.startsWith("door"); }
});
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false

Reflect.isExtensible()的使用

// 现在这个元素是可以扩展的；
var empty = {};
Reflect.isExtensible(empty); // === true

// 使用preventExtensions方法， 让这个对象无法扩展新属性；
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

// 这个对象无法扩展新属性， 可写的属性依然可以改动
var sealed = Object.seal({});
Reflect.isExtensible(sealed); // === false

// 这个对象完全被冻结了
var frozen = Object.freeze({});
Reflect.isExtensible(frozen); // === false

Reflect.isExtensible和Object.isExtensible的区别是， 如果参数不对，一个会抛错， 另一个只是返回true或者false：

Reflect.isExtensible(1);
// 抛错了: 1 is not an object
Object.isExtensible(1);
// 返回false;

Reflect.ownKeys()方法的使用：

Reflect.ownKeys， Object可没有ownKeys方法, Reflect.ownKeysz他的作用是返回对象的keys;

console.log(Reflect.ownKeys({"a":0,"b":1,"c":2,"d":3})); //输出 ：["a", "b", "c", "d"]
console.log(Reflect.ownKeys([])); // ["length"]
var sym = Symbol.for("comet");
var sym2 = Symbol.for("meteor");
var obj = {[sym]: 0, "str": 0, "773": 0, "0": 0,
    [sym2]: 0, "-1": 0, "8": 0, "second str": 0};
Reflect.ownKeys(obj); //输出：/ [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]

Reflect.ownKeys的排序是根据: 先显示数字， 数字根据大小排序，然后是 字符串根据插入的顺序排序， 最后是symbol类型的key也根据插入插入顺序排序;

出现这中排序是因为，你给一个对象属性赋值时候， 对象的key的排序规则就是先数字， 在字符串， 最后是symbol类型的数据；

Reflect.preventExtensions()的使用方法：

Object也有preventExtensions方法， 和Reflect.preventExtensions()有一点区别， 如果Reflect.preventExtensions参数不是对象会抛错；

var empty = {};
Reflect.isExtensible(empty); // === true

// 执行preventExtensions后的对象可以修改；
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

Reflect.preventExtensions(1);
// TypeError: 1 is not an object
Object.preventExtensions(1);
//不会抛错， 会返回：1

Reflect.set()

Reflect.set方法和get是差不多的；

var obj = {};
Reflect.set(obj, "prop", "value"); // 输出：true
console.log( obj.prop ); // 输出："value"

var arr = ["duck", "duck", "duck"];
Reflect.set(arr, 2, "goose"); // true
console.log( arr[2] ); // "goose"

Reflect.set(arr, "length", 1); // true
console.log( arr );// ["duck"];

Reflect.set(obj)相当于 Reflect.set(obj, undefined, undefined);

var obj = {};
Reflect.set(obj); // 输出：true
//以上的代码相当于 Reflect.set(obj, undefined, undefined);
Reflect.getOwnPropertyDescriptor(obj, "undefined");
// { value: undefined, writable: true, enumerable: true, configurable: true }

Reflect.set也可以有第四个参数， 这个参数会作为stter的this;

var obj = {
    value : 10,
    set key( value ) {
        console.log("setter");
        this.value =  value;
    },
    get key() {
        return this.value;
    }
};
Reflect.set(obj,"key","heheda", obj);
console.log(obj);

Reflect.setPrototypeOf()

Reflect.setPrototypeOf()方法和Object.setPrototypeOf差不多一样样的， 会给对象设置原型， 就是更改对象的__proto__属性了…;

Reflect.setPrototypeOf({}, Object.prototype); // 输出true

// 给该对象数组[[Prototype]] 为null.
Reflect.setPrototypeOf({}, null); // true
// 此时的obj.__proto__为undefine

//把对象冻结以后重新设置[[prototype]]
Reflect.setPrototypeOf(Object.freeze({}), null); // false

// 如果原型链循环依赖的话就会返回false.
var target = {};
var proto = Object.create(target);
Reflect.setPrototypeOf(target, proto); // false

 以上就是ES6新特性：JavaScript中的Reflect对象代码详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！