你如何創建一個像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>