Example showcasing the use of ECMA5 Function.prototype.bind
(as well as some other ECMA5 methods just for fun)
Exploring the usage of the this
keyword.
Javascript
// Placed here to define things before usage.
function valueGetter(obj) {
// Utilizing ECMA5 methods for demonstration
Object.keys(obj).forEach(function (key) {
console.log(key + " has a value of " + this[key]);
}, obj);
}
// Preferring to start constructors with a capital letter
function Construction(constructionType) {
console.log("Inside main function");
// Changed to function expression and removed name from function
var setConstruction = (function (numberOfRooms, constructionColor, cinemaScreen) {
this.room = numberOfRooms;
this.clr = constructionColor;
this.scrn = cinemaScreen;
// Displaying 'this' content instead of 'constructionType'
console.log(constructionType);
valueGetter(this);
}).bind(this); // added the bind
this.room = 2;
this.clr = "green";
this.scrn = null;
getType();
function getType() {
console.log("In control function");
switch (constructionType) {
case "home":
setConstruction(2, "green", null);
break;
case "office":
setConstruction(20, "white", null);
break;
case "mall":
setConstruction(200, "assorted", null);
break;
case "theater":
setConstruction(20, "white", "78cm");
break;
default:
console.log("Please Enter Valid Type");
break;
}
}
}
console.log("In Script");
// Using one 'var'
var house = new Construction("home"),
house2 = new Construction("mall"),
house3 = new Construction("theater");
Output
In Script
Inside main function
In control function
home
room has a value of 2
clr has a value of green
scrn has a value of null
Inside main function
In control function
mall
room has a value of 200
clr has a value of assorted
scrn has a value of null
Inside main function
In control function
theater
room has a value of 20
clr has a value of white
scrn has a value of 78cm
On jsFiddle
An alternate approach could have been to utilize an object-oriented method and create a prototype
.
Javascript
// Written here to define things prior to usage.
function valueGetter(obj) {
// Utilizing ECMA5 methods for demonstration
Object.keys(obj).forEach(function (key) {
console.log(key + " has a value of " + this[key]);
}, obj);
}
// Preferring to start constructors with a capital letter
function Building(buildingType) {
console.log("Inside main function");
this.room = 2;
this.clr = "green";
this.scrn = null;
this.buildingType = buildingType;
this.getType();
}
Building.prototype = {
setBuilding: function (numberOfRooms, constructionColor, theaterScreen) {
this.room = numberOfRooms;
this.clr = constructionColor;
this.scrn = theaterScreen;
// Displaying 'this' content instead of 'buildingType'
console.log(this.buildingType);
valueGetter(this);
return this;
},
getType: function () {
console.log("In control function");
switch (this.buildingType) {
case "home":
this.setBuilding(2, "green", null);
break;
case "office":
this.setBuilding(20, "white", null);
break;
case "mall":
this.setBuilding(200, "assorted", null);
break;
case "theater":
this.setBuilding(20, "white", "78cm");
break;
default:
console.log("Please Enter Valid Type");
}
return this;
}
};
console.log("In Script");
// Using one 'var'
var house = new Building("home"),
house2 = new Building("mall"),
house3 = new Building("theater");
On jsFiddle
If not in an ECMA5 environment, shims are available on MDN or you can use the ES5 shim library. Alternatively, modern JavaScript libraries offer functional equivalents to .bind.
For example:
- lodash/underscore,
_.bind()
jQuery.proxy
dojo.hitch
You could also employ a closure
to circumvent the issue, or even utilize call
or apply
.
idiomatic.js 6B by R.Waldron
As a last resort, create an alias to this
using self
as an
Identifier. This is extremely bug prone and should be avoided whenever
possible.