Consider the following code:
function Plant () {
this.country = "Mexico";
this.color= "yellow";
}
Plant.prototype.showDetails = function() {
console.log("I am from " + this.country + " and my color is " + this.color);
}
var banana = new Plant();
banana.showDetails(); //this outputs "I am from Mexico and my color is Yellow".
Now my question is, how does showDetails get access to country and color properties of Plant function even though it is outside the function? (Javascript has scopes as per functions, lexical scoping).
I did some introspection and found that when banana.showDetails is invoked, 'this' refers to Plant object and not banana object. Why is this so? In JS, 'this' refers to the object that calls the function, which in this case is the banana object.