本文转载自:http://www.cnblogs.com/klesh/archive/2007/09/28/understanding-classs-definition-in-javascript.html

关于如何在Javascript中定义类,网上可以找到不少的文章。在开始讲之前,还是先来看看定义类的两种基本方式吧:

(1) 利用函数构造类型。

function Foo(text, url) {this.text = text;this.url = url;this.render = function() {document.write('<a href="' + this.url + '">' + this.text + '</a>');}
}

(2) 利用原型prototype。

function Bar(text, url) {this.text = text;this.url = url;
}
Bar.prototype = {render : function() {document.write('<a href="' + this.url + '">' + this.text + '</a>');}
}

  代码并不复杂,相信大多数人看完之后都会晓得怎么使用了。但是当我第一次看到这种类的定义方式的时候觉得很奇怪,很长一段时间里都是知其然而不知其所以然。如果你有和我一样的困惑,也许可以分享一下我的一点经验。

  先来看看怎么使用定义好的类型,

var a = new Foo('Link A', 'http://www.cnblogs.com');
var b = new Bar('Link B', 'http://www.csdn.net');
a.render();
b.render();

  跟很多面向对象语言(如C#)的使用方法一样,都是使用new关键字实例化类,而且当你用instanceof来测试它们是不是相应类型时,都可以得到预望的答案。两种不同方式定义出来的类型Foo和Bar很多时候使用起来并没有什么不同。

  但它们在原理上是完全不同,方式1,是在构造函数中动态中创建类的成员,这就意味着每个Foo的实例它们的render方法其实是两个完全独立的函数;而方式2,则是通过原型prototype的方式将类的共享成员与类的实例绑定在一起,所以每个Bar实例的render方法都是指向同一个方法,它是静态的。请看以下代码:

document.write(Object.prototype==String.prototype);
var c = new Foo('Link C', 'http://www.asp.net');
document.write(c.render == a.render);  // false
var d = new Bar('Link D', 'http://www.klesh.cn);
document.write(d.render == b.render);  // true

  Foo在实例化后就是一个独立的个体,它的任何改动不会影响到原来的类型定义,也不会影响到其他的实例;而Bar则不同,它的所有实例都依然受prototype的影响,通过对Bar.prototype的修改或扩展,可以影响到所有包括已经实例化的实例。回过头来看Foo,由于它的成员,特别是成员函数是动态创建的,利用闭包,则可以模拟面向对象中的“私有成员”,这一点内容会很长,稍后有时间再和大家分享。

  两种方式各有特点。但是最后,严格来说,无论什么方式,都只能说是“模拟自定义类型”,因为在基于对象的Javascript中,它事实上是没有原生的“自定义类型”的概念的(这一点也很长,暂不细说)。

  最后推荐大家一般使用方式2来在Javascript模拟自定义类,一来,速度上会比较快,而且还可以通过prototype对类型进行修改,除非你有需要到“私有成员”(好像也有人叫“闭包“)……除非你有需要用到闭包来模拟“私有成员”。

删除线和斜体部分根据木野狐同志的意见修正。

转载于:https://www.cnblogs.com/chenxizhang/archive/2010/01/02/1638008.html

javascript中类的定义和使用{转载}相关推荐

  1. javascript的函数定义的区别

    javascript中函数定义通常有两种方法: 1. 普通的函数定义: function f1 (){} 2. 变量式函数定义: var f2 = function(){} 还有一种定义方法是new ...

  2. AJAX基础:JavaScript中类的实现

    理解类的实现机制 在JavaScript中可以使用function关键字来定义一个"类",如何为类添加成员.在函数内通过this指针引用的变量或者方法都会成为类的成员, 例如:   ...

  3. 在JavaScript函数中定义全局变量

    是否可以在JavaScript函数中定义全局变量? 我想在其他函数中使用trailimage变量(在makeObj函数中声明). <html xmlns="http://www.w3. ...

  4. Python中类的定义与使用

    Python中类的定义与使用 Part I 目标: 1.类的定义 2.父类,子类定义,以及子类调用父类 3.类的组合使用 4.内置功能 1.类的定义 #!/usr/bin/env python #co ...

  5. python如何定义类_Python中类的定义、继承及使用对象实例详解

    本文实例讲述了Python中类的定义.继承及使用对象的方法.分享给大家供大家参考.具体分析如下: Python编程中类的概念可以比作是某种类型集合的描述,如"人类"可以被看作一个类 ...

  6. ArcGIS中的坐标系定义与转换 (转载)

    原文:ArcGIS中的坐标系定义与转换 (转载) 1.基准面概念:  GIS中的坐标系定义由基准面和地图投影两组参数确定,而基准面的定义则由特定椭球体及其对应的转换参数确定,因此欲正确定义GIS系统坐 ...

  7. java类的定义的实例_Java中类的定义和初始化示例详解

    类的定义 类的定义格式 //创建类 class classname{ field ://成员属性/字段 method://方法 } class为定义类的关键字,classname为类的名字,{ }为类 ...

  8. php类的实例化方法,php中类的定义和实例化方法

    php中类的定义和实例化方法 发布时间:2020-06-18 11:29:37 来源:亿速云 阅读:57 作者:Leah 这篇文章运用简单易懂的例子给大家介绍php中类的定义和实例化方法,代码非常详细 ...

  9. JavaScript JS 如何定义多行文本

    JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...

最新文章

  1. 一种清除windows通知区域“僵尸”图标的方案——问题分析
  2. 自动机器学习:团队如何在自动学习项目中一起工作?
  3. 冒泡排序的PHP实现 Bubble Sort
  4. 专家答题:GB50311-2007 常见问题
  5. Spark任务调度流程及调度策略分析
  6. python爬取动态网页的内容
  7. P1332,nssl1316-血色先锋军【bfs】
  8. 剑指offer--斐波那契数列
  9. 有点火的程序秒收录牛X
  10. java encode乱码_java 中文乱码问题的解决
  11. VirtualApp实战之拿到女神朋友圈封面
  12. 这可能是有史以来最详细的JNI入门教程
  13. 开发中的多线程ID检测工具(ESET_VC52_MCID)
  14. html5 最小化,当前界面最小化快捷键 窗口最小化和全屏化的快捷键是什么?
  15. 矩阵代数(四)- 分块矩阵
  16. mysql特性—自适应哈希索引AHI
  17. linux系统使用crontab定时删除日志文件
  18. 飞上“云端”的OA系统:什么是OA系统的云端化?
  19. Sublime 使用总结
  20. vb 彩牛概率统计for Excel

热门文章

  1. vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计(选项处理)...
  2. Qt + Python + OpenCV图标替换工具 之 Qt界面设计(四)
  3. 系统架构师学习笔记-操作系统(三)
  4. Linux学习笔记-使用gdb调试
  5. Qt学习笔记-OpenGL做正方体并旋转
  6. C/C++获取CPU相关信息(非WMI)
  7. MySQL入门之创建、修改、删除、查看数据库
  8. HTML期末大网页作业-腾讯官网
  9. mysql常见数据库设计_常见数据库设计
  10. 方舟进入服务器显示未知错误,服务器点进去后出错求解!急!