将范围绑定到函数调用之外的函数

An example:

var MyClass = (function () {
    function MyClass() {
        // construct
    }

    MyClass.prototype.clickEvent = function() {
        this.doSomething();
    };

    MyClass.prototype.doSomething = function() {
        // do something here
    };

    return MyClass;
})();

var mc = new MyClass();
$('my-ele').click(mc.clickEvent.bind(mc));

I need to bind mc to mc.clickEvent to make this work. Is there another way to do this? It works fine, it's just it would be nice if there was a way to define the scope of my clickEvent() function without needing to attach .bind(mc) when setting the click event function.

我需要将mc绑定到mc.clickEvent以使其工作。还有另一种方法吗?它运行正常,如果有一种方法可以定义clickEvent()函数的范围而不需要在设置click事件函数时附加.bind(mc),那就太好了。

I saw something like this:

我看到这样的事情:

MyClass.prototype.clickEvent = function() {
    this.doSomething();
}.bind(this);

but that didn't work.

但那没用。

3 个解决方案

#1

var MyClass = (function () {
    function MyClass() {
      this.clickEvent = this.clickEvent.bind(this);
    }

    MyClass.prototype.clickEvent = function() {
      this.doSomething();
    };

    MyClass.prototype.doSomething = function() {
        alert('something');
    };

    return MyClass;
})();

var mc = new MyClass();
$('.my-ele').click(mc.clickEvent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href=#" class="my-ele">test</a>

Do this for binding all its class methods.

这样做是为了绑定它的所有类方法。

function MyClass() {
    for (var i in this) {
        if (typeof this[i] === 'function') {
          this[i] = this[i].bind(this);   
        }
    }
}

#2

If you were using mc.clickEvent directly it would work as you expect. click is actually changing the binding and by explicitly calling bind like that you are telling it not too.

如果您直接使用mc.clickEvent,它将按预期工作。 click实际上正在改变绑定,并通过显式调用bind,就像你告诉它一样。

You also might be able to mimic that from the start. (That's what Moogs answer does.

您也可以从一开始就模仿它。 (这就是穆格回答的问题。

An easier way that might come close would be to wrap the call like this:

可能接近的一种更简单的方法是像这样包装调用:

$('my-ele').click(function(i,e) { mc.clickEvent(i,e); })

This way within clickEvent this will still be mc.

这样在clickEvent中这仍然是mc。

#3

Your last snippet doesn't work because you didn't wrap the function before calling the bind method like so:

你的最后一个片段不起作用,因为在调用bind方法之前没有包装函数,如下所示:

function MyClass() {
    this.clickEvent = (function() {
        this.doSomething();
    }).bind(this);
}

However, this is inefficient because it requires the function to be defined inside the constructor which does not take advantage of the prototype chain. I just felt it would be helpful explaining why your last snippet didn't work.

但是,这是低效的,因为它需要在构造函数内定义函数,而不利用原型链。我觉得这将有助于解释为什么你的最后一个片段不起作用。

#1

var MyClass = (function () {
    function MyClass() {
      this.clickEvent = this.clickEvent.bind(this);
    }

    MyClass.prototype.clickEvent = function() {
      this.doSomething();
    };

    MyClass.prototype.doSomething = function() {
        alert('something');
    };

    return MyClass;
})();

var mc = new MyClass();
$('.my-ele').click(mc.clickEvent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href=#" class="my-ele">test</a>