【问题标题】：What is the Javascript feature that is behind select2select2 背后的 Javascript 功能是什么
【发布时间】：2019-10-11 08:54:45
【问题描述】：

要将普通的 Html 选择转换为 select2，文档说只需像这样在普通的 Html 选择上调用 select2()

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

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

import select2 from 'select2';

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

更新我忘了提到我使用的是 BJRINT 所使用的 jquery。所以看起来这是一个 jquery + select2 的东西。

【问题讨论】：

了解 javascript 原型。
猴子补丁？ davidwalsh.name/monkey-patching 但不仅仅是 JavaScript 允许它。
我看到你正在使用 JQuery。在这种情况下，这是一个名为plugins 的库的创建者的基本功能。它是pretty easy to implement
看看How to create a jQuery plugin with methods?
Jquery 和 Select2 有问题，看看我的回答。

标签： javascript jquery prototype jquery-select2 jquery-select2-4

【解决方案1】：

允许向现有对象添加新功能的 Javascript 功能的名称是什么？

简答：

原型。

原型是 JavaScript 对象相互继承特性的一种机制。原型属性可用于向现有构造函数添加方法。

有关 JavaScript 原型的更多详细信息，您可以参考 Object prototypes 上的 MDN 文档。

详细解答：

select2 是一个 jQuery 插件。如果您检查它是 source code，您会发现它扩展了 $.fn，并添加了一个名为 select2 的新函数：

$.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 对象

【讨论】：

【解决方案2】：

你误解了一件事。你说To turn a normal Html select into a select2 the documentation says to simply call select2() on the normal Html select like this 但这不是一个普通的 HTML 选择元素。

当您使用语法 $() 时，您正在使用 jQuery 访问您的“普通”html 元素。

就像其他人指出的那样，Select2 能够在这里添加一个方法，因为 jQuery 有一个可扩展的插件架构，允许向主 jQuery 对象添加新的行为（方法），在你的例子中是 $()。

【讨论】：

【解决方案3】：

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

JavaScript 有原型继承，这意味着对象可以从其他对象继承方法。现在，您可以随时向任何对象添加属性，这并不是真正的功能，而是底层语言设计的结果。在其他语言中，它们将被称为扩展函数

  const prototype = { };
  const instance = Object.create(prototype);

  console.log(instance.method); // does not exist yet

 prototype.method = function() { };

 instance.method(); // exists now

现在也适用于 HTML 元素：它们继承了 Element 类，您可以轻松地向其原型添加方法：

 Element.prototype.method = function() {
   console.log(this);
 }

 document.body.method();

在您的情况下，您没有直接的 HTML 元素，而是一个环绕原生元素对象的 jquery 实例对象。然而，继承的基本概念也适用于此，这意味着向 $.fn 添加方法会反映到所有 jQuery 实例。这就是插件的作用。

【讨论】：

【解决方案4】：

这称为 JQuery 插件。

这是来自 JQuery 的 sn-p documentation

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify(); // Makes all the links green.

【讨论】：

【解决方案5】：

在 stackoverflow 的一个线程中，一些用户说某些 Jquery 版本和 select2 存在问题。 Select2() is not a function

在 stackoverflow 代码中，sn-p 完全可以工作。

我这样做了： https://jsfiddle.net/avfjoLtd/61/

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

</head>
<body>


<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
</body>
</html>

但小提琴一直说无法读取未定义的属性“绑定”。使用外部小提琴，它可以工作

【讨论】：