Prototypfunktion nicht

Question

definiert

Der folgende Code läuft gut:

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

Der folgende Code erzeugt einen Fehler

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

Weil Sie Taste in Button Funktion zurückzukehren.

Und Ihre applyjSonProperties gibt nichts zurück.

versuchen, etwas wie folgt aus:

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

nicht sicher, was Sie versuchen, hier zu tun. Da Sie eine lokale Variablenschaltfläche explizit aus der Konstruktorfunktion zurückgeben, ist divButton = new Button('div') ein div-Element wie <div>Track Order</div>. Dieses Element hat offensichtlich keinen Zugriff auf applyJsonProperties Funktion.

Answer 3

Wenn eine Funktion als Konstruktor aufgerufen wird, sein diese als neues Objekt initialisiert wird, die von dem Konstruktor des Prototyp erbt, das heißt das interne Objekt [[Prototype]] Referenzen der Öffentlichkeit Konstruktor Prototyp Eigenschaft.

Wenn Sie ein anderes Objekt (im OP ein DOM HTMLButtonElement) zurückgeben, erbt dieses Objekt nicht vom Konstruktor. z.B.

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

Wie Rudolf Manusadzhyan schon sagt, können Sie das Element als eine Eigenschaft der Instanz haben und rufen Methoden auf diesem, z.B.

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

Try Zugabe this.button = button; und es in applyJsonPropertiesthis.button.style[cssAttribute] = jsonProperties[cssAttribute]; als Referenz und entfernen 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);