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

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

【JS】The differences between 基本类型 and 引用类型

5个基本数据类型:Undefined、Null、Boolean、Number、String;引用类型:var person = new Object();这里的person就是一个引用类型的变量,他的...
  • qq_27359091
  • qq_27359091
  • 2016年06月03日 22:08
  • 414

The difference between the request time and the current time is too large.

报错信息: [Error Code]:RequestTimeTooSkewed, [Message]:The difference between the request time and the ...
  • hraceo
  • hraceo
  • 2017年01月09日 11:07
  • 1020

The Differences Between Java, C And C++

if (!window.netshel_ord) { netshel_ord=Math.random()*10000000000000000;}if (!window.netshel_tile) { ...
  • jianxiong8814
  • jianxiong8814
  • 2007年09月25日 12:21
  • 1176

[Error Code]:RequestTimeTooSkewed, [Message]:The difference between the request time and the current

在做备份的时候,一直出现RequestTimeTooSkewed错误,发现是自己虚拟机的时间不对; [root@localhost ~]# date Fri Sep 22 13:57:42 EDT 2...
  • Love_Taylor
  • Love_Taylor
  • 2017年09月25日 11:05
  • 491

What's the difference between C++ and Python

In Principle 1. C++ is a "statically typed" language, while Python is a "dynamically typed" languag...
  • bachelorchen
  • bachelorchen
  • 2015年07月20日 11:07
  • 211

OSS存储上遇到The difference between the request time and the current time is too large.

问题截图: 亲测有效!!! The difference between the request time and the current time is too large.(有道翻译:...
  • lilian1131
  • lilian1131
  • 2018年01月26日 12:59
  • 81

Difference between hub, switch and router

What's the difference between a Hub, a Switch and a Router?•In a word: intelligence.Hubs, switches, ...
  • Andrew659
  • Andrew659
  • 2010年09月29日 21:21
  • 1140

What is the difference betweeninterrupt-driven I/O versus pollingI/O

quote from :http://www.calvin.edu/academic/rit/webBook/chapter2/design/hardware/io/interrupts.htm W...
  • qinglinsan
  • qinglinsan
  • 2016年05月15日 22:16
  • 224

[leetcode]Maximum Gap

问题描述: Given an unsorted array, find the maximum difference between the successive elements in its...
  • chenlei0630
  • chenlei0630
  • 2015年01月13日 22:51
  • 770

The difference between POP3 and IMAP

POP3 and IMAP are both email protocols that email services use to receive emails. But POP3 is older ...
  • monsterkill
  • monsterkill
  • 2013年01月24日 00:44
  • 91
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Difference between prototype and this in JavaScript
举报原因:
原因补充:

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