如何在另一个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); 
}