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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python中DJANGO简单测试实例
2015/05/11 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python实现计算器功能
2019/10/31 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
python实现三种随机请求头方式
2021/01/05 Python
应用化学专业职业生涯规划书
2014/01/22 职场文书
大学校园活动策划书
2014/02/04 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
服务员态度差检讨书
2014/10/28 职场文书
体育个人工作总结
2015/02/09 职场文书
话题作文之生命的旋律
2019/12/17 职场文书