JavaScript基础学习-属性设置和屏蔽

对象的属性设置

• 对象自身的属性修改

  var myObject = { a: 2 };
  myObject.a = 3;
  console.log(myObject); // {a: 3}

---

• 如果a不是直接存在myObject中，[[Prototype]]链就会被遍历，如果在原先链上找不到，a就会被直接添加到myObject
  myObject.b = 3，在myObject中没有发现b，去anotherObject上查找，也找不到，一直找到Object对象，都没有找到b，直接在myObject上添加属性b

  var anotherObject = { a: 2 };
  var myObject = Object.create(anotherObject);
  myObject.b = 3;
  console.log(myObject); // {b: 3}

屏蔽

如果属性名a即出现在myObject中，也存在它的[[Prototype]]链上层，就会发生屏蔽。
myObject中包含a属性会屏蔽原型链上层所有的a属性。

  var anotherObject = { a: 2 };
  var myObject = Object.create(anotherObject);
  Object.defineProperty(myObject, 'a', { value: 3, writable: true });
  console.log(myObject); // {a: 3}
  console.log(anotherObject); // {a: 2}
  myObject.a = 4;
  console.log(anotherObject); // {a: 2}
  console.log(myObject); // {a: 4}

---

如果a不存在于myObject,而存在于anotherObject中，myObject.a = 3 ,会有三种特殊情况

1. 如果[[Prototype]]链上层存在a，并且不是只读（writable:true）,那么会在myObject中添加一个名为a的属性，它是屏蔽属性。

  var anotherObject = { a: 2 };

  var myObject = Object.create(anotherObject);
  console.log(myObject.a); // 2

  myObject.a = 3;
  console.log(myObject.a); // 3
  console.log(myObject); // {a: 3}
  console.log(anotherObject); // {a: 2}

2. 如果[[Prototype]]链上层存在a,但是只读(writable:false),那么无法在myObject上添加a。如果在严格模式下会报错。但是可以用definePrototype定义a。

  // 'use strict'; // Uncaught TypeError: Cannot assign to read only property 'a' of object '#<Object>'
  var anotherObject = {};
  Object.defineProperties(anotherObject, {
    a: {
      writable: false,
      value: 2
    }
  });

  var myObject = Object.create(anotherObject);
  console.log(myObject.a); // 2
  myObject.a = 3;
  console.log(myObject.a); // 2
  console.log(myObject); // {}
  console.log(anotherObject); // {a: 2}

  Object.defineProperty(myObject, 'a', { value: 3 });
  console.log(myObject); // {a: 3}
  myObject.a = 4;
  console.log(myObject); // {a: 4}

3. 如果a在[[Prototype]]上层是一个setter，那么不会被添加到myObect上，也不会重新定义这个setter，而是调用这个setter

  var anotherObject = {
    get a() {
      return this._a_;
    },
    set a(val) {
      this._a_ = val;
    }
  };

  var myObject = Object.create(anotherObject);
  console.log(myObject); // {}
  myObject.a = 3;
  console.log(myObject); // {_a_: 3}

---

隐式屏蔽

  var anotherObject = { a: 2 };
  var myObject = Object.create(anotherObject);

  console.log(anotherObject.a); // 2
  console.log(myObject.a); // 2

  // 相当于 myObject = myObject.a + 1
  myObject.a++;

  console.log(anotherObject.a); // 2
  console.log(myObject.a); // 3