如何使函数跟踪元素[重复]

Question

在JavaScript 中，您经常会看到显示document.getElementById("element").someFunction(); 或$("element").someFunction(); 而不是someFunction($("element")); 的函数。其中someFunction(element) 看起来有点像下面的代码。

someFunction(element) {
    //element.doSomething();
}

我的问题是如何创建一个函数来操纵它所附加的元素，而不是操纵作为参数传递的元素？

Answer 1

你可以使用prototype实现它

// `getElementById` returns a `Element` object so extend it's prototype
Element.prototype.someFunction = function(){
   // this.somethig
}

document.getElementById("element").someFunction();

Element.prototype.someFunction = function() {
  console.log(this.value)
}

document.getElementById("element").someFunction();

<input value="abc" id="element" />

---

注意：It's really bad practice to extend prototype of native object.

Answer 2

您正在寻找prototypes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

element.prototype.someFunction = function(){
  this.doSomething(); // this refers to element
}