preface

In fact, in my opinion, if I Reflect on ES6, I don’t think I’ll use it in my actual job or in my interview. This is also a problem of their own, in the driven learning, but not to independent learning.

So today we’re going to talk about Reflect.

1, an overview of the

Reflect is not a constructor, so it is not created with new.

The purpose of adding this object in ES6 is:

  1. Put some methods that are clearly internal to the language (such as object.defineProperty) on the Reflect Object. Currently, some methods are deployed on both Object and Reflect, and new methods in the future will be deployed only on Reflect. In other words, the Reflect object gives you access to methods inside the language.
  2. Modify the return of some Object methods to make them more reasonable. For example, object.defineProperty (obj, name, desc) will throw an error if the property cannot be defined, while reflect.defineProperty (obj, name, desc) will return false.
  3. Make all Object operations function behavior. Some Object operations are imperative, such as name in obj and delete obj[name], And reflect.has (obj, name) and reflect.deleteProperty (obj, name) make them function behavior.
  4. The methods on the Reflect object correspond to the methods on the Proxy object. As long as the methods on the Proxy object correspond to the methods on the Reflect object. This makes it easy for the Proxy object to call the corresponding Reflect method, completing the default behavior as a basis for modifying the behavior. That is, no matter how Proxy changes the default behavior, you can always get the default behavior on Reflect.
var loggedObj = new Proxy(obj, {

  get(target, name) {

    console.log("get", target, name);

    return Reflect.get(target, name);

  },

  deleteProperty(target, name) {

    console.log("delete" + name);

    return Reflect.deleteProperty(target, name);

  },

  has(target, name) {

    console.log("has" + name);

    return Reflect.has(target, name);

  },

});

Copy the code

In the code above, each Proxy object interception operation (get, DELETE, has), internally calls the corresponding Reflect method, to ensure that the native behavior is executed properly. The job of the addition is to log one line for each operation.

2. Static APIS

Reflect has 13 static apis, most of which do the same thing as methods of the same name on Object objects, and it corresponds one-to-one to methods on Proxy objects.

2.1, Reflect the apply ()

Initiates a call to the target function with the specified argument list. This method takes three arguments, target: the target function. ThisArgument: The this object bound when the target function is called. ArgumentsList: Target The list of arguments passed to the function call. This argument should be an array-like object.

This method is similar to the function.prototype.apply () method in ES5, where reflect.apply () makes the code more accessible.

Function.prototype.apply.call(Math.floor, undefined[1.75]);

Reflect.apply(Math.floor, undefined[1.75]);

Copy the code

2.2, Reflect the construct ()

This method behaves a bit like the new operator constructor, equivalent to running a new Target (… The args). This method takes three arguments, target: the target constructor to be run. ArgumentsList: An array of classes that are arguments to the target constructor call. NewTarget (optional) : This is the constructor property of the prototype object for the newly created object. Refer to the new.target operator, which defaults to target.

class Person {

  constructor(name) {

    this.name = name;

  }

}

let person = new Person("Jack");

/ / equivalent to the

let person = Reflect.construct(Person, ["Jack"]);

Copy the code

2.3, Reflect. DefineProperty ()

It’s basically the same as the object.defineProperty () method, except that it returns a Boolean value. This method takes three arguments, target: the target object. PropertyKey: The name of the property to be defined or modified. Attributes: A description of the attributes to define or modify.

let obj = {};

Object.defineProperty({}, "value", {

  value: "18".

});

/ / equivalent to the

Reflect.defineProperty({}, "value", {

  value: "18".

});

Copy the code

2.4, Reflect. DeleteProperty ()

Allowed to delete attributes. It’s like the delete operator, but it’s a function. This method takes two arguments, target: the target object to delete the property from. PropertyKey: indicates the name of the property to be deleted.

let obj = {

  value: "18".

};

delete obj["value"];

/ / equivalent to the

Reflect.deleteProperty(obj, "value");

Copy the code

2.5, Reflect the get ()

This method is similar to reading properties from an object (target[propertyKey]), but it is done through a function execution. This method takes three arguments, target: the target object to be valued. PropertyKey: specifies the key value of the value to be obtained. Receiver: If a getter is specified in the target object, receiver is the value of this when the getter is called. Note that an error will be reported if the target is not an object.

let obj = {

  value: "18".

};

Reflect.get(obj, "value"); / / 18

// When there is a getter function

let obj = {

  value: "18".

  get foo() {

    return this.a + this.b;

  },

};

let foo = {

  a: 2.

  b: 3.

};

Reflect.get(obj, "foo", foo); / / 5

Copy the code

2.6, Reflect. GetOwnPropertyDescriptor ()

The method and the Object. GetOwnPropertyDescriptor () method is similar. Returns the property descriptor for the given property, if it exists in an object. Otherwise, return undefined. This method takes two arguments, target: the target object on which the property is to be found. PropertyKey: The name of the property that gets its own property descriptor. Note that an error will be reported if the target is not an object.

var myObject = {};

Object.defineProperty(myObject, "hidden", {

  value: true.

  enumerable: false.

});

var theDescriptor = Object.getOwnPropertyDescriptor(myObject, "hidden");

/ / equivalent to the

var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, "hidden");

Copy the code

2.7, Reflect. GetPrototypeOf ()

This method is almost identical to the object.getPrototypeof () method. Returns the Prototype of the specified object (that is, the value of the internal [[Prototype]] property). This method can only take one argument, target: the target object to get the prototype. Note that an error will be reported if the target is not an object.

class MyObj {}

let myObj = new MyObj();

Object.getPrototypeOf(myObj) === MyObj.prototype; // true

/ / equivalent to the

Reflect.getPrototypeOf(myObj) === MyObj.prototype; // true

Copy the code

2.8, Reflect from the ()

It has the same effect as the in operator. This method takes two arguments, target: the target object. PropertyKey: property name. You need to check whether the target object has this property. Note that an error will be reported if the target Object is not of type Object.

let obj = {

  value: "18".

};

"value" in obj; // true

/ / equivalent to the

Reflect.has(obj, "value"); // ture

Copy the code

2.9, Reflect. IsExtensible ()

Determine whether an object is extensible (that is, whether new properties can be added). Similar to its object.isextensible () method, but with a few differences, an error will be reported if the first argument to the method is not an Object (the original value). With object.isextensible (), the first argument of a non-object is cast to an Object. This method takes only one argument, target: the target object to check for extensibility.

let obj = {};

Object.isExtensible(obj); // true

/ / equivalent to the

Reflect.isExtensible(obj); // true

Copy the code

2.10, Reflect. OwnKeys ()

Returns an array of the property keys of the target object itself. This method takes one argument, target: the target object that gets its own property key. Returns an Array of the target object’s own property keys. The return value is equal to the Object. GetOwnPropertyNames (target). The concat (Object. GetOwnPropertySymbols (target).

let myObject = {

  foo: 1.

  bar: 2.

  [Symbol.for("baz")]: 3.

  [Symbol.for("bing")]: 4.

};



Object.getOwnPropertyNames(myObject).concat(

  Object.getOwnPropertySymbols(myObject)

);

/ / equivalent to the

Reflect.ownKeys(myObject); // ['foo', 'bar', Symbol(baz), Symbol(bing)]

Copy the code

2.11, Reflect. PreventExtensions ()

This method prevents new properties from being added to the object (for example, to prevent future extensions to the object from being added to the object). This method is similar to object.preventExtensions (), with some differences. This method takes one argument, target: the target object to block the extension.

let obj = {};

Object.preventExtensions(obj); // Object {}

/ / equivalent to the

Reflect.preventExtensions(obj); // true

Copy the code

2.12, Reflect the set ()

This method sets the name attribute of the target object to value. This method takes four arguments, target: the target object on which the property is set. PropertyKey: indicates the name of the property to be set. Value: indicates the value to be set. Receiver: If a setter is encountered, receiver is the value of this when the setter is called.

let person = {

  name: "Jack".

};

person.name; // 'Jack'

Reflect.set(person, "name"."Luci");

person.name; // 'Luci'

// When there is a setter function

let person = {

  name: "Jack".

  set foo(value) {

    return (this.name = value);

  },

};

let receiverObject = {

  name: "Luci".

};

Reflect.set(person, "foo"."Jhon", receiverObject);

receiverObject.name; // Jhon

Copy the code

2.13, Reflect. SetPrototypeOf ()

This method is the same as the object.setPrototypeof () method. It sets the object’s Prototype (that is, the internal [[Prototype]] property) to another object or null, returning true if the operation succeeds, false otherwise. This method takes two parameters, target: the target object to set the prototype to. Prototype: New prototype for the object (an object or null). An error will be reported if the target is not an object.

const myObj = {};



Object.setPrototypeOf(myObj, Array.prototype);

/ / equivalent to the

Reflect.setPrototypeOf(myObj, Array.prototype);

Copy the code

reference

Ruan Yifeng: Introduction to ECMAScript 6 — Reflect

After the language

I think it’s ok, please give me a thumbs up when I leave, and we can study and discuss together!

Related articles:

  • Take you relearn ES6 | var, let and the difference between const
  • Take you relearn ES6 | Promsie
  • Take you relearn ES6 | Generator
  • Take you relearn ES6 | Async and Await
  • Take you relearn ES6 | Set and Map
  • Take you relearn ES6 | Symbol (more than just a new data type)
  • Take you relearn ES6 | Export (keep in mind that the output is variable)
  • Take you relearn ES6 | proxy and defineProperty

You can also follow my blog and hope to give me a Start on Github, you will find a problem, almost all my user names are related to tomatoes, because I really like tomatoes ❤️!!

The guy who wants to follow the car without getting lost also hopes to follow the public account or scan the qr code below 👇👇👇.

I am a primary school student in the field of programming, your encouragement is the motivation for me to keep moving forward, 😄 hope to refueling together.