JavaScript 函数获取对象

Question

有没有办法让函数在函数名之前获取对象值？下面是我想要实现的目标的一个例子。我希望能够读取函数中的 myElement 变量，但不将其作为参数传递，而是在带有点的函数之前传递它。

任何简单的示例或解释都会非常有帮助。

var myElement = document.getElementById('myID');

myElement.myFunction();

function myFunction() {
     alert(myElement);
}

Answer 1

执行此操作的唯一方法是将 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>