有没有办法让函数在函数名之前获取对象值?下面是我想要实现的目标的一个例子。我希望能够读取函数中的 myElement 变量,但不将其作为参数传递,而是在带有点的函数之前传递它。
任何简单的示例或解释都会非常有帮助。
var myElement = document.getElementById('myID');
myElement.myFunction();
function myFunction() {
alert(myElement);
}
最佳答案
执行此操作的唯一方法是将 myFunction
添加到 HTMLElement
的原型(prototype)(这是 document.getElementById() 返回的内容
) >. That's usually frowned upon ,但如果这是您自己的项目并且您知道自己在做什么,那么您可以这样做。
var myElement = document.getElementById('myID');
HTMLElement.prototype.myFunction = function() {
console.log(this);
}
myElement.myFunction();
<div id="myID"></div>
有了这个原型(prototype),您就可以在代码中的每个 HTMLElement 上调用 myFunction
。
关于您最后的评论,该功能可能是
HTMLElement.prototype.myFunction = function() {
alert(this.id);
}
我不明白为什么你应该这样做,因为这样做更容易
alert(myElement.id);
<小时/>
关于评论,这就是我要做的。不要扩展任何东西,而是创建您自己的类(或函数),它采用 HTMLElement。现在在这个类上,您可以添加任何您想要的方法,操作您的元素,然后从 getter 返回纯 HTMLElement。显然,您可以将其更改为您想要的任何返回。
class MyHtmlElement {
constructor(htmlElement) {
this._htmlElement = htmlElement;
}
alertId() {
alert(this._htmlElement.id);
// optional
return this;
}
logId() {
console.log(this._htmlElement.id);
// optional
return this;
}
setId(newId) {
this.htmlElement.id = newId;
// optional
return this;
}
setStyle(prop, val) {
this._htmlElement.style[prop] = val;
// optional
return this;
}
get htmlElement() {
return this._htmlElement;
}
set htmlElement(value) {
this._htmlElement = value;
}
}
const el = new MyHtmlElement(document.getElementById('foo'));
el
.setId('bar')
.logId()
.alertId()
.setStyle('background-color', 'red')
.setStyle('width', '100vw')
.setStyle('height', '100vh');
// If you need the plain element, return it
const plainHTMLElement = el.htmlElement;
console.log(plainHTMLElement);
<div id="foo"></div>
关于JavaScript 函数获取对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50880228/