Javascriptの無名関数で関数を呼び出すときに "this"キーワードを使う方法は？

Question

もともとは匿名関数であった関数を呼び出すことを検討していますが、私のコードでこの関数が3回必要です。

function saveButton() { 
 
    this.parentElement.parentElement.querySelector('h3').innerHTML = this.parentElement.querySelector('input[name="task-title"]').value; 
 
    this.parentElement.parentElement.querySelector('p').innerHTML = this.parentElement.querySelector('textarea').value; 
 
    this.parentElement.parentElement.querySelector('.popup').className = 'popup hidden'; 
 
    this.parentElement.parentElement.querySelector('.overlay').className = 'overlay hidden'; 
 
    saveWork(); 
 
};

は、私はこのような匿名関数でこの関数をコールする場合：

confirmButton.onclick = function() 
 
    saveButton(); 
 
};

しかし、その後 は、だから私はこのような関数を定義しました私は私がを使用することができなかったことに気づいた無名関数の。匿名機能でconfirmButton()に電話するにはどうすればよいですか？

Answer 1

confirmButton.onclick = saveButton; 

または

confirmButton.onclick = function(){ 
    saveButton.call(this); 
}; 

それは、DOMノードと呼び出したい関数に同じ名前を持つことをお勧めしませんが。いくつかのことをあなたが投稿コードの断片を見て、と推測してbuttonClick

Answer 2

ような、より理にかなって何かにあなたの関数の名前を変更し、私は次のリファクタリングお勧め：たぶん

function saveButton(parentElem) { 
    var myParent = parentElem || this.parentElement; 
    myParent.parentElement.querySelector('h3').innerHTML = myParent.querySelector('input[name="task-title"]').value; 
    myParent.parentElement.querySelector('p').innerHTML = myParent.querySelector('textarea').value; 
    myParent.parentElement.querySelector('.popup').className = 'popup hidden'; 
    myParent.parentElement.querySelector('.overlay').className = 'overlay hidden'; 
    saveWork(); 
} 

confirmButton.onclick = function() { 
    // I suppose when this function is called somewhere else, 
    // you actually know who is the parent element, so: 
    saveButton(document.querySelector('.theParentElement')); 
}; 

// If you calling it somewhere where "this" is available, 
// then simply call the function with no arguments: 
saveButton(); 

のいくつかのバリエーションを上記の例はあなたを助けることができます。それ以外にも、コードの大部分を見ることなく、より良い答えを考えることはできません。

Answer 3

関数式を使ってみましたか？ 基本的には、関数に変数を代入することを意味します。 thisを読むと、関数式と関数宣言の違いについて知ることができます。

はあなたが与えられた匿名関数の親スコープを使用したい：

は、あなたの質問については、ほとんどの時間、それは、この場合です。

場合厥、私はこの小ぎれいなトリックをお勧めしている場合：このトリックは、単にグローバル名前空間:)