在stackoverflow上看到一个这样的提问,以下代码有什么区别?

Class.method = function () { /* code */ }
Class.prototype.method = function () { /* code using this.values */ }

看来确实有很多人和我一样对这个问题有疑问,实际上这个牵涉到static和dynamic方法的概念。

Class.method这种模式定义的method是绑定在Class对象之上的。在js中,我们知道一切皆为对象,包括Class(本质上是一个function)。当我们以ClassFunction.method方式定一个一个method时就是在function对象上定义了一个属性而已。这个Class.method和通过new Class()生成的instance没有任何关系,我们可以认为这种Class.method形式为static method.

而第二种Class.prototype.method,我们实际上是在扩展构造函数的prototype功能,它将在通过new Class()生成的每一个object instance上面存在,而在这个instance.method中的this将指向实际调用的object.

看下面的代码加深理解:

// constructor function
function MyClass () {
var privateVariable; // private member only available within the constructor fn this.privilegedMethod = function () { // it can access private members
//..
};
} // A 'static method', it's just like a normal function
// it has no relation with any 'MyClass' object instance
MyClass.staticMethod = function () {}; MyClass.prototype.publicMethod = function () {
// the 'this' keyword refers to the object instance
// you can access only 'privileged' and 'public' members
}; var myObj = new MyClass(); // new object instance myObj.publicMethod();
MyClass.staticMethod();

注意:将公共的method放到constructorFunction.prototype中去供instance继承,(好处是避免代码的重复,因为如果放到constructorFunction中通过this.method=function(){}的方式去定义,虽然instance.method也可以访问,但是代码是有copy的!!!)而数据则放到constructor function中去定义,这样每一个instance的数据都是不同的!!

javascript Class.method vs Class.prototype.method(类方法和对象方法)的更多相关文章

  1. JS中的phototype JS的三种方法(类方法、对象方法、原型方法)

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  2. OC基础--OC中的类方法和对象方法

    PS:个人感觉跟C#的静态方法和非静态方法有点类似,仅仅是有点类似.明杰老师说过不要总跟之前学过的语言做比较,但是个人觉得,比较一下可以加深印象吧.重点是自己真的能够区分开! 一.OC中的对象方法 1 ...

  3. OC的类方法、对象方法和函数

    OC语言中的方法和函数是有区别的:类内部叫方法,单独定义的叫函数,定义的格式也不同 类方法:+ (void) 方法名.对象方法:- (void) 方法名.函数:void 函数名(参数列表) #impo ...

  4. ios开发 oc 的类方法与对象方法

    --------开始前先申明一下:小编为了让大家看出效果,在编码中命名方式会又些不规范. 首先我们先来了解一下什么是类方法与对象方法. 对象方法: 对象是由“-”开头.比如:-(void)Runner ...

  5. JavaScript中的类方法、对象方法、原型方法

    类方法:也叫函数方法,在JavaScript中函数也是一个对象,所以可以为函数添加属性以及方法: 对象方法:包括构造函数中的方法以及其原型上面的方法: 原型方法:一般用于对象实例共享,在原型上面添加该 ...

  6. Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. js类方法,对象方法,原型的理解(转)

    function People(name) { this.name=name; //对象方法 this.Introduce=function(){ alert("My name is &qu ...

  8. JavaScript: Class.method vs Class.prototype.method

    在stack overflow中看到一个人回答,如下   // constructor function function MyClass () { var privateVariable; // p ...

  9. JavaScript 中的类方法,对象方法,Prototype方法

    <script type="text/javascript"> function baseClass() { this.showMsg = function() { a ...

随机推荐

  1. 什么是amp?amp有什么用处?

    AMP是移动页面加速器Accelerated Mobile Pages的简称,是Google带领开发的开源项目,目的是为提升移动设备对网站的访问速度.它的核心称作AMP HTML,是一种新型的HTML ...

  2. 配置本地 yum 仓库

    配置本地 yum 仓库 # yum 官网 http://yum.baseurl.org/ # yum 手册页 man yum man yum.conf SEE ALSO pkcon (1) yum.c ...

  3. JDOJ 2197: 校门外的树

    JDOJ 2197: 校门外的树 题目传送门 Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米. 我们可以把马路看成一个数轴,马路的一端在数轴1的位置,另一 ...

  4. hadoop java.io.EOFException: Unexpected end of input stream

    执行hadoop 报错 java.io.EOFException: Unexpected end of input stream at org.apache.hadoop.io.compress.De ...

  5. query 2019徐州网络赛(树状数组)

    query \[ Time Limit: 2000 ms \quad Memory Limit: 262144 kB \] 题意 补题才发现比赛的时候读了一个假题意.... 给出长度为 \(n\) 的 ...

  6. qt中窗体全屏

    原文地址:https://www.cnblogs.com/wiessharling/p/3750461.html 近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一 ...

  7. A Deep Dive into PL/v8

    Back in August, Compose.io announced the addition of JavaScript as an internal language for all new ...

  8. 关于codeforces加载慢

    昨天cdx报名cf,打开网页10多分钟才交了.... 今天问了wxy,百度了一下,以前也搜过,然后就忘记了. 今天记一下.  1.右键单击开始按钮,打开资源管理器,在资源管理器的地址栏中填写" ...

  9. 洛谷P1578 奶牛牧场(悬线法思想)

    题目 悬线法的思想--即扫描线的思想,每个矩阵必定是由两个障碍来构成左右边界或者上下边界. 如果此两个障碍组成了左右边界,枚举这两个障碍中途更新这两个障碍之间的矩阵上下边界,并且更新最大值. 考虑如何 ...

  10. nginx配置文件解释

    #全局配置 # For more information on configuration, see:# * Official English Documentation: http://nginx. ...