你的 mixin 真的兼容 ECMAScript 5 吗?

我最近在与客户合作的项目中，需要充分利用的 ECMAScript 5，在此我遇到一个非常有趣的问题。 该问题源于一个非常常见的模式： mixin ， 也就是在 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();       // outputs "Nicholas"

在此示例中，object 对象接收了属性 name 和方法 sayName()。 这在 ECMAScript 3 中运行良好，但在 ECMAScript 5 上却没那么乐观。

这是我遇到的问题：

代码如下:
(function() {

    // to be filled in later
    var name;

    mixin(object, {
        get name() {
            return name;
        }
    });

    // let's just say this is later
    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 方法，因此它的值永远不会改变。