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之前放置$：

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

备用方法在函数内部使用返回函数

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>

如何创建充当jquery之类的函数的包装对象

2 个答案: