Wie wird Wert durch Instanz übergeben?

Question

Ich bin neu in Javascript. Wie übertrage ich Werte über eine Instanz an eine Funktion?

Ich habe ein paar Werte in diesem Objekt/Instanz, die ich an die Hauptfunktion (Klasse) übergeben möchte, einige dieser Werte sind optional, wenn nicht übergeben, werden Standardwerte verwendet. Hier

var test = new Test({ 
    buttonId: 'sb', 
    inputField: 'saveTextarea' 
}); 

ist die Funktion

(function() { 

var buttonId, inputField, requestFileName, fileName; 

buttonId = null; 
inputField = null; 
requestFileName = null; 
fileName = null; 

// constructor 
this.Test = function() { 

    // defaults 
    var defaults = { 
     buttonId: "", 
     inputField: "", 
     requestFileName: false, //if true, prompt for fileName 
     fileName: Math.random().toString(36).slice(2) 
    } 

    // extend defaults 
    if (arguments[0] && typeof arguments[0] === "object") { 
     this.options = extendDefaults(defaults, arguments[0]); 
    } 

} 



document.getElementById(buttonId).onclick = function() { 

    if (requestFileName == true) 
    { 
     fileName = prompt("Enter file name"); 
    } 

    var myTextArea = document.getElementById(inputField).value 
    myTextArea.innerHTML = fileName; 
}; 

function extendDefaults(source, properties) { 
    var property; 
    for (property in properties) { 
     if (properties.hasOwnProperty(property)) { 
     source[property] = properties[property]; 
     } 
    } 
    return source; 
} 

}()); 

Die Logik ist einfach in dem angegebenen Eingabefeld die Dateinamen angezeigt werden, wenn die angegebene Taste angeklickt wird, wenn requestFileName auf true gesetzt ist, dann wird angezeigt, es die Name der Eingabeaufforderung, andernfalls wird eine zufällige Zeichenfolge verwendet, die die Standardeinstellung ist.

Aber ich bekomme null für buttonId ... kann ich einen Rat bekommen?

Hier ist die jsFiddle

Answer 1

So in Javascript this etwas schwierig ist.

Zuerst Sie definiert die Variablen in Ihrer Funktion: var buttonId, inputField, requestFileName, fileName;

Und dann es sieht wie Sie es neu zu definieren, indem er sagte this.buttonId = null;

jedoch this an diesem Punkt bezieht sich auf die window sind versucht, Objekt, nicht deine Funktion. Also, was Sie im Wesentlichen getan haben, ist die Erstellung von 2 Variablen für buttonId -Eine, die zu dem window Objekt gehört und eine, die im Rahmen Ihrer Funktion gehört.

Also, wenn Sie kommen und document.getElementById(buttonId), buttonId an dieser Stelle ist undefined, nicht null.

Sie dies überprüfen können in einigen Debugging-Anweisungen nach Erklärung, indem sie, um zu sehen, was sie produzieren:

var buttonId, inputField, requestFileName, fileName; 
    console.log(buttonId); // undefined 

    this.buttonId = null; 
    this.inputField = null; 
    this.requestFileName = null; 
    this.fileName = null; 

    console.log(buttonId); // still undefined 
    console.log(this.buttonId); // null 

Wenn Sie einen Ereignis-Listener anhängen möchten, werden Sie wahrscheinlich richtig definieren müssen, was Sie was buttonId sein .