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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
Javascript执行流程细节原理解析
May 14 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操作符与控制结构代码
2011/12/30 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
range 标准化之获取
2011/08/28 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
jquery仿微信聊天界面
2017/05/06 jQuery
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
5款非常棒的Python工具
2018/01/05 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python实现AES加密与解密
2019/03/28 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
SQL Server笔试题
2012/01/10 面试题
AJAX的全称是什么
2012/11/06 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
员工自我鉴定范文
2013/10/06 职场文书
后勤岗位职责
2013/11/26 职场文书
大学活动策划书范文
2014/01/10 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技