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

如何在另一个Javascript函数之外调用Javascript函数？

2 个答案: