Difference between prototype and this in JavaScript

原创 2016年08月31日 02:28:59

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

版权声明:本文章禁止商业使用,非商用转载必须注明出处和作者。作者保留一切权利。

相关文章推荐

python中下划线,双下划线,首尾双下划线的区别(Difference between _, __ and __xx__ in Python)

Difference between _, __ and __xx__ in Python When learning Python many people don't really under...

In SQL, what is the difference between a left join and a left outer join?

There is actually no difference between a left join and a left outer join – they both refer to the e...

In SQL, what’s the difference between a full join and an inner join?

A brief explanation of a joinLet’s start with a quick explanation of a join. Joins are used to combi...

Difference between Vector and ArrayList in java?

面试的时候也总是问的一个问题,说一下Vector与ArrayList的区别? 这个问题以前没太注意过,所以查询资料的时候,看到网上对这个问题的解释几乎是相同(应该都是copy的),千篇一律且比较啰嗦...

Difference between Enumeration and Iterator in Java

深入比较Enumeration和Iterator的差别

python中下划线,双下划线,首尾双下划线的区别(Difference between _, __ and __xx__ in Python)

Difference between _, __ and __xx__ in Python When learning Python many people don't really under...
  • Sinchb
  • Sinchb
  • 2013年03月13日 13:24
  • 2868

what is the difference between _source and _all in Elasticsearch

It's pretty much the same as the difference between indexed fields and stored fields in lucene. Y...

What's the difference between “local” and “my” in Perl

There are two kinds of variable scopes in Perl: Global variables: They reside in the current pa...
  • ThinkHY
  • ThinkHY
  • 2012年08月30日 12:55
  • 1427

Difference between start and run method in Thread – Java Tutorial

Difference between start and run method in Thread – Java Tutorial Why do one call start method of t...
  • aqzwss
  • aqzwss
  • 2016年04月29日 09:45
  • 327

Difference between Externalizable and Serializable in Java

One obvious difference that Serializable is a marker interface and doesn't contain any methods whe...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Difference between prototype and this in JavaScript
举报原因:
原因补充:

(最多只允许输入30个字)