インスタンスを介してバリューを渡す方法は？

Question

私はJavascriptを初めて使用しています。インスタンスを介して関数に値を渡すにはどうすればよいですか？

私は主な関数（クラス）に渡すこのオブジェクト/インスタンスにいくつかの値を持っていますが、これらの値のいくつかはオプションです。渡されないと、デフォルト値が使用されます。ここで

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

は、ロジックが指定されたボタンがクリックされたときに、単に指定された入力フィールドにファイル名を表示することですrequestFileNameがtrueに設定されている場合、それが表示する関数

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

}()); 

ですプロンプト名を入力し、そうでない場合は、デフォルトのランダムな文字列を使用します。

しかしbuttonIdにはnullが返されています...これについてアドバイスを受けることはできますか？ Javascriptをthisに一種の注意が必要ですので、ここで

はjsFiddle

Answer 1

です。

まず、あなたの関数内で、あなたの変数を定義した：var buttonId, inputField, requestFileName, fileName;

そしてあなたは、この時点で、しかしthisthis.buttonId = null;

を言って、それを再定義しようとしているようはに見えるがwindowを指し、あなたの機能ではなく、オブジェクトです。したがって、基本的にはbuttonIdの2つの変数を作成します。これはwindowオブジェクトに属し、その1つは関数のスコープ内に属します。この時点で

あなたが降りてくるときとdocument.getElementById(buttonId)、buttonIdはundefined、ないnullです。

あなたは、彼らが作り出すものを見るために宣言した後、いくつかのデバッグ文に置くことによってこれを確認することができます

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 

あなたはイベントリスナーを添付したい場合、あなたはおそらくあなたが何buttonIdされるように適切に定義する必要があります。