如何创建充当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将具有（函数this内的值）的默认调用上下文$。如果您想创建一个可以使用原型方法的实例，请new在调用之前放置$：

$('#list')

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'));

如果您不想new在每次调用之前放置，您可以使用Object.createinside $：

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

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'));

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

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

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'));