原型函数没有定义

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

因为你在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 2

不知道你正试图在这里做。正如你明确地从构造函数返回一个局部变量按钮，divButton = new Button('div')将是一个div元素，如<div>Track Order</div>。这个元素显然没有applyJsonProperties功能。

Answer 3

当一个函数被称为构造函数，其这初始化为一个新的对象，从构造函数的原型继承，即对象的内部[[Prototype]]引用构造函数的公共原型财产。

当您返回一个不同的对象（在OP中，一个DOM HTMLButtonElement）时，那么该对象不会从构造函数继承。例如

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

鲁道夫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">

Answer 4

尝试增加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);