【第22期】观点:IT 行业加班,到底有没有价值?

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

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

相关文章推荐

Fast Pixel Operations in .NET (With and Without unsafe)

A very good article copy from http://www.codeproject.com/Articles/617613/Fast-Pixel-Operations-in-NE...

Chapter6 The Basics of JavaScript

Chapter6 The Basics ofJavaScript• 6.1 Overview of JavaScript• 6.2 Object Orientation and JavaScript• 6.3 General Syntactic Characteristics• 6.4 Primitives, Operations, andExpressions• 6.5 Screen Output• 6.6 Control Statements• 6.7 Object Creation and M

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

21个超实用的 JavaScript 技巧与实例

转载自: <a style="font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 1

Object-Oriented JavaScript Part 2: How the prototype works

JavaScript is a prototype-based language. Understanding how the prototype works is essential to unde...

javascript 学习

Javascript Javascript<span style="d
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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