.bind() doesn't work for functions

Question

I'm trying to use variables placed inside a function. I'm not looking to do anything particular with this piece of code, but I want to figure out why bind / apply / call work for objects, and not functions.

function another () {
    this.var = 'another test'
}

function test (){
    this.var = 'test123'
    console.log('this.first: ',this.var);
}

var bind = test.bind(another);
console.log('bind: ', bind());

Answer 1

.bind() works just fine for functions. It just doesn't do what you think it does.

See, functions are objects too. And treating them like objects doesn't mean they get called.

function a() { console.log("a was called"); }
function b() { console.log(this); }

var bound = b.bind(a);
bound();  // logs "function a() { }" in my console

In your case, once you've bound test to another , you have a new function that works just like test , but where this means another , and thus this.var means another.var . And all of this happens without another ever getting called .

I'm not sure entirely how you expect your code to work, cause it doesn't make much sense as it stands. But if you were to examine things after you run it, you would find that another.var now has the value 'test123' .

Even if you said another() beforehand, it wouldn't matter. Firstly because another isn't bound to anything, so to it, this means the global object. In a browser, another() would basically just be setting window.var . But secondly, test sets its own value -- so even if both functions had the same idea of what this.var means, test would overwrite it with 'test123' .

Answer 2

This will log "another test", since this defaults to window :

function another() {
    this.foo = 'another test';
}

another();

console.log(window.foo);

edit:

// define function object window.first:
function first() {
    this.foo = 'first';
}

// define function object window.second:
function second() {
    this.foo = 'second';
}

// call window.first, sets window.foo to 'first':
first();

// set window.bound to a new function object which
// runs second in the context of the object first:
var bound = second.bind(first);

// call window.bound, which sets window.first.foo to 'second':
bound();

// call second, which sets window.foo to 'second' then logs the return
// value of second, which is undefined:
console.log('second: ', second());