Question

以下代码运行良好：

function Button(tagName) {
  var button;
  if (tagName) button = document.createElement(tagName);
  else button = document.createElement(div);

  button.innerHTML = 'Track Order';
  button.applyJsonProperties = function(jsonProperties){
    if(jsonProperties){
      for(var cssAttribute in jsonProperties){
        this.style[cssAttribute] = jsonProperties[cssAttribute];
      }
    }
  }
  return button;
}

以下代码会产生错误

function Button(tagName) {
  var button;
  if (tagName) button = document.createElement(tagName);
  else button = document.createElement(div);

  button.innerHTML = 'Track Order';

  return button;
}
Button.prototype.applyJsonProperties = function(jsonProperties){
   if(jsonProperties){
     for(var cssAttribute in jsonProperties){
       this.style[cssAttribute] = jsonProperties[cssAttribute];
     }
   }
}

var divButton = new Button('div');
var props = { "color" : "blue" }
divButton.applyJsonProperties(props); //returns undefined function

Answer 1

不确定你在这里想做什么。当您从构造函数显式返回局部变量按钮时，divButton = new Button('div')将是<div>Track Order</div>之类的div元素。这个元素显然无法访问applyJsonProperties函数。

Answer 2

尝试添加this.button = button;并在applyJsonProperties this.button.style[cssAttribute] = jsonProperties[cssAttribute];中引用它并删除return button：

function Button(tagName) {
  var button;
  if (tagName) button = document.createElement(tagName);
  else button = document.createElement('div');

  button.innerHTML = 'Track Order';
  this.button = button;
}
Button.prototype.applyJsonProperties = function(jsonProperties){
   if(jsonProperties){
     for(var cssAttribute in jsonProperties){
       this.button.style[cssAttribute] = jsonProperties[cssAttribute];
     }
   }
}

var divButton = new Button('div');
var props = { "color" : "blue" }
divButton.applyJsonProperties(props);

Answer 3

因为您在Button函数中返回了按钮。

你的applyjSonProperties什么也没有回复。

尝试这样的事情：

function Button(tagName) {

  if (tagName) this.button = document.createElement(tagName);
  else this.button = document.createElement(div);

  this.button.innerHTML = 'Track Order';

}
Button.prototype.applyJsonProperties = function(jsonProperties){
  if(jsonProperties){
    for(var cssAttribute in jsonProperties){
      this.button.style[cssAttribute] = jsonProperties[cssAttribute];
    }
  }
  return this; //return modified (or not) instance
}

var divButton = new Button('div');
console.log(divButton.button);

var props = { "color" : "blue" }
divButton.applyJsonProperties(props);
console.log(divButton.button);

Answer 4

当一个函数作为构造函数被调用时，它的 this 被初始化为一个继承自构造函数原型的新Object，即对象的内部[[Prototype]]引用构造函数的public 原型属性。

当您返回另一个对象（在OP中，一个DOM HTMLButtonElement）时，该对象不会从构造函数继承。 e.g。

function Button(tagName) {
  var button = document.createElement(tagName || 'button');
  return button;
}

Button.prototype.applyJsonProperties = function(jsonProperties){};

var button = new Button();

console.log('button instanceof Button?: ' + (button instanceof Button)); // false
console.log('button.constructor: ' + button.constructor); // Not Button
console.log('Typeof button: ' + typeof button); // object
console.log('Typeof button.applyJsonProperties: ' + typeof button.applyJsonProperties); // undefined

正如Rudolf Manusadzhyan所说，你可以将元素作为实例的属性并在其上调用方法，例如。

function Button(tagName) {
  this.button = document.createElement(tagName || 'button');
}

Button.prototype.hide = function() {
  this.button.style.display = 'none';
}

Button.prototype.show = function() {
  this.button.style.display = '';
}

window.onload = function() {
  var button = new Button();
  button.button.textContent = 'The button';
  document.body.appendChild(button.button);
  document.getElementById('hideButton').onclick = function(){button.hide()};
  document.getElementById('showButton').onclick = function(){button.show()};
};

<input type="button" id="hideButton" value="Hide the button">
<input type="button" id="showButton" value="Show the button">

原型功能未定义

4 个答案: