Javascript 原型和继承(Prototypes and Inheritance)


Posted in Javascript onApril 01, 2009

JavaScript 对象从一个原形对象(prototype object) 继承属性。所有对象都有原型;原型的所有属性看上去就像使用它作为原型的那些对象的属性一样。简单的说就是:所有对象都从他的原型继承属性
(each object inherits properties from its prototype).

对象的 prototype 通过它的 constructor function 来定义。JavaScript 里所有的 function 都有一个 prototype 属性。这个属性开始是空的,接下来你给他添加的任何属性都会被 constructor 创建的对象所拥有。

prototype 对象和 constructor 相关联。这意味着 prototype 可以作为放置方法以及其他常量的理想场所。原型中的属性不会被复制到新创建的对象中去,他们的属性看上去就像对象的属性一样。这意味着,使用原型能够大幅度的减少多个同类对象占用的内存。

每一个 class 都只有一个 prototype object, 附带一套属性。但我们在运行时可能会创建多个类的实例。那么如果发生对原型的属性的读写会发生什么情况?
当你读一个属性的时候,JavaScript 首先尝试去查找对象本身是否有这个属性,如果没有,接着去查找原型里面是否有。有的话就返回结果。
而当你写原型的属性的时候,因为多个对象共享原型,显然是不能直接在原型上进行写操作的。这个时候实际上 JavaScript 会在对象上创建一个同名的属性,然后把值写到里面。当你下次读这个属性的时候,JavaScript 一下子就在对象的属性里查找到了,那么就不需要去原型里查找了。这个时候,我们说“对象的属性掩盖或隐藏了原型的属性”。(shadows or hides) 。

从上面讨论看出,其实我们在设计类的时候,只要掌握一个原则:在原型里仅定义一些方法(方法一般是不会变的),常数,常量等。做到这一点就不容易混淆了。
例子:

Javascript 原型和继承(Prototypes and Inheritance)// Define a constructor method for our class.
Javascript 原型和继承(Prototypes and Inheritance)// Use it to initialize properties that will be different for
Javascript 原型和继承(Prototypes and Inheritance)// each individual Circle object.
Javascript 原型和继承(Prototypes and Inheritance)functionCircle(x, y, r)
Javascript 原型和继承(Prototypes and Inheritance){
Javascript 原型和继承(Prototypes and Inheritance)    this.x = x;  // The X-coordinate of the center of the circle
Javascript 原型和继承(Prototypes and Inheritance)
this.y = y;  // The Y-coordinate of the center of the circle
Javascript 原型和继承(Prototypes and Inheritance)
this.r = r;  // The radius of the circle
Javascript 原型和继承(Prototypes and Inheritance)}
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)// Create and discard an initial Circle object.
Javascript 原型和继承(Prototypes and Inheritance)// This forces the prototype object to be created in JavaScript 1.1.
Javascript 原型和继承(Prototypes and Inheritance)new Circle(0,0,0);
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)// Define a constant: a property that will be shared by
Javascript 原型和继承(Prototypes and Inheritance)// all circle objects. Actually, we could just use Math.PI,
Javascript 原型和继承(Prototypes and Inheritance)// but we do it this way for the sake of instruction.
Javascript 原型和继承(Prototypes and Inheritance)Circle.prototype.pi =
3.14159;
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)// Define a method to compute the circumference of the circle.
Javascript 原型和继承(Prototypes and Inheritance)// First declare a function, then assign it to a prototype property.
Javascript 原型和继承(Prototypes and Inheritance)// Note the use of the constant defined above.
Javascript 原型和继承(Prototypes and Inheritance)function Circle_circumference(  ) { return
2
*
this.pi *
this.r; }
Javascript 原型和继承(Prototypes and Inheritance)Circle.prototype.circumference =Circle_circumference;
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)// Define another method. This time we use a function literal to define
Javascript 原型和继承(Prototypes and Inheritance)// the function and assign it to a prototype property all in one step.
Javascript 原型和继承(Prototypes and Inheritance)Circle.prototype.area =
function(  ) { return
this.pi *
this.r *
this.r; }
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)
Javascript 原型和继承(Prototypes and Inheritance)// The Circle class is defined.
Javascript 原型和继承(Prototypes and Inheritance)// Now we can create an instance and invoke its methods.
Javascript 原型和继承(Prototypes and Inheritance)var c =
new Circle(0.0, 0.0, 1.0);
Javascript 原型和继承(Prototypes and Inheritance)var a =c.area(  );
Javascript 原型和继承(Prototypes and Inheritance)var p = c.circumference(  );

内置的类的 prototype.

不光是用户自定义的类可以有 prototype. 系统内置的类比如 String, Date 也都有的。而且你可以向他们添加新的方法,属性等。
下面这段代码就对所有的 String 对象添加了一个有用的函数:

Javascript 原型和继承(Prototypes and Inheritance)// Returns true if the last character is c
Javascript 原型和继承(Prototypes and Inheritance)String.prototype.endsWith =
function(c) {
Javascript 原型和继承(Prototypes and Inheritance)    return (c ==
this.charAt(this.length-1))
Javascript 原型和继承(Prototypes and Inheritance)}

然后我们就可以类似这样的来调用了:

Javascript 原型和继承(Prototypes and Inheritance)var message =
"hello world";
Javascript 原型和继承(Prototypes and Inheritance)message.endsWith('h')  // Returns false
Javascript 原型和继承(Prototypes and Inheritance)message.endsWith('d')  // Returns true

Javascript 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
javascript各种复制代码收集
Sep 20 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
详解小程序云开发数据库
May 20 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 #Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 #Javascript
js Flash插入函数免激活代码
Mar 31 #Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 #Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 #Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 #Javascript
一个tab标签切换效果代码
Mar 27 #Javascript
You might like
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python实现图片彩色转化为素描
2019/01/15 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python学生信息管理系统实现代码
2019/12/17 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
中学运动会广播稿
2014/01/19 职场文书
考试违纪检讨书
2014/02/02 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
成立公司计划书
2014/05/07 职场文书
学习作风建设心得体会
2014/10/22 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
深入理解go slice结构
2021/09/15 Golang