Resume
When I’m studying JavaScript, I got a little bit confused while I first time look at function.prototype
(Here, function
points to a certain function, not Function
). In this passage, we will see the difference between prototype
and this
.
this
First of all, we propose an example.
var func = function(){
this.get = function(){console.log('A')};
}
func.prototype.updateGet = function(){
this.get = function(){console.log('B')};
}
var func0 = new func(),
func1 = new func();
func0.get();
func1.get();
func0.updateGet();
func0.get();
func1.get();
And the result will be
A
A
B
A
as we expected.
Because, when we invoke updateGet()
, it has just updated the function get()
in object func0
. So that func1
will not be affected.
function.prototype
var func = function(){}
func.prototype.get = function(){console.log('A')};
func.prototype.updateGet = function(){
func.prototype.get = function(){console.log('B')};
}
var func0 = new func(),
func1 = new func();
func0.get();
func1.get();
func0.updateGet();
func0.get();
func1.get();
And the result will be
A
A
B
B
Because when we modify functions in func.prototype
, it means that we modify every instance depends on function in prototype.
As prototype
means the prototype of a function, I believe it’s pretty fair to do so.
Reference: http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript
this > function.prototype
Moreover, as I have tested, when we do
var func = function(){this.get = function(){console.log('C')};}//We define get() here.
func.prototype.get = function(){console.log('A')};
func.prototype.updateGet = function(){
func.prototype.get = function(){console.log('B')};
}
var func0 = new func(),
func1 = new func();
func0.get();
func1.get();
func0.updateGet();
func0.get();
func1.get();
It will return
C
C
C
C
which makes me consider that this
has higher priority than function.prototype
.
Function.prototype
As all function “inherit” from Function
, when we add methods to Function.prototype
, it will add a method to all functions.
Function.prototype.test = function(){
return 10;
}
var func = function(){}
func.test();
Codes above will show
10
as we expected.
References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript