如何在另一個Javascript函數之外調用Javascript函數？

Question

我有一個javascript函數，它應該通過調用另一個函數在點擊之後切換動畫。

function MyFunction(id) { 
    var target = document.getElementById(id); 
    var on = true; 

    this.startMe = function() { 
     //animation code 
     on = true; 
    } 
    this.stopMe = function() { 
     //animation code 
     on = false; 
    } 
    this.toggleMe = function() { 
     if (on) this.stopMe(); 
     else this.startMe(); 
    } 
    target.addEventListener('click', function() { 
     this.toggleMe(); 
    }, false); 
} 

問題在於toggleMe和addEventListener函數。 「this」指的是函數本身，而不是包含它的函數，這是我需要它參考的。我該如何解決這個問題？

Answer 1

最簡單的解決方法是使用一個封閉的可變以下

function MyFunction(id) { 
    var self = this; 
    var target = document.getElementById(id); 
    var on = true; 

    this.startMe = function() { 
     //animation code 
     on = true; 
    } 
    this.stopMe = function() { 
     /animation code 
     on = false; 
    } 
    this.toggleMe = function() { 
     if (on) this.stopMe(); 
     else this.startMe(); 
    } 
    target.addEventListener('click', function() { 
     //this refers to the element here not the instance of MyFunction 
     //use a closure variable 
     self.toggleMe(); 
    }, false); 
} 

---

給出另一種解決方案是使用$.proxy()通過自定義執行上下文回調 - 您可以使用Function.bind()也，但不支持IE < 9

function MyFunction(id) { 
    var target = document.getElementById(id); 
    var on = true; 

    this.startMe = function() { 
     //animation code 
     on = true; 
    } 
    this.stopMe = function() { 
     //animation code 
     on = false; 
    } 
    this.toggleMe = function() { 
     if (on) this.stopMe(); 
     else this.startMe(); 
    } 
    //use Function.bind() to pass a custom execution context to 
    target.addEventListener('click', jQuery.proxy(function() { 
     // this refers to the element here not the instance of MyFunction 
     //use a closure variable 
     this.toggleMe(); 
    }, this), false); 
} 

---

還可以使用.click()/on('click')註冊單擊處理代替addEventListener

$(target).on('click', jQuery.proxy(function() { 
     // this refers to the element here not the instance of MyFunction 
     //use a closure variable 
     this.toggleMe(); 
    }, this), false); 

Answer 2

只需與參考添加另一個變量來this但用不同的名稱;那麼你可以在你的功能中使用它。

function MyFunction(id) { 
    var self = this; 

    var target = document.getElementById(id); 
    var on = true; 

    this.startMe = function() { 
     on = true; 
    } 

    this.stopMe = function() { 
     on = false; 
    } 

    this.toggleMe = function() { 
     if (on) self.stopMe(); 
     else self.startMe(); 
    } 

    target.addEventListener('click', function() { 
     self.toggleMe(); 
    }, false); 
} 

我個人的偏好是把它甚至更進一步，繼續使用self到處是有道理的：

function MyFunction(id) { 
    var self = this; 

    var target = document.getElementById(id); 
    var on = true; 

    self.startMe = function() { 
     on = true; 
    } 

    self.stopMe = function() { 
     on = false; 
    } 

    self.toggleMe = function() { 
     if (on) self.stopMe(); 
     else self.startMe(); 
    } 

    target.addEventListener('click', function() { 
     self.toggleMe(); 
    }, false); 
}