Question

我想做这样的事情：

function alrtHtml() {
  alert(this.innerHTML)
}

function myFunc(id) {
  document.getElementById(id).alrtHtml()
}

<html>
<head>
  <meta charset="UTF-8" />
  <title>test</title>
</head>
<body>
  <h1 id="h1">Hallo world!</h1>
  <input type="button" value="click" onclick="myFunc('h1')" >
</body>
</html>

应提醒文字“你好世界！”在h1标记内。

Answer 1

您要查看的内容是将您的函数添加到document.getElementById(id)返回的任何类型的prototype。

在这种情况下，它返回Element，因此为了将您的函数添加到其原型，您将编写以下代码。

Element.prototype.alrtHtml = function() {
  alert(this.innerHTML)
}

Answer 2

您通常不希望扩展本机原型，并且不创建可链接方法的一种方法是创建自己的方法来获取元素，然后创建另一个可链接的方法来警告innerHTML和大多数图书馆一样。

可能最简单的例子就是这样的

function getElement(selector) {
  if (!(this instanceof getElement)) return new getElement(selector);
  this.element = document.querySelector(selector);
  return this;
}

getElement.prototype.alertHtml = function() {
  alert(this.element.innerHTML);
  return this;
}

function myFunc(id) {
  getElement(id).alertHtml();
}

myFunc('#test');

<div id="test">TEST</div>

这样你只是扩展你自己的对象，而不是本机对象，你可以创建任何类型的可链接方法来添加它。

Answer 3

作为另一种选择，您也可以将元素直接传递给alertHTML：

function alertHTML(el) {
  alert(el.innerHTML)
}

function myFunc(id) {
  var elArg = document.getElementById(id)
  alertHTML(elArg)
  
  // You could also write it like this:
  /*
  alertHTML(document.getElementById('h1'))
  */
}

<h1 id='h1'>Hello, world</h1>
<button onclick="myFunc('h1')">Button</button>

要做到这一点有很多理由，但其中的要点是避免在其他人在alertHTML原型上创建Element方法时遇到问题。

编辑：如果确实想要使用this，您可能还想了解绑定函数 - funfunfunction made a good video on this here。这是如何工作的：

function alertHTML() {
  alert(this.innerHTML)
}

function myFunc(id) {
  var el = document.getElementById(id)
  alertHTML.apply(el)
}

<h1 id='h1'>Hello, world</h1>
<button onclick="myFunc('h1')">Button</button>

apply运行this的任何功能，作为传递给apply的第一个参数。（传递给apply的其余参数将直接传递给函数。）

如何在DOM节点上使用“this”调用自己的方法

3 个答案: