Javascript 原型函数未定义

以下代码运行良好：

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

---

因为您在

按钮

功能中返回按钮

而您的

applyjSonProperties

不返回任何内容

试着这样做：

功能按钮（标记名）{
如果（标记名）this.button=document.createElement（标记名）；
else this.button=document.createElement（div）；
this.button.innerHTML='Track Order'；
}
Button.prototype.applyJsonProperties=函数（jsonProperties）{
if（jsonProperties）{
for（jsonProperties中的var cssAttribute）{
this.button.style[cssAttribute]=jsonProperties[cssAttribute]；
}
}
返回此；//返回已修改（或未修改）的实例
}
var divButton=新按钮（“div”）；
console.log（divButton.button）；
var props={“颜色”：“蓝色”}
divButton.applyJsonProperties（道具）；
console.log（divButton.button）不确定您在这里要做什么。当您从构造函数显式返回一个局部变量按钮时，
divButton=new button（'div'）
将是一个类似于
跟踪顺序的div元素。此元素显然没有访问
applyJsonProperties
函数的权限。
当函数作为构造函数调用时，它的This被初始化为继承自构造函数原型的新对象，即对象的内部
[[prototype]]
引用构造函数的公共原型属性

当您返回一个不同的对象（在OP中是domhtmlbuttonelement）时，该对象不会从构造函数继承。e、 g


功能按钮（标记名）{
var button=document.createElement（标记名| |“button”）；
返回按钮；
}
Button.prototype.applyJsonProperties=函数（jsonProperties）{}；
var按钮=新按钮（）；
console.log（'button instanceof button？：'+（button instanceof button））；//假的
console.log（'button.constructor:'+button.constructor）；//非按钮
console.log（'Typeof按钮：'+Typeof按钮）；//对象
console.log（'Typeof button.applyJsonProperties:'+Typeof button.applyJsonProperties）；//未定义
尝试添加
this.button=button
并在
applyJsonProperties
中将其引用为
this.button.style[cssAttribute]=jsonProperties[cssAttribute]并删除返回按钮
：

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); 

divButton.applyjSonProperties（props）
错误的方法名称当作为构造函数调用Button函数时，从Button函数返回的对象不是Button的实例，即它不会从Button.prototype继承，因为它返回DOM Button元素，不是构造函数的this。这里的
div
缺少引号：
document.createElement（div）
。您可以将代码简化为
tagName=tagName | | div'在第一行。@RobG我更新了答案。如您所见-
divButton
现在是带有
属性的自定义
按钮
类的实例。按钮
属性可能没有
。按钮
属性并设置
this=document.createElement（标记名）
内部
函数按钮（标记名）
？@guest，否，因为
这个
是对实例及其成员、方法等的引用。。否则，
new按钮（）的结果
将不仅仅创建为“DOM元素”，而是创建
按钮的实例。但是您可以在方法中
返回这个.button
（例如applyJsonProperties），该方法的结果将立即是“DOM元素”，而不是
button
的实例。（为我的英语道歉）他为什么要试试这个？一个好的答案应该解释原始代码中的错误以及解决方案是如何修复的。很抱歉，这里只有几行代码，如果您理解问题属性，您会注意到。无论如何，你可以在这个答案中看到，我添加了
this.button=button
并在
applyJsonProperties
中将其引用为
this.button.style[cssAttribute]=jsonProperties[cssAttribute]在答案中加入解释，而不是评论。谢谢！这很有帮助！在这种情况下，如何确保
var按钮
是
按钮
的一个实例？