你如何创建一个像jquery一样的函数的包装器对象

Question

我不知道从哪里开始但是我想要或者需要的是HTMLElement的包装函数所以我不扩展HTMLElement类但是扩展我自己的对象然后检查有类来查看元素是否有类等等但是我的代码根本不起作用，它说$（...）。hasClass不是一个函数

$ = function(a, b) {
  this.$el = document.querySelector(a);
  return this;
}

Object.assign($.prototype, {
  hasClass: function(selector) {
    return this.$el.classList.contains(selector);
  }
})

console.log($('#list').hasClass('list'));

Answer 1

你几乎就在那里 - 问题在于独立表达式

$('#list')

将具有window的默认调用上下文（ $ function中的this值）。 如果要创建可以使用原型方法的实例，请在调用$之前输入new ：

 const $ = function(a, b) { this.$el = document.querySelector(a); } Object.assign($.prototype, { hasClass: function(selector) { return this.$el.classList.contains(selector); } }) console.log(new $('#list').hasClass('list')); console.log(new $('#list2').hasClass('foo')); 

 <div id="list"></div> <div id="list2" class="foo"></div> 

如果您不想在每次调用之前添加new ，可以在$使用Object.create ：

 const $ = function(a, b) { const $obj = Object.create(proto); $obj.$el = document.querySelector(a); return $obj; } const proto = { hasClass: function(selector) { return this.$el.classList.contains(selector); } }; console.log($('#list').hasClass('list')); console.log($('#list2').hasClass('foo')); 

 <div id="list"></div> <div id="list2" class="foo"></div> 

我认为jQuery的方式是，返回对象的内部原型是$.fn ，例如：

 const $ = function(a, b) { const $obj = Object.create($.fn); $obj.$el = document.querySelector(a); return $obj; }; $.fn = { hasClass: function(selector) { return this.$el.classList.contains(selector); } }; console.log($('#list').hasClass('list')); console.log($('#list2').hasClass('foo')); 

 <div id="list"></div> <div id="list2" class="foo"></div> 

Answer 2

Alternate Method使用函数内部的返回函数

 const $ = function(a, b) { var elem = document.querySelector(a); return { hasClass: function(selector) { return elem.classList.contains(selector); }, addClass:function(cls){ elem.classList.add(cls) } } }; console.log($('#list').hasClass('list')); console.log($('#list2').hasClass('foo')); $('#list2').addClass('color_red'); 

 .color_red{ color:red } 

 <div id="list"></div> <div id="list2" class="foo">hello</div>