this
Simple example of 'this' changing context.
var obj = {
text: 'hello',
show: function show(){
console.log(this.text);
}
}
obj.show();//hello
var text = 'me';
//potential problem as the behaviour is unexpected most the time
setTimeout(obj.show, 100);//'me' this binding is to the current scope as it is that called as a object method
var funcObj = obj.show
funcObj();//'me' this binding is to the current scope same problem as above
//to fix this you can bind 'this' to the object you want this to be
var funcObjBound = obj.show.bind(obj)
funcObjBound();//hello
Prototypical inheritance example. Just showing that context of 'this' changes.
//simple constructor
function Testa(a,b,c){
this.a = a;
this.b = b;
this.c = c;
}
//add a prototype function to Testa
Testa.prototype.blurb = function(){
return console.log(this.a,this.b,this.c);
}
//another constructor that 'inherits' from Testa
function Testb(a,b,c,d,e){
this.d = d;
this.e = e;
//call the TestA as a function but giving 'this' as the context
//so you are effectively assigning the a,b,c to 'this' TestB object
Testa.call(this, a,b,c);
}
//setup your prototype chain
Testb.prototype = new Testa(); //could do Testb.prototype = Object.create(Testa.prototype); creates a new object with the 'Testa.prototype' as the prototype
Testb.prototype.constructor = Testb; //see reference below
var objectB = new Testb(1,2,3,4,5);
console.log(objectB); //
console.log(objectB instanceof Testb,' instance of TestB'); // true instance of TestB
console.log(objectB instanceof Testa, ' instance of TestA'); // true instance of TestA
console.log(typeof objectB, 'typeOf'); //object typeOf
objectB.blurb();//1,2,3 which is the a,b,c from the testB object
For more reading see: