Home  >  Article  >  Web Front-end  >  A brief analysis of Reflect's built-in objects in JavaScript (detailed code explanation)

A brief analysis of Reflect's built-in objects in JavaScript (detailed code explanation)

奋力向前
奋力向前forward
2021-08-25 13:16:502373browse

In the previous article "This article explains how to terminate asynchronous requests by routing switching in Vue (with code)", I introduced you to how to terminate asynchronous requests by routing switching in Vue. The following article will help you understand the Reflect built-in objects in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A brief analysis of Reflect's built-in objects in JavaScript (detailed code explanation)

Semantics

Reflect is a built-in object that provides interception of JavaScript operations method. These methods are the same as those of the processor object. Reflect is not a function object, so it is not constructible.

Description

Unlike most global objects, Reflect has no constructor. You cannot use it with a new operator or call a Reflect object as a function. All properties and methods of Reflect are static (just like the Math object).

Compatibility

Chrome: 49

Firefox (Gecko): 42

Other browsers have not yet implemented

Syntax

Reflect.apply(target, thisArgument, argumentsList)

Parameters

target

Target function.

thisArgument target

The this object bound when the function is called.

argumentsList

The list of actual parameters passed in when the target function is called, this parameter should be an array-like object.

Method

Reflect.apply()

Reflect.construct(target, argumentsList[, newTarget])

Static methodReflect.apply()Initiates a call to the target (target) function through the specified parameter list.

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"

Reflect.construct()

Reflect.construct()The method behaves a bit like the new operator constructor, which is equivalent to runningnew target(...args).

var d = Reflect.construct(Date, [1776, 6, 4]);
d instanceof Date; // true
d.getFullYear(); // 1776

Reflect.defineProperty()

Reflect.defineProperty() is a static method that looks like Object.defineProperty ()But it returns a Boolean value

const object1 = {};

if (Reflect.defineProperty(object1, "property1", { value: 42 })) {
  console.log("property1 created!");
  // expected output: "property1 created!"
} else {
  console.log("problem creating property1");
}

console.log(object1.property1);
// expected output: 42

Reflect.deleteProperty()

Static methodReflect.deleteProperty()Allows for deleting attributes. It's a lot like delete operator, but it's a function. Reflect.deletePropertyAllows you to delete properties on an object. Returns a Boolean value indicating whether the attribute was successfully deleted. It is almost the same as the non-strict delete operator.

Reflect.deleteProperty(target, propertyKey)

var obj = { x: 1, y: 2 };
Reflect.deleteProperty(obj, "x"); // true
obj; // { y: 2 }

var arr = [1, 2, 3, 4, 5];
Reflect.deleteProperty(arr, "3"); // true
arr; // [1, 2, 3, , 5]

// 如果属性不存在,返回 true
Reflect.deleteProperty({}, "foo"); // true

// 如果属性不可配置,返回 false
Reflect.deleteProperty(Object.freeze({ foo: 1 }), "foo"); // false

Reflect.get()

Reflect.get The () method works like getting a property from object (target[propertyKey]), but it is executed as a function.

Reflect.get(target, propertyKey[, receiver])

// Object
var obj = { x: 1, y: 2 };
Reflect.get(obj, "x"); // 1

// Array
Reflect.get(["zero", "one"], 1); // "one"

// Proxy with a get handler
var x = { p: 1 };
var obj = new Proxy(x, {
  get(t, k, r) {
    return k + "bar";
  },
});
Reflect.get(obj, "foo"); // "foobar"

Reflect.getOwnPropertyDescriptor()

Static method Reflect.getOwnPropertyDescriptor() is similar to the Object.getOwnPropertyDescriptor() method. Returns the property descriptor for the given property, if present in the object. Otherwise, undefined is returned.

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.getOwnPropertyDescriptor({ x: "hello" }, "x");
// {value: "hello", writable: true, enumerable: true, configurable: true}

Reflect.getOwnPropertyDescriptor({ x: "hello" }, "y");
// undefined

Reflect.getOwnPropertyDescriptor([], "length");
// {value: 0, writable: true, enumerable: false, configurable: false}

Reflect.getPrototypeOf()

