Question

我有一个快捷功能id()，它返回的元素与普通document.getElementById()一样。现在，我想创建一个原型函数print()来代替innerHTML。我已经测试了一些东西，然后进入了下面的代码。它不起作用，我也不十分清楚为什么...有人可以帮助我解决问题吗？谢谢...

var id = function(item) {
	this.element = document.getElementById(item);
	return element;
}

id.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  id('target').print('printed!');
}

#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}

<body>
  <div id="target">some text</div>
</body>

Answer 1

在调用构造函数以创建new的实例时，应使用id，并且不要从构造函数中显式返回任何内容，以便默认情况下返回实例-然后，您可以使用相关的原型方法：

var id = function(item) {
	this.element = document.getElementById(item);
}

id.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  const myElm = new id('target');
  myElm.print('printed!');
}

#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}

<body>
  <div id="target">some text</div>
</body>

这样做的时候

return element;

在构造函数的末尾，这将导致返回的元素是纯HTML元素，而不是id的实例（并且只有id的实例具有print方法）。

如果您不想在调用new时想使用id，则可以自己创建id来返回具有{{ 1}}方法（通过在print中调用new并返回）：

id

var id = function(item) {
  const instance = new MyElmClass(item);
  return instance;
}
var MyElmClass = function(item){
  this.element = document.getElementById(item);
};

MyElmClass.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  const myElm = id('target');
  myElm.print('printed!');
}

#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}

Answer 2

正如其他人指出的那样，您需要构造一个对象以使用其原型。但是，new id一直很乏味，因此让我们将构造移入函数本身：

function id(item) {
  var obj = Object.create(id.prototype);
  obj.element = document.getElementById(item);
  return obj;
}

id.prototype.print = function(value) {
  this.element.innerHTML = value;
}

document.body.onclick = function() {
  id('target').print('printed!');
}

<body>
  <div id="target">some text</div>
</body>

现在，让我们做一些改进。为简便起见，将id重命名为$，使其接受任意选择器，并将print重命名为html：

function $(selector) {
  var obj = Object.create($.prototype)
  obj.element = document.querySelector(selector);
  return obj;
}

$.prototype.html = function(value) {
  this.element.innerHTML = value;
}

document.body.onclick = function() {
  $('#target').html('printed!');
}

<body>
  <div id="target">some text</div>
</body>

恭喜，我们刚刚发明了jQuery！ ;）

Answer 3

关闭时，只需实例化对象，而无需返回。

var id = function(item) {
    this.element = document.getElementById(item);
}

id.prototype.print = function(value) {
    this.element.innerHTML = value;
}

var target = new id('target'); // <-- instantiate the object

document.body.onclick = function() {
  target.print('printed!');
}

JavaScript-如何创建原型函数以在所选元素中打印文本？

3 个答案: