javascript - select2 背后的 Javascript 功能是什么

Question

要将普通的 Html 选择变成 select2文档说只需在普通的 Html select 上调用 select2() 即可，如下所示

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

当我尝试这个时，我还导入了通过 npm 安装的 select2 模块。

import select2 from 'select2';

允许向现有对象添加新函数(在本例中为 .select2())的 Javascript 功能/概念/技术的名称是什么？

<小时/>

更新 我忘了提及我正在使用 jquery，这是 BJRINT 所采用的。所以看来这是一个 jquery + select2 的事情。

Answer 1

What is name of the Javascript feature that allows one to add a new function to an existing object?

简短回答:

原型(prototype)。

Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype property can be used to add methods to existing constructors.

有关 JavaScript 原型(prototype)的更多详细信息，您可以引用 MDN 文档Object prototypes .

<小时/>

详细答案:

• select2 是一个 jQuery 插件。如果你检查它是 source code ，您会发现它使用名为 select2 的新函数扩展了 $.fn:

$.fn.select2 = function (options) {..}

• 如果你检查 jQuery 的 source code ，您会发现 jQuery.fn 是 jQuery.prototype 的别名:

jQuery.fn = jQuery.prototype = { ... }

• jQuery() 函数 returns a jQuery object (more details on this)。

• 而且，同样在 jQuery 的源代码中，您可以发现 global variable '$' 是 jQuery 对象的别名:

window.jQuery = window.$ = jQuery;

所以，基本上...

• $ 是 jQuery() 函数的别名
• $('.js-example-basic-single') 返回一个 jQuery 对象
• 您的插件已使用新方法 select2() 扩展了此 jQuery 对象