// 创建parent对象 拥有get/set以及_name
const parent = {
  _name: null,
  get name() {
    return this._name
  },
  set name(value) {
    this._name = value
  }
}

// 创建一个空对象child 相当于 child.__proto__ = parent 实现原型继承
const child = Object.create(parent)

// 为child实例赋值name属性
child.name = '19Qingfeng'

console.log(child, 'child')

1. 在child中如果有name属性, name就会修改已有的属性值

2. 如果name属性不存在于child上, 则会遍历child的prototype查找这个属性

3. 如果没有这个属性, 则name的赋值会被直接添加到child的实例对象上

4. 如果原型链中有这个属性
1. 如果原型链上是普通的name属性, 那么在原型链上行的name会被child上新赋值的name屏蔽
2. 如果原型链上是普通的name属性, 但name被定义了writable为false, 也就是不可写, 那么这个时候的name赋值是直接失效的

const c = {a: 1}
Object.defineProperty(c, 'a', {
    writable: false
})
const d = Object.create(c)
d.a = 2
console.log(d) // { } => { a: 1 }  没有任何变化

c. 如果原型链上存在一个名为name的setter时, 会调用这个setter

const g = { a: 1, b: 1 }
Object.defineProperty(g, 'b', {
    get() {
        return this.a
    },
    set(val) {
        this.a = val
    }
})
const h = Object.create(g)
h.b = 3
console.log(h) // { a: 3, b: 3 } => { a: 1, b: 3 } 此时b被赋值到了h自己的属性上, 且因为原型链的b的setter, 导致h上多了一个b: 3

// 另外一种写法
const e = {
    b: 1,
    set a(val) {
        this.b = val
    }
}
const f = Object.create(e)
f.a = 2
console.log(f) // { b: 2 } => { b: 1 }

 

为什么Proxy会和Reflect搭配使用

下面看一段代码, 当我们不考虑Proxy的第三个参数receiver的时候, 我们调用obj.value, 实际上获得的是其原型链上的name值

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
    return Reflect.get(target, key);
    // 这里相当于 return target[key]
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
console.log(obj.value); // 19Qingfeng

显然这样是不符合预期的, 我们预期的结果应该是obj上的name
此时我们需要对Reflect指定第三个参数receiver, 从而保证了this的正确指向

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
-   return Reflect.get(target, key);
+   return Reflect.get(target, key, receiver);
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 设置obj继承与parent的代理对象proxy
Object.setPrototypeOf(obj, proxy);

// log: wang.haoyu
console.log(obj.value);