天天看点

关于Object,defineProperty在原型上定义访问器属性和数据属性的区别

发现了一个关于Object.defineProperty很有趣的事情

对原型调用Object.defineProperty定义访问器属性,属性是定义在原型上,实例只是会继承该属性,实例对象修改或访问该属性时,调用的是设置在原型上的该属性的set和get

因此如果这些方法使用变量存储,则所有对象将共享该值

function myclass(){}
var value;
Object.defineProperty(myclass.prototype,'x',{
  // get:function(){}的缩写,es6新特性
  get(){
    return value;
  },
  set(x){
    value = x;
  }
})
var a = new myclass();
var b = new myclass();
a.x=1
console.log(b.x)                     //1
console.log(a.hasOwnProperty('x'))   //false  (注意这里是false,表示实例中没有x这个属性)
           

如果是数据属性,值始终在对象本身上设置,而不是原型上,

function myclass2(){}
Object.defineProperty(myclass2.prototype,'x',{
  writable:true,
  value:1
})
var a2 = new myclass2();
a2.x=2;
console.log(a2.x);                   //2
console.log(myclass.prototype.x);    //1
console.log(a2.hasOwnProperty('x'))  //true  (这里是true,表示实例中有x这个属性)
           

继续阅读