Static methodReflect The .getPrototypeOf() and Object.getPrototypeOf() methods are the same. Both return the prototype of the specified object (that is, the value of the internal [[Prototype]] attribute).

Reflect.getPrototypeOf(target)

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

Reflect.has()

Static methodReflect.has () has the same effect as the in operator.

Reflect.has(target, propertyKey)

Reflect.has({ x: 0 }, "x"); // true
Reflect.has({ x: 0 }, "y"); // false

// 如果该属性存在于原型链中,返回true
Reflect.has({ x: 0 }, "toString");

// Proxy 对象的 .has() 句柄方法
obj = new Proxy(
  {},
  {
    has(t, k) {
      return k.startsWith("door");
    },
  }
);
Reflect.has(obj, "doorbell"); // true
Reflect.has(obj, "dormitory"); // false

Reflect.isExtensible()

Static methodReflect .isExtensible()Determines whether an object is extensible (that is, whether new attributes can be added). Similar to its Object.isExtensible() method, but with some differences, see differences for details.

Reflect.isExtensible(target)

// New objects are extensible.
var empty = {};
Reflect.isExtensible(empty); // === true

// ...but that can be changed.
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

// Sealed objects are by definition non-extensible.
var sealed = Object.seal({});
Reflect.isExtensible(sealed); // === false

// Frozen objects are also by definition non-extensible.
var frozen = Object.freeze({});
Reflect.isExtensible(frozen); // === false

//diff Object.isExtensible
Reflect.isExtensible(1);
// TypeError: 1 is not an object

Object.isExtensible(1);
// false

Reflect.ownKeys()

Static methodReflect.ownKeys ()Returns an array consisting of the property keys of the target object itself.

Reflect.ownKeys(target)

const object1 = {
  property1: 42,
  property2: 13,
};

var array1 = [];

console.log(Reflect.ownKeys(object1));
// expected output: Array ["property1", "property2"]

console.log(Reflect.ownKeys(array1));
// expected output: Array ["length"]
Reflect.ownKeys({ z: 3, y: 2, x: 1 }); // [ "z", "y", "x" ]
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) ]
// Indexes in numeric order,
// strings in insertion order,
// symbols in insertion order

Reflect.preventExtensions()

Static methodReflect.preventExtensions () Method prevents new properties from being added to the object (for example: preventing future extensions to the object from being added to the object). This method is similar to Object.preventExtensions(), but has some differences.

Reflect.preventExtensions(target)

// Objects are extensible by default.
var empty = {};
Reflect.isExtensible(empty); // === true

// ...but that can be changed.
Reflect.preventExtensions(empty);
Reflect.isExtensible(empty); // === false

//diff Object.preventExtensions()
Reflect.preventExtensions(1);
// TypeError: 1 is not an object

Object.preventExtensions(1);
// 1

Reflect.set()

Static methodReflect.set ()Works like setting a property on an object.

Reflect.set(target, propertyKey, value[, receiver])

// Object
var obj = {};
Reflect.set(obj, "prop", "value"); // true
obj.prop; // "value"

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

// It can truncate an array.
Reflect.set(arr, "length", 1); // true
arr; // ["duck"];

// With just one argument, propertyKey and value are "undefined".
var obj = {};
Reflect.set(obj); // true
Reflect.getOwnPropertyDescriptor(obj, "undefined");
// { value: undefined, writable: true, enumerable: true, configurable: true }

Reflect.setPrototypeOf()

静态方法Reflect.setPrototypeOf()与Object.setPrototypeOf()方法是一致的。它将指定对象的原型 (即,内部的[[Prototype]] 属性)设置为另一个对象或为null

Reflect.setPrototypeOf(target, prototype)

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

// It can change an object's [[Prototype]] to null.
Reflect.setPrototypeOf({}, null); // true

// Returns false if target is not extensible.
Reflect.setPrototypeOf(Object.freeze({}), null); // false

// Returns false if it cause a prototype chain cycle.
var target = {};
var proto = Object.create(target);
Reflect.setPrototypeOf(target, proto); // false

推荐学习:JavaScript视频教程

The above is the detailed content of A brief analysis of Reflect's built-in objects in JavaScript (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:chuchur.com. If there is any infringement, please contact admin@php.cn delete