码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 Reflect反射

时间:2019-10-19 00:16:19      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:函数   receiver   nbsp   foreach   print   serve   str   学习   来替   

概述

Reflect 是 ES6 为了操作对象引入的 API 。

Reflect 可以用于获取目标对象的行为,它与 Object 类似,它的方法与 Proxy 是对应的。

基本用法:

1、Reflect.get(target, name, receiver) 查找并返回 target 对象的 name 属性。

let exam = {
    name: "Tom",
    age: 24,
    get info(){
        return this.name + this.age;
    }
}
Reflect.get(exam, ‘name‘); // "Tom"
 
// 当 target对象中存在属性的getter方法, getter方法的this会绑定 receiver
let receiver = {
    name: "Jerry",
    age: 20
}
Reflect.get(exam, ‘info‘, receiver); // Jerry20

2、Reflect.set(target, name, value, receiver) 返回boolean类型

let exam = {
    name: "Tom",
    age: 24,
    set info(value){
        return this.age = value;
    }
}
exam.age; // 24
Reflect.set(exam, ‘age‘, 25); // true
console.log(exam.age); // 25
let receiver = {//当 target对象中存在属性setter方法时,setter方法中的this会绑定receiver
    age: 18
}
Reflect.set(exam, ‘info‘, 1, receiver); // true
receiver.age; // 1   

3、Reflect.has(obj, name) 是 name in obj 指令的函数化,用于查找 name 属性在 obj 对象中是否存在。

……

组合使用(Reflect与Proxy)

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为,然后进行额外操作。

let exam = {
    name: "Tom",
    age: 24
}
let handler = {
    get: function(target, key){
        return Reflect.get(target,key);
    },
    set: function(target, key, value){
        Reflect.set(target, key, value);
    }
}
let proxy = new Proxy(exam, handler)
proxy.name = "Jerry" 
proxy.name // "Jerry"

比对下:上面的get方法等同于下面的方法。

get(target, propKey, receiver) {
       return target[propKey]; //这边用Reflect.get(target,key)替换,结果一样。
}

 

观察者模式 Observer

 

当一个对象被修改时,则会自动通知它的依赖对象。

 

// 定义 Set 集合
const queuedObservers = new Set();
// 把观察者函数都放入 Set 集合中
const observe = fn => queuedObservers.add(fn);
// observable 返回原始对象的代理,拦截赋值操作
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;
}

 

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

function print() {
  console.log(`person的姓名更改为${person.name}`); //`${}`是es6中新增的字符串方法,用来替换字符串用的,在字符串中引入变量。
} 
observe(print);//当person的属性变动时,自动通知print去打印信息。(Observer模式) 
person.name = ‘李四‘; // person的姓名更改为李四

 

学习原文

ES6 Reflect反射

标签:函数   receiver   nbsp   foreach   print   serve   str   学习   来替   

原文地址:https://www.cnblogs.com/liangtao999/p/11701385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!