从另一个对象的方法调用对象的原型方法

Question

I am trying to create a simple callback system that would fire upon hitting a button. Rather than the callback being a factory function, it is a prototype method of a different object. I've gotten it to work but I don't understand it. Why do I need to use .bind(object) to get the object to fire its method? Originally I tried no bind, and then bind(this), which both failed.

function Bar() {}

Bar.prototype = {
    getStuff: function () {
        return "Hello";
    },

    setStuff: function () {
        console.log( this.getStuff() );
    }
}

function Foo() {
    this.afterSubmit = null;
    var self = this;
    $('button').click(function () {
        self.submit()
    });
    return this;
}

Foo.prototype = {
    submit: function () {
        if (this.afterSubmit !== null) {
            this.afterSubmit();
        }
        $('#msg').append('clicked ');
        return this;
    },

    setAfterSubmit: function (callback) {
        this.afterSubmit = callback;
        return this;
    }
}

var bar = new Bar();
var foo = new Foo().setAfterSubmit(bar.setStuff.bind(bar));
// Why do I need to bind bar ?

Please take a look at my fiddle https://jsfiddle.net/j5qfuzna/

Answer 1

this.afterSubmit();

This is setting the context to the Foo instance. Binding it to the Bar instance prevents that from happening.