blocks|key|558623|text|extend方法在JavaScript库中非常常见，通常是一种允许使用代码将一个或多个对象的所有“自己”属性和方法添加到目标对象的方法。代码通常非常简单:迭代第一个参数之外的每个参数的所有键，并将存储在那里的值复制到第一个参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558624|"Mixin“指的是一种设计模式，在这种设计模式中，您可以将一个对象用作一组特定属性和方法的容器，以便在系统中的许多对象之间共享这些属性和方法。例如，您可能有宽度和高度的getter和setter，它们可以应用于应用程序中的所有UI组件，因此对于JavaScript，您可以创建一个可以用"new“实例化的函数，也可以创建一个包含这些方法的对象文本。然后，您可以使用“扩展”类型函数将这些方法复制到系统中任意数量的对象上。|558625|下划线有一个混入方法，它本质上只是一个扩展，其中所有传入对象的方法都被添加到基本下划线对象中，以便在链接中使用。jQuery的jQuery.fn扩展方法也做了类似的事情。|558626|就我个人而言，我喜欢保持扩展的原样，“将所有内容从这些对象复制到这个对象”类型的行为，同时有一个单独的混入方法，该方法只接受一个源对象，然后将所有其他参数视为要复制的属性和方法的名称(如果只传入目标和源，而没有其他参数，那么它就像是一个单源扩展)。|558627|例如：|558628|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);
++++}
}|code-block|syntax|javascript|558629|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The extend method is pretty common among JavaScript libraries and is generally a method that simply allows the consuming code to add all "own" properties and methods of one or more objects onto a target object. The code is usually pretty straightforward: iterate over all the own keys of each argument beyond the first and copy the value stored there to the first argument.

"Mixin" refers to a design pattern in which you use one object as a sort of container for a particular set of properties and methods you want to share across many objects in your system. For example, you might have width and height getters and setters that could apply to all UI components in your application and so you would create, in the case of JavaScript, either a function that can be instantiated with "new" or an object literal that holds these methods. You could then use an "extend" type function to copy these methods onto any number of objects in your system.

Underscore has a mixin method that is essentially just an extend where all of the passed in objects' methods are added to the base underscore object for use in chaining. jQuery does a similar thing with its extend method of jQuery.fn.

Personally I like to keep extend as is, a "copy everything from these objects to this object" type behavior while having a separate mixin method that instead accepts only a single source object and then treats all further arguments as names of properties and methods to copy (if only the target and source are passed in with no further arguments then it just acts like a single-source extend).

e.g.

<pre><code>function mixin(target, source) {
 function copyProperty(key) {
 target[key] = source[key];
 }

 if (arguments.length &gt; 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);
 }
}
</code></pre>

I'm looking through various libraries, and seeing extend() pop up a lot, but I'm also seeing mixin() show up. YUI has both mixins and extensions.

What's the difference between these two concepts? When would I decide between a mixin and extending an object?

Thanks,
Matt

What's the difference between mixin() and extend() in Javascript libraries

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在查看各种库，并且看到extend()经常弹出，但我也看到mixin()出现了。YUI既有混入又有扩展。这两个概念有什么不同？什么时候我应该在混合和扩展对象之间做出决定？谢谢，马特

Javascript库中的mixin()和extend()有什么区别-腾讯云开发者社区-腾讯云

问Javascript库中的mixin()和extend()有什么区别
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript库中的mixin()和extend()有什么区别EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript库中的mixin()和extend()有什么区别
EN