javascript - JS 对象组合

Question

我有 2 个对象形状和大小:

var Size = function(opts = {}) {
   this.width = opts.width || 0;
   this.height = opts.height || 0;
}

Size.prototype.get = function() {
   return {
      height: this.height, 
      width: this.width
   }
}

Size.prototype.setHeight = function(h) { 
   this.height = h; 
}

Size.prototype.setWidth = function(w) { 
   this.width = w; 
}

var Shape = function(opts = {}) {
  this.size = new Size(opts.size);
}

我想为我的形状对象实现一个函数getSize。但我不知道这个功能能做什么。

第一个选项是返回尺寸数据(一个普通对象)，如下所示:

// First implementation
Shape.prototype.getSize = function() {
   return this.size.get();   
}
shape.getSize() // {height: 0, width: 0}

<小时/>

第二个选项是返回大小对象上下文:

// Second implementation
Shape.prototype.getSize = function() {
   return this.size;
}
shape.getSize(); // Size {height: 0, width: 0}` 
shape.getSize().setHeight(5); // I can now manage the size context 
shape.getSize().get();` //{height: 0, width: 0}

有约定吗？或者更灵活和可组合的东西？

Answer 1

人们应该考虑@Bergi和@FelixKling已经提出的所有建议......

A getter that just returns a property is pretty useless. There's no reason not to write shape.size.get() ...

...

Why even have Size.prototype.get? Why should one have to write size.get().width instead of size.width?

从OP的代码中我可以看到，我想到了以下想法......

• 至于 Size，它使用选项/配置对象 opts 和返回另一个与 opts 类似的对象的 getter 方法。 ..为什么不总是直接操作本地范围的选项状态？
• 至于opts的高级默认值赋值...为什么不完全利用类语法、继承和组合。

灵活的解决方案可能类似于以下示例代码......

class EncapsulatedValue {
    constructor(options = {}) {
        function valueOf() {
            return Object.assign({}, options);
        }
        function toString() {
            return JSON.stringify(options);
        }
        this.valueOf = valueOf;
        this.toString = toString;
    }
}

class Size extends EncapsulatedValue {
    constructor(options = {}) {
        function setWidth(value) {
            return (options.width = value);
        }
        function setHeight(value) {
            return (options.height = value);
        }
        function getWidth() {
            return options.width;
        }
        function getHeight() {
            return options.height;
        }
        options.width = options.width || 0;
        options.height = options.height || 0;

        super(options);

        Object.defineProperty(this, 'width', {
            set: setWidth,
            get: getWidth,
            enumerable: true
        });
        Object.defineProperty(this, 'height', {
            set: setHeight,
            get: getHeight,
            enumerable: true
        });
    }
}

class Shape extends EncapsulatedValue {
    constructor(options = {}) {
        function getSize() {
            return options.size;
        }
        options.size = new Size(options.size);

        super(options);

        Object.defineProperty(this, 'size', {
            get: getSize,
            enumerable: true
        });
    }
    getSizeValue() { // implementation even can be omitted.
        return this.size.valueOf();
    }
}

var shape = (new Shape);

console.log('shape : ', shape);
console.log('shape.size : ', shape.size);

console.log('(shape + "") : ', (shape + ""));
console.log('shape.valueOf() : ', shape.valueOf());

console.log('(shape.size + "") : ', (shape.size + ""));
console.log('shape.size.valueOf() : ', shape.size.valueOf());

console.log('shape.getSizeValue() : ', shape.getSizeValue());

console.log('JSON.stringify(shape) : ', JSON.stringify(shape));
console.log('JSON.stringify(shape.size) : ', JSON.stringify(shape.size));

console.log('(shape instanceof Shape) ? ', (shape instanceof Shape));
console.log('(shape instanceof EncapsulatedValue) ? ', (shape instanceof EncapsulatedValue));

console.log('(shape.size instanceof Size) ? ', (shape.size instanceof Size));
console.log('(shape.size instanceof EncapsulatedValue) ? ', (shape.size instanceof EncapsulatedValue));

console.log('shape.hasOwnProperty("size") ? ', shape.hasOwnProperty("size"));
console.log('shape.hasOwnProperty("getSizeValue") ? ', shape.hasOwnProperty("getSizeValue"));

.as-console-wrapper { max-height: 100%!important; top: 0; }