• 技术文章 >web前端 >js教程

    浅析javascript中Reflect内置对象(代码详解)

    奋力向前奋力向前2021-08-25 18:48:30转载205

    之前的文章《一文讲解Vue中路由切换终止异步请求(附代码)》中,给大家介绍了解了vue中路由切换终止异步请求。下面本篇文章给大家了解js中Reflect内置对象,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。

    语义

    Reflect是一个内置的对象,它提供拦截JavaScript操作的方法。这些方法与处理器对象的方法相同。Reflect不是一个函数对象,因此它是不可构造的。

    描述

    与大多数全局对象不同,Reflect没有构造函数。你不能将其与一个new运算符一起使用,或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的(就像 Math 对象)。

    兼容性

    Chrome:49+

    Firefox (Gecko):42+

    其他浏览器暂未实现

    句法

    Reflect.apply(target, thisArgument, argumentsList)

    参数

    target

    目标函数。

    thisArgument target

    函数调用时绑定的this对象。

    argumentsList

    target函数调用时传入的实参列表,该参数应该是一个类数组的对象。

    方法

    Reflect.apply()

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

    静态方法Reflect.apply()通过指定的参数列表发起对目标(target)函数的调用。

    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()方法的行为有点像new操作符 构造函数 , 相当于运行new target(...args)

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

    Reflect.defineProperty()

    Reflect.defineProperty()是一个静态的方法,看起来像Object.defineProperty()但是它返回一个布尔值

    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()

    静态方法Reflect.deleteProperty()允许用于删除属性。它很像delete operator,但它是一个函数。Reflect.deleteProperty允许你删除一个对象上的属性。返回一个Boolean值表示该属性是否被成功删除。它几乎与非严格的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()方法的工作方式,就像从object (target[propertyKey])中获取属性,但它是作为一个函数执行的。

    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()

    静态方法Reflect.getOwnPropertyDescriptor()与Object.getOwnPropertyDescriptor()方法相似。如果在对象中存在,则返回给定的属性的属性描述符。否则返回 undefined。

    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()

    静态方法Reflect.getPrototypeOf()与Object.getPrototypeOf()方法是一样的。都是返回指定对象的原型(即,内部的 [[Prototype]] 属性的值)。

    Reflect.getPrototypeOf(target)

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

    Reflect.has()

    静态方法Reflect.has()作用与in操作符相同。

    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()

    静态方法Reflect.isExtensible()判断一个对象是否可扩展 (即是否能够添加新的属性)。与它Object.isExtensible()方法相似,但有一些不同,详情可见differences

    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()

    静态方法Reflect.ownKeys()返回一个由目标对象自身的属性键组成的数组。

    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()

    静态方法Reflect.preventExtensions()方法阻止新属性添加到对象例如:防止将来对对象的扩展被添加到对象中)。该方法与Object.preventExtensions()相似,但有一些不同点。

    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()

    静态方法Reflect.set()工作方式就像在一个对象上设置一个属性。

    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视频教程

    以上就是浅析javascript中Reflect内置对象(代码详解)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:禅境花园,如有侵犯,请联系admin@php.cn删除
    专题推荐:js
    上一篇:JavaScript获取关联数组的键的两种方法 下一篇:JS字符串学习之将字符串分割成子串并传给数组
    线上培训班

    相关文章推荐

    • 示例详解用javascript隐藏电子邮件地址• 深入浅析JavaScript中的回调函数• 教大家在JavaScript中以不同的方式声明变量• 详解怎么使用JavaScript打印div元素的内容• 如何使用JavaScript比较两个日期

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网