Javascript库中mixin()和extend()之间的区别是什么

Question

我正在浏览各种库,并看到extend()弹出很多,但我也看到mixin()出现了.YUI既有mixins又有扩展.

这两个概念有什么区别？我何时能在mixin和扩展对象之间做出决定？

谢谢,马特

Answer 1

Mixins不适用于instanceof但扩展了.Mixins允许多重继承但通过伪造它,而不是通过正确链接原型.

我将展示一个Ext-JS示例,但该概念适用于任何提供mixins的类库,它们都只是将属性复制到对象而不是链接原型.

Ext.define('Ext.Window', {
    extend: 'Ext.Panel',
    requires: 'Ext.Tool',
    mixins: {
        draggable: 'Ext.util.Draggable'
    }
});

Ext.Window instanceof Ext.Panel //true
Ext.Window instanceof Ext.util.Draggable // false

Mixins是一种向对象添加某些功能而不需要继承的好方法.如果必须继承某些东西以获得某些功能,那么就不能使用两个类的功能. 许多人认为这是邪恶的.

Ext-JS在想要添加Labelable功能时遇到了这个问题,FieldSet而其他人没有像字段那样输入.它无法从Labelable内部行为中受益,Field因为它们无法扩展,Field因为它也具有所有输入行为.

Answer 2

extend方法在JavaScript库中非常常见,并且通常是一种方法,它允许使用代码将一个或多个对象的所有"自有"属性和方法添加到目标对象上.代码通常非常简单:迭代第一个参数之外的每个参数的所有键,并将存储在那里的值复制到第一个参数.

"Mixin"指的是一种设计模式,在该模式中,您可以将一个对象用作一组容器,用于要在系统中的多个对象之间共享的特定属性和方法集.例如,您可能拥有可应用于应用程序中所有UI组件的宽度和高度getter和setter,因此在JavaScript的情况下,您可以创建可以使用"new"实例化的函数或者使用对象文字实现的对象文字.持有这些方法.然后,您可以使用"扩展"类型函数将这些方法复制到系统中的任意数量的对象上.

Underscore有一个mixin方法,它基本上只是一个扩展,其中所有传入的对象的方法被添加到基础下划线对象以用于链接.jQuery使用jQuery.fn的extend方法做了类似的事情.

我个人喜欢按原样继续扩展,"将这些对象中的所有内容复制到此对象"类型行为,同时使用单独的mixin方法,而不是只接受单个源对象,然后将所有其他参数视为要复制的属性和方法的名称(如果只传递目标和源而没有其他参数,那么它就像单源扩展一样).

例如

function mixin(target, source) {
    function copyProperty(key) {
        target[key] = source[key];
    }

    if (arguments.length > 2) {
        // If there are arguments beyond target and source then treat them as
        // keys of the specific properties/methods that should be copied over.
        Array.prototype.slice.call(arguments, 2).forEach(copyProperty);
    } else {
        // Otherwise copy all properties/methods from the source to the target.
        Object.keys(source).forEach(copyProperty);
    }
}