[JavaScript] Function binding

As web developer, you probably have seen function like this before

var bar = foo.bind(this);

Do you really know what they do? Lets take some examples of why even use bind in JavaScript?

Reusability

See example of these two functions:

var printMe = function(){
 console.log('This val:', this.val);
}
var foo = {
 val: 'foo'
};
var bar = {
 val: 'bar'
};
foo.printMe = printMe.bind(foo)
bar.printMe = printMe.bind(bar);
foo.printMe();
bar.printMe();

How to check if function is binded already?

Another example:

var printMe = function(){
 console.log('This val:', this.val);
}
var foo = {
 val: 'foo'
};
var bar = {
 val: 'bar'
};
foo.printMe = printMe.bind(foo)
bar.printMe = foo.printMe.bind(bar);
foo.printMe(); // foo
bar.printMe(); // foo again? WTF

Note: Both bound functions and arrow functions do not have a `prototype` property. See reference. What we could do to check if function is binded is to do the following

foo.printMe.hasOwnProperty('prototype'); //  false
bar.printMe.hasOwnProperty('prototype'); //false
printMe.hasOwnProperty('prototype'); // true

Why would this work though, for how to determine a function is bounded?

Here’s why

var printMe = function(){
 console.log('This val:', this.val);
}
var foo = {
 val: 'foo'
};
foo.printMe = printMe.bind(foo);
for (var name in foo) {
 console.log(name);
}
Object.getOwnPropertyNames(foo.printMe)
// ["length", "name"]
Object.getOwnPropertyNames(printMe)
// ["length", "name", "arguments", "caller", "prototype"]

As you can see “arguments”, “caller”, “prototype” are gone.

Note:

1. Object.getOwnPropertyNames(): Get both enumerable and non-enumerable of an object.

2. Object.keys(a) returns all enumerable own properties

Bind arguments

var sum = function(a, b, c) { return a + b + c };
var sumAB = sum.bind(null, 1, 5);
var sumC = sumAB.bind(null, 2);
console.log(sumC());

Reference

1. http://stackoverflow.com/questions/29811479/test-if-variable-is-a-specific-bound-function-in-using-javascripts-function-pro

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

3. http://stackoverflow.com/a/20635010/2305243

4. https://passy.svbtle.com/partial-application-in-javascript-using-bind

5. http://stackoverflow.com/questions/20925138/bind-more-arguments-of-an-already-bound-function-in-javascript

6. http://www.w3schools.com/js/js_function_invocation.asp

7. https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/

8. javascript — Using var self = this or .bind(this)? — Code Review Stack Exchange http://codereview.stackexchange.com/questions/49872/using-var-self-this-or-bindthis

9. Bind more arguments of an already bound function in Javascript http://stackoverflow.com/a/20925268/2305243

10. What object javascript function is bound to (what is its”this”)? — Stack Overflow http://stackoverflow.com/questions/14307264/what-object-javascript-function-is-bound-to-what-is-its-this

11. https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md

12. https://ahmautom.wordpress.com/2014/12/08/for-in-vs-keys-vs-getownpropertynames/

Show your support

Clapping shows how much you appreciated Alan Dong’s story.