为什么 .assign 对象合并中的 setter/getter 定义不起作用？

Question

我正在尝试在我的JS应用程序中实现一种继承。 这是我所拥有的：

function FooObject(param1, param2) {
this._param1= param1;
this._param2= param2;
}
Object.defineProperties(FooObject.prototype, {
param1:
{
get: function () { return this._param1; },
set: function (val) { this._param1= val; }
}
});

以上是"基类"，好吗？

然后我定义另一个对象，它通过合并来扩展 FooObject 并添加更多属性：

function FooObjectA(param1, param2, param3, param4) {
FooObject.call(this, param1, someVal);
this._param2= param2;
this._param3= param3;
this._param4= param4;
}
FooObjectA.prototype = Object.assign(Object.create(FooObject.prototype),
{
constructor: FooObjectA,
param2:
{
get: function () { return this._param2; },
set: function (val) { this._param2= val; }
},
param3:
{
get: function () { return this._param3; },
set: function (val) { this._param3 = val; }
}

}(;

现在，如果我试图获取 param3，例如：

var fooInstance = new FooObjectA();

var p = fooInstance .param3;

然后p不保存_param3的值，而是引用 getter 方法。

然后我尝试了这种方法：

Object.defineProperties(FooObjectA.prototype, {
{

param2:
{
get: function () { return this._param2; },
set: function (val) { this._param2= val; }
},
param3:
{
get: function () { return this._param3; },
set: function (val) { this._param3 = val; }
}

}(;

现在它从 getter ok 返回值。我对 JavaScript 很陌生，想了解为什么当我将 getters/setter 放入 .assign. 时它不起作用。create...，因为从逻辑上讲，我不明白为什么这些getter没有与FooObject的原型合并。

Answer 1

Object.assign读取属性的值(调用getter(，并将该值作为简单数据属性存储在目标对象上。

如果要复制 getter/setter 定义，则需要实现自己的函数来检查属性描述符 (Object.getOwnPropertyDescriptor(obj, "propName")( 并处理在目标上创建 getter/setter 属性。

然后 p 保存的值不是_param3而是引用 getter 方法。

这是一个单独的问题。你正在将一个对象传递给Object.assign期望它像Object.defineProperties那样被解释：

FooObjectA.prototype = smartAssign(Object.create(FooObject.prototype), {
constructor: FooObjectA,
param2: {
get: function() {
return this._param2;
},
set: function(val) {
this._param2 = val;
}
},
param3: {
get: function() {
return this._param3;
},
set: function(val) {
this._param3 = val;
}
}
});

如果要使用该格式，则需要调用Object.defineProperties来解释它：

FooObjectA.prototype = smartAssign(Object.defineProperties(Object.create(FooObject.prototype), {
// --------------------------------^
constructor: FooObjectA,
param2: {
get: function() {
return this._param2;
},
set: function(val) {
this._param2 = val;
}
},
param3: {
get: function() {
return this._param3;
},
set: function(val) {
this._param3 = val;
}
}
})); // <=== Added )

下面是一个函数(使用 ES5 语法(的快速草图;你很可能需要测试和强化它：

var hasOwn = function(obj, prop) { // Paranoia, in case an object overrides it
return Object.prototype.hasOwnProperty.call(obj, prop);
};
function smartAssign(target) {
var n, source, key;
for (n = 1; n < arguments.length; ++n) {
source = arguments[n];
for (key in source) {
if (hasOwn(source, key)) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
}
}
}
return target;
}

使用它并修复其他问题的实时示例：

var hasOwn = function(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
};
function smartAssign(target) {
var n, source, key;
for (n = 1; n < arguments.length; ++n) {
source = arguments[n];
for (key in source) {
if (hasOwn(source, key)) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
}
}
}
return target;
}
function FooObject(param1, param2) {
this._param1 = param1;
this._param2 = param2;
}
Object.defineProperties(FooObject.prototype, {
param1: {
get: function() {
return this._param1;
},
set: function(val) {
this._param1 = val;
}
}
});
function FooObjectA(param1, param2, param3, param4) {
FooObject.call(this, param1, 42);
this._param2 = param2;
this._param3 = param3;
this._param4 = param4;
}
FooObjectA.prototype = smartAssign(Object.defineProperties(Object.create(FooObject.prototype), {
constructor: FooObjectA,
param2: {
get: function() {
return this._param2;
},
set: function(val) {
this._param2 = val;
}
},
param3: {
get: function() {
return this._param3;
},
set: function(val) {
this._param3 = val;
}
}
}));
var fooInstance = new FooObjectA("p1", "p2", "p3", "p4");
console.log(fooInstance.param1);
console.log(fooInstance.param3);