Javascript - getDomElement 链接到这里的哪里？

Question

我正在努力了解面向对象的 Javascript，并且我有一些示例代码可供使用。

它的一部分发布在下面，它创建了一个按钮，这一切都工作正常，但是当我尝试重新创建它时，我无法将引用 getDomElement 来自之后this 关键字。

有人可以帮我解决这个问题吗？

谢谢:-)

澄清一下 - getDomElement 似乎不是一个变量，但它可以工作。这是某种属性吗？

var SaveButton = function(value, click_action){
   var _dom_element = document.createElement("input");
       _dom_element.type = "button";
       _dom_element.value = value;

 _dom_element.onclick = function(){
        click_action.call(null);
    };

 this.getDomElement = function() {
      return _dom_element;
 };
}

Answer 1

SaveButton 是一个构造函数，它在您的情况下创建 input 类型 button 。您将值和点击事件处理程序传递给该构造函数。

这里，_dom_element 是该函数的局部变量。并且您将点击事件绑定(bind)到它。

现在回答你的问题:

 this.getDomElement = function() {
      return _dom_element;
 };

getDomElement 是该构造函数的属性。它附加到您要使用构造函数创建的所有按钮。 由于 _dom_element 对于该函数而言是私有(private)/本地的，因此 getDomElement 充当 API 来获取对该按钮的引用。

How does JavaScript know what to do with that?

它只是附加到该构造函数的属性。所以当你打电话

var button = new SaveButton("value", callbackfunction);

var reference = button.getDomElement();

// reference.style.background do anything with that button now.

它将在该按钮对象中查找属性并调用该函数。反过来，当您使用构造函数创建对象时，会为该对象创建作用域。因此，属性 getDomElement 将成为该范围的一部分，并且能够返回 _dom_element 引用。