我尝试通过传播在getter中创建混合到JS对象中
操作者
语法，但它总是似乎返回null。
HTML：
<body>
<div id="wrapperA"></div>
<div id="wrapperB"></div>
</body>
<script src='./test.js'></script>
JS：
"use strict";
const mixin = {
get wrapper() { return document.getElementById(this.wrappername); }
}
const wrapperA = {
wrappername: 'wrapperA',
...mixin
}
const wrapperB = {
wrappername: 'wrapperB',
...mixin
}
console.log(wrapperA);
console.log(wrapperB);
控制台输出：
{wrappername: "wrapperA", wrapper: null}
{wrappername: "wrapperB", wrapper: null}
This链接到一个应该工作的扩展函数，从我可以告诉上面的代码创建了一个无意的闭包。但是，与...语法相比，它的读取效果非常差。有人知道如何让代码与后一种解决方案一起使用吗？ ES开发者是否知道这个问题并将在ES7中修复？
这不是一个错误。当解释扩展语法时，每个都会评估mixin的属性值，即在wrapper设置为this的情况下调用mixin getter。请注意，this不是正在构造的新对象，如... has precedence对逗号排序。所以在执行...时，最终的对象不在视野中。其次，复制的属性不再是getter，而是具有原子值（不是函数）的普通属性。
使用Object.assign时执行的几乎相同的过程可以更好地理解行为：
Object.assign({
wrappername: 'wrapperA'
}, mixin);
如果你想用新对象作为wrapper调用this getter，那么执行：
"use strict";
class Wrapper {
constructor(wrappername) {
this.wrappername = wrappername;
}
get wrapper() {
return document.getElementById(this.wrappername);
}
}
const wrapperA = new Wrapper('wrapperA');
const wrapperB = new Wrapper('wrapperB');
console.log(wrapperA.wrapper);
console.log(wrapperB.wrapper);<div id="wrapperA"></div>
<div id="wrapperB"></div>如果你真的需要多重继承，那么看看像Ring.js这样的库，这真的很容易。
关于mixin实现on StackOverflow有几个问答。以下是来自this article的众多想法之一：
"use strict";
function MixinNameGetter(superclass) {
return class extends superclass {
get wrapper() {
return document.getElementById(this.wrappername);
}
}
}
function MixinLetterGetter(superclass) {
return class extends superclass {
get letter() {
return this.wrappername.substr(-1);
}
}
}
class Wrapper {
constructor(wrappername) {
this.wrappername = wrappername;
}
}
class ExtendedWrapper extends MixinNameGetter(MixinLetterGetter(Wrapper)) {
}
const wrapperA = new ExtendedWrapper('wrapperA');
const wrapperB = new ExtendedWrapper('wrapperB');
console.log(wrapperA.wrapper, wrapperA.letter);
console.log(wrapperB.wrapper, wrapperB.letter);<div id="wrapperA"></div>
<div id="wrapperB"></div>虽然这有效地提供了多重继承，但是从表达式派生的类的结果层次结构实际上并不是高效代码的成分。
另一种方法是放弃mixins的想法，改为使用装饰器：
"use strict";
function DecoratorNameGetter(target) {
Object.defineProperty(target, 'wrapper', {
get: function () {
return document.getElementById(this.wrappername);
}
});
}
function DecoratorLetterGetter(target) {
Object.defineProperty(target, 'letter', {
get: function () {
return this.wrappername.substr(-1);
}
});
}
class Wrapper {
constructor(wrappername) {
this.wrappername = wrappername;
DecoratorNameGetter(this);
DecoratorLetterGetter(this);
}
}
const wrapperA = new Wrapper('wrapperA');
const wrapperB = new Wrapper('wrapperB');
console.log(wrapperA.wrapper, wrapperA.letter);
console.log(wrapperB.wrapper, wrapperB.letter);<div id="wrapperA"></div>
<div id="wrapperB"></div>这导致平面结构（没有原型链），其中扩展发生在目标对象本身中。