在原型链和class中定义getter&setter有什么不同?

有这样一小段程序,描述了两个类,每个类都有一对 getter&setter 属性:

  • Test1 是在 原型链 上定义的;

  • Test2 是用 ES6 中定义的;


// Test1
function Test1(val) {
  alert("1");
  this.value = val;
}
Test1.prototype = {
  get value() {
    alert("2");
    return this._value;
  },
  set value(val) {
    alert("3");
    this._value = val;
  }
};

var f1=new Test1("zj");
f1.value="sdf";
console.log(f1);

运行结果是:
弹出: 1 3 3 2;
输出:

[object Object] {
  _value: "sdf",
  value: "sdf"
}

// Test2
class Test2{
  constructor(val){
    alert("1");
    this.value = val;
  }
  get value(){
    alert("2");
    return this._value;
  }
  set value(v){
    alert("3");
    this._value=v;
  }
}

var f2=new Test2("zj");
f2.value="sdf";
console.log(f2);

运行结果是:
弹出: 1 3 3;
输出:

[object Object] {
  _value: "sdf"
}

可以看到这两种方式定义的getter&setter结果是不一样的,请问是为什么呢?

阅读 3.9k
1 个回答

经过测试,在babel中转化后 test1 和 test2 是一样的的结果,题目中描述的结果是出现在jsbin上的,所以可能和他们的编译环境相关,两者不应该是有区别的,因为es6的类实现的过程相当于:

var Person = function(name) {
    this.name = name;
}
var p = new Person();

// 分解为:
var p = {}
p.__proto__ = Person.prototype
Person.call(p)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题