bound vs unbound functions

javascript

Solution

I created a JSFiddle to illustrate my understanding of the difference. An unbound function is a function that is not bound to an object, so `this` in that function refers to the global (window) object. You can either bind a function by making it a method of an object or explicitly binding it using the `.bind()` method. I demonstrated the different cases in my code:

// A function not bound to anything. "this" is the Window (root) object
var unboundFn = function() {
    alert('unboundFn: ' + this);
};
unboundFn();


// A function that is part of an object. "this" is the object
var partOfObj = function() {
    alert('partOfObj: ' + this.someProp);
};
var theObj = {
    "someProp": 'Some property',
    "theFn": partOfObj
};
theObj.theFn();


// A function that is bound using .bind(), "this" is the first parameter
var boundFn = function() {
    alert('boundFn: ' + this.someProp);
};
var boundFn = boundFn.bind(theObj);
boundFn();

Problem

Original source