【JavaScript 漫游】【053】Reflect

这篇具有很好参考价值的文章主要介绍了【JavaScript 漫游】【053】Reflect。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【JavaScript 漫游】【053】Reflect,JavaScript 漫游,javascript,前端

文章简介

本篇文章为【JavaScript 漫游】专栏的第 053 篇文章,记录了 ES6 规范中关于 Reflect 的知识点。

概述

Reflect 对象与 Proxy 对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect 对象的设计目的有这样几个。

(1)将 Object 对象的一些明显属于语言内部的方法(比如 Object.defineProperty),放到 Reflect 对象上。现阶段,某些方法同时在 ObjectReflect 对象上部署,未来的新方法将只部署在 Reflect 对象上。也就是说,从 Reflect 对象上可以拿到语言内部的方法。

(2)修改某些 Object 方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc) 在无法定义属性时,会抛出一个错误,而 Reflect.defineProperty(obj, name, desc) 则会返回 false

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

(3) 让 Object 操作都变成函数行为。某些 Object 操作是命令式,比如 name in objdelete obj[name],而 Reflect.has(obj, name)Reflect.deleteProperty(obj, name) 让它们变成了函数行为。

// 老写法
'assign' in Object // true

// 新写法
Reflect.has(Object, 'assign') // true

(4)Reflect 对象的方法与 Proxy 对象的方法一一对应,只要是 Proxy 对象的方法,就能在 Reflect 对象上找到对应的方法。这就让 Proxy 对象可以方便地调用对应的 Reflect 方法,完成默认行为,作为修改行为的基础。也就是说,不管 Proxy 怎么修改默认行为,你总可以在 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;
  }
});

上面代码中,Proxy 方法拦截 target 对象的属性赋值行为。它采用 Reflect.set 方法将值赋值给对象的属性,确保完成原有的行为,然后再部署额外的功能。

有了 Reflect 对象以后,很多操作会更易读。

// 老写法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1

// 新写法
Reflect.apply(Math.floor, undefined, [1.75]) // 1

静态方法

Reflect 对象一共有 13 个静态方法。

  • Reflect.apply(target, thisArg, args)
  • Reflect.construct(target, args)
  • Reflect.get(target, name, receiver)
  • Reflect.set(target, name, value, receiver)
  • Reflect.defineProperty(target, name, desc)
  • Reflect.deleteProperty(target, name)
  • Reflect.has(target, name)
  • Reflect.ownKeys(target)
  • Reflect.isExtensible(target)
  • Reflect.preventExtensions(target)
  • Reflect.getOwnPropertyDescriptor(target, name)
  • Reflect.getPrototypeOf(target)
  • Reflect.setPrototypeOf(target, prototype)

上面这些方法的作用,大部分与 Object 对象的同名方法的作用都是相同的,而且它与 Proxy 对象的方法是一一对应的。下面是对它们的解释。

Reflect.get(target, name, receiver)

查找并返回 target 对象的 name 属性,如果没有该属性,则返回 undefined

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
};

Reflect.get(myObject, 'foo') // 1
Reflect.get(myObject, 'bar') // 2
Reflect.get(myObject, 'baz') // 3

如果 name 属性部署了读取函数(getter),则读取函数的 this绑定 receiver

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },
};

var myReceiverObject = {
  foo: 4,
  bar: 4,
};

Reflect.get(myObject, 'baz', myReceiverObject) // 8

如果第一个参数不是对象,Reflect.get 方法会报错。

Reflect.get(1, 'foo') // 报错
Reflect.get(false, 'foo') // 报错

Reflect.set(target, name, value, receiver)

设置 target 对象的 name 属性等于 value`。

var myObject = {
  foo: 1,
  set bar(value) {
    return this.foo = value;
  },
}

myObject.foo // 1

Reflect.set(myObject, 'foo', 2);
myObject.foo // 2

Reflect.set(myObject, 'bar', 3)
myObject.foo // 3

如果 name 属性设置了赋值函数,则赋值函数的 this 绑定receiver

var myObject = {
  foo: 4,
  set bar(value) {
    return this.foo = value;
  },
};

var myReceiverObject = {
  foo: 0,
};

Reflect.set(myObject, 'bar', 1, myReceiverObject);
myObject.foo // 4
myReceiverObject.foo // 1

注意,如果 Proxy 对象和 Reflect 对象联合使用,前者拦截赋值操作,后者完成赋值的默认行为,而且传入了 receiver,那么Reflect.set 会触发 Proxy.defineProperty 拦截。

let p = {
  a: 'a'
};

let handler = {
  set(target, key, value, receiver) {
    console.log('set');
    Reflect.set(target, key, value, receiver)
  },
  defineProperty(target, key, attribute) {
    console.log('defineProperty');
    Reflect.defineProperty(target, key, attribute);
  }
};

let obj = new Proxy(p, handler);
obj.a = 'A';
// set
// defineProperty

如果 Reflect.set 没有传入 receiver,那么就不会触发defineProperty 拦截。

如果第一个参数不是对象,Reflect.set 会报错。

Reflect.set(1, 'foo', {}) // 报错
Reflect.set(false, 'foo', {}) // 报错

Reflect.has(obj, name)

对应 name in obj 里面的 in 运算符。

var myObject = {
  foo: 1,
};

// 旧写法
'foo' in myObject // true

// 新写法
Reflect.has(myObject, 'foo') // true

如果 Reflect.has() 方法的第一个参数不是对象,会报错。

Reflect.deleteProperty(obj, name)

等同于 delete obj[name],用于删除对象的属性。

const myObj = { foo: 'bar' };

// 旧写法
delete myObj.foo;

// 新写法
Reflect.deleteProperty(myObj, 'foo');

该方法返回一个布尔值。如果删除成功,或者被删除的属性不存在,返回 true;删除失败,被删除的属性依然存在,返回false

如果 Reflect.deleteProperty() 方法的第一个参数不是对象,会报错。

Reflect.construct(target, args)

等同于 new target(...args),这提供了一种不使用 new,来调用构造函数的方法。

function Greeting(name) {
  this.name = name;
}

// new 的写法
const instance = new Greeting('张三');

// Reflect.construct 的写法
const instance = Reflect.construct(Greeting, ['张三']);

如果 Reflect.construct() 方法的第一个参数不是函数,会报错。

Reflect.getPrototypeOf(obj)

用于读取对象的 __proto__ 属性,对应Object.getPrototypeOf(obj)

const myObj = new FancyThing();

// 旧写法
Object.getPrototypeOf(myObj) === FancyThing.prototype;

// 新写法
Reflect.getPrototype(myObj) === FancyThing.prototype;

Reflect.getPrototypeOfObject.getPrototypeOf 的一个区别是,如果参数不是对象,Object.getPrototypeOf 会将这个参数转为对象,然后再运行,而 Reflect.getPrototypeOf 会报错。

Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0}
Reflect.getPrototypeOf(1) // 报错

Reflect.setPrototypeOf(obj, newProto)

用于设置目标对象的原型(prototype),对应Object.setPrototypeOf(obj, newProto) 方法。它返回一个布尔值,表示是否设置成功。

const myObj = {};

// 旧写法
Object.setPrototypeOf(myObj, Array.prototype);

// 新写法
Reflect.setPrototypeOf(myObj, Array.prototype);

myObj.length // 0

如果无法设置目标对象的原型(比如,目标对象禁止扩展),Reflect.setPrototypeOf 方法返回 false

Reflect.setPrototypeOf({}, null)
// true

Reflect.setPrototypeOf(Object.freeze({}), null)
// false

如果第一个参数不是对象,Object.setPrototypeOf 会返回第一个参数本身,而 Reflect.setPrototypeOf 会报错。

Object.setPrototypeOf(1, {})
// 1

Reflect.setPrototypeOf(1, {})
// TypeError: Reflect.setPrototypeOf called on non-object

如果第一个参数是 undefinednullObject.setPrototypeOfReflect.setPrototypeOf 都会报错。

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Reflect.setPrototypeOf(null, {})
// TypeError: Reflect.setPrototypeOf called on non-object

Reflect.apply(func, thisArg, args)

Reflect.apply 方法等同于 Function.prototype.apply.call(func, thisArg, args),用于绑定 this 对象后执行给定函数。

一般来说,如果要绑定一个函数的 this 对象,可以这样写 fn.apply(obj, args),但是如果函数定义了自己的 apply 方法,就只能写成 Function.prototype.apply.call(fn, obj, args),采用 Reflect 对象可以简化这种操作。

const ages = [11, 33, 12, 54, 18, 96];

// 旧写法
const youngest = Math.min.apply(Math, ages);
const oldest = Math.max.apply(Math, ages);
const type = Object.prototype.toString.call(youngest);

// 新写法
const youngest = Reflect.apply(Math.min, Math, ages);
const oldest = Reflect.apply(Math.max, Math, ages);
const type = Reflect.apply(Object.prototype.toString, youngest, []);

Reflect.defineProperty(target, propertyKey, attributes)

等同于 Object.defineProperty,用来为对象定义属性。未来,后者会被逐渐废除,请从现在开始就使用 Reflect.defineProperty 代替它。

function MyDate() {
  /*…*/
}

// 旧写法
Object.defineProperty(MyDate, 'now', {
  value: () => Date.now()
});

// 新写法
Reflect.defineProperty(MyDate, 'now', {
  value: () => Date.now()
});

如果 Reflect.defineProperty 的第一个参数不是对象,就会抛出错误,比如 Reflect.defineProperty(1, 'foo')

这个方法可以与 Proxy.defineProperty 配合使用。

const p = new Proxy({}, {
  defineProperty(target, prop, descriptor) {
    console.log(descriptor);
    return Reflect.defineProperty(target, prop, descriptor);
  }
});

p.foo = 'bar';
// {value: "bar", writable: true, enumerable: true, configurable: true}

p.foo // "bar"

Reflect.getOwnPropertyDescriptor(target, propertyKey)

基本等同于 Object.getOwnPropertyDescriptor,用于得到指定属性的描述对象,将来会替代掉后者。

var myObject = {};
Object.defineProperty(myObject, 'hidden', {
  value: true,
  enumerable: false,
});

// 旧写法
var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden');

// 新写法
var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden');

Reflect.getOwnPropertyDescriptorObject.getOwnPropertyDescriptor 的一个区别是,如果第一个参数不是对象,Object.getOwnPropertyDescriptor(1, 'foo') 不报错,返回 undefined,而 Reflect.getOwnPropertyDescriptor(1, 'foo') 会抛出错误,表示参数非法。

Reflect.isExtensible (target)

对应 Object.isExtensible,返回一个布尔值,表示当前对象是否可扩展。

const myObject = {};

// 旧写法
Object.isExtensible(myObject) // true

// 新写法
Reflect.isExtensible(myObject) // true

如果参数不是对象,Object.isExtensible 会返回 false,因为非对象本来就是不可扩展的,而 Reflect.isExtensible 会报错。

Object.isExtensible(1) // false
Reflect.isExtensible(1) // 报错

Reflect.preventExtensions(target)

对应 Object.preventExtensions 方法,用于让一个对象变为不可扩展。它返回一个布尔值,表示是否操作成功。

var myObject = {};

// 旧写法
Object.preventExtensions(myObject) // Object {}

// 新写法
Reflect.preventExtensions(myObject) // true

如果参数不是对象,Object.preventExtensions 在 ES5 环境报错,在 ES6 环境返回传入的参数,而 Reflect.preventExtensions 会报错。

Reflect.ownKeys (target)

用于返回对象的所有属性,基本等同于Object.getOwnPropertyNamesObject.getOwnPropertySymbols之和。

var myObject = {
  foo: 1,
  bar: 2,
  [Symbol.for('baz')]: 3,
  [Symbol.for('bing')]: 4,
};

// 旧写法
Object.getOwnPropertyNames(myObject)
// ['foo', 'bar']

Object.getOwnPropertySymbols(myObject)
//[Symbol(baz), Symbol(bing)]

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

实例:使用 Proxy 实现观察者模式

观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。

const person = observable({
  name: '张三',
  age: 20
});

function print() {
  console.log(`${person.name}, ${person.age}`)
}

observe(print);
person.name = '李四';
// 输出
// 李四, 20

上面代码中,数据对象 person 是观察目标,函数 print 是观察者。一旦数据对象发生变化,print 就会自动执行。

下面,使用 Proxy 写一个观察者模式的最简单实现,即实现observableobserve 这两个函数。思路是 observable 函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}

上面代码中,先定义了一个 Set 集合,所有观察者函数都放进这个集合。然后,observable 函数返回原始对象的代理,拦截赋值操作。拦截函数 set 之中,会自动执行所有观察者。文章来源地址https://www.toymoban.com/news/detail-844684.html

到了这里,关于【JavaScript 漫游】【053】Reflect的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】JavaScript简介

    人不走空                                                                              目录         🌈个人主页:人不走空       💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 JavaScript的基础 JavaScript进阶 现代Web开发与JavaScript JavaScript的未来 作

    2024年02月21日
    浏览(59)
  • 前端JavaScript

    全称JavaScript但是与Java一毛钱关系都没有 之所以这么叫是为了蹭Java的热度。JavaScript是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)。 IT行业鄙视链: 后端 前端、运维、测试、产品、老板 前端想一统天下:node.js JS简介 1.ECMAScript和JavaScript的关系 1996年11月

    2024年02月06日
    浏览(43)
  • 前端面试问题-JavaScript

    1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数,通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域 闭包的特性: 函数内再嵌套函数 内部函

    2024年02月15日
    浏览(46)
  • 前端面试题---->JavaScript

    原因: 当使用const声明一个对象或数组时,实际上是保证了对象或数组的引用不会被修改,但对象或数组本身的属性或元素是可以被修改的。这是因为const只能保证指向的内存地址不变,但并不保证内存地址指向的内容不变,而基本类型的变量在内存中存储的是值本身,而不

    2024年03月27日
    浏览(53)
  • 前端进化笔记-JavaScript(三)

    人类在白色的底色上描绘图画,地球在黑色的底色上创造生命。 JavaScript的变量可以说是独树一帜。只需要一个(或两个等)(const,let)就可以创建变量,创建时不考虑变量的类型,这是其他语言少有的强大功能。当然强大的功能总是伴随着问题。 原始值:Undefined,

    2024年02月08日
    浏览(80)
  • JavaScript前端接收流式数据

    在Java开发中,前端接收流式数据通常涉及到使用WebSocket 或Server-Sent Events(SSE)这样的技术。这两种技术都允许服务器推送实时数据到客户端,以便在浏览器中进行处理和更新。 1.  WebSocket: WebSocket是一种在单个 TCP 连接上进行全双工通信的协议。在Java 中,你可以使用Java

    2024年04月27日
    浏览(38)
  • Web前端-JavaScript

    目录 1 概述 2 HTML嵌入JS代码三种方式 2.1 第一种方式 2.2 第二种方式 2.3 第三种方式 3 变量 4 数据类型 4.1 概述 4.2 Number数据类型  4.3 几个值得注意的函数 4.4 Boolean数据类型  4.5 String数据类型 4.6 关于Object类型 4.7 NaN、undefined、null的区别 4 函数 5 事件 5.1 JS中有哪些常用的事件

    2024年02月09日
    浏览(59)
  • 前端开发——Javascript知识(介绍)

    目录 有关JavaScript的知识  JavaScript的优点   JavaScript的领域 JavaScript的组成 JavaScript的特点 第一个JavaScript程序 在 HTML 文档中嵌入 JavaScript 代码 在脚本文件中编写 JavaScript 代码 JavaScript内容  Html内容  JavaScript 代码执行顺序 JavaScript中的几个重要概念 标识符 保留字 区分

    2024年02月01日
    浏览(46)
  • 前端基础之JavaScript

    JavaScript书写 JavaScript标签内写代码 引入其他js文件 语言规范 注释: 结束符: 在JavaScript中,结束符以;分好表示 变量声明: 1. 在JavaScript中,变量的命名以:数字,字母,_,$组成,不能以数字开头。 2.声明变量时,使用var 变量名来声明 注意事项:变量名的命名规范使用驼峰

    2024年02月06日
    浏览(44)
  • 前端基础3——JavaScript基础用法

    JavaScript(简称JS):是一种轻量级客户端脚本语言,通常被直接嵌入HTML 页面,在浏览器上执行。 JavaScript作用:改变页面中的HTML元素、属性、样式、事件。 内嵌样式,在body标签中使用。 1.在body标签中写js脚本。 2.查看效果。 在head标签中使用。 1.编写js脚本main.js,统一存放

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包