你的 mixin 真的兼容 ECMAScript 5 吗?

mixin 模式与 ECMAScript 5 的兼容性问题

在最近与客户合作的项目中，为了充分利用 ECMAScript 5 的特性，我遇到了一个非常有趣的问题。这个问题源于一种在 JavaScript 中广泛使用的模式：mixin，即将一个对象的属性或方法混合到另一个对象中。

大多数常见的 mixin 实现方式大致如下所示：

function mixin(receiver, supplier) {
for (var property in supplier) {
if (supplier.hasOwnProperty(property)) {
receiver[property] = supplier[property];
        }
    }
}

在这个 mixin() 函数中，通过 for 循环遍历 supplier 对象的属性，并将其赋值给 receiver 对象。几乎所有的 JavaScript 库都包含某种形式的类似功能，允许你编写如下代码：

mixin(object, {
name: "Nicholas",
sayName: function() {
 console.log(this.name);
 }
});
object.sayName(); // 输出 "Nicholas"

在此示例中，object 对象接收了 name 属性和 sayName() 方法。这种写法在 ECMAScript 3 中运行良好，但在 ECMAScript 5 环境下却可能出现问题。

问题分析：getter 值的丢失

这是我遇到的具体问题：

(function() {
// 稍后填充
 var name;
mixin(object, {
 get name() {
 return name;
 }
 });
// 假设这是稍后的操作
 name = "Nicholas";
}());
console.log(object.name); // 输出 undefined

这个例子虽然略显刻意，但准确描述了该问题。进行 mixin 的属性使用了 ECMAScript 5 的新特性：getter 属性存取器。该 getter 引用了一个未初始化的局部变量 name，因此属性值为 undefined。

随后，name 被赋予了值，以便使存取器 getter 能够返回有效值。不幸的是，object.name（通过 mixin 添加的属性）始终返回 undefined。

这是怎么回事呢？

让我们仔细分析 mixin() 函数。事实上，在循环语句中，并没有把属性从一个对象重新赋值给另一个对象。它实际上是创建一个同名的属性，并把 supplier 对象的存取器方法 getter 的返回值赋值给了它。（译注：目标对象得到的不是 getter 这个方法，而是得到了 getter 方法的返回值。@justjavac）

在这个例子中，mixin() 的过程实际上是：

receiver.name = supplier.name;

属性 receiver.name 被创建，并且被赋值为 supplier.name 的值。当然，supplier.name 有一个 getter 方法用来返回本地变量 name 的值。此时，name 的值为 undefined，所以 receiver.name 存储的是值。并没有为 receiver.name 创建一个 getter 方法，因此它的值永远不会改变。

解决方案：使用属性描述符

要解决这个问题，你需要使用属性描述符（descriptor）将属性从一个对象 mixin 到另一个对象。一个纯粹的 ECMAScript 5 版本的 mixin() 应该这样写：

function mixin(receiver, supplier) {
Object.keys(supplier).forEach(function(value, property) {
 Object.defineProperty(receiver, property, Object.getOwnPropertyDescriptor(supplier, property));
 });
}

在这个新版本函数中，Object.keys() 用来获取一个数组，包含了 supplier 对象的所有枚举属性。然后，forEach() 方法用来遍历这些属性。调用 Object.getOwnPropertyDescriptor() 方法获取 supplier 对象的每个属性描述符（descriptor）。

由于描述符（descriptor）包含了所有的属性信息，包括 getter 和 setter 方法，该描述符（descriptor）可以直接传递给 Object.defineProperty()，用来在 receiver 对象上创建相同的属性。使用这个新版本的 mixin()，可以解决前面遇到的问题，从而得到你所期望的结果。getter 方法被正确地从 supplier 传递到了 receiver。

兼容旧浏览器的回退方案

当然，如果你仍然需要支持旧的浏览器，那么你就需要一个函数，回落至 ECMAScript 3：

function mixin(receiver, supplier) {
if (Object.keys) {
Object.keys(supplier).forEach(function(value, property) {
Object.defineProperty(receiver, property, Object.getOwnPropertyDescriptor(supplier, property));
        });
} else {
for (var property in supplier) {
if (supplier.hasOwnProperty(property)) {
receiver[property] = supplier[property];
            }
        }
    }
}

如果您需要使用一个 mixin() 函数，一定要仔细检查它在 ECMAScript 5 可以正常工作，特别是 getter 和 setter 方法。否则，你会发现自己陷入像我一样的错误。