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 相关文章推荐
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
说说掌握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获取地址栏信息的代码
2008/10/08 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python中的多重继承实例讲解
2014/09/28 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
生死抉择观后感
2015/06/09 职场文书
法人身份证明书
2015/06/18 职场文书
详解Django的MVT设计模式
2021/04/29 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL