JavaScript 原型与继承说明


Posted in Javascript onJune 09, 2010
function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype); 
alert(A.prototype.constructor);

根据弹出的结果,我们可以得到:原型对象是由函数的构造函数创建,它所拥有的属性能被所有对象共享,初始时原型对象指向一个Object对象,并且定义了一个constructor属性,该属性指向定义该原型对象的构造函数本身,再看如下代码。

Code

function A(x) 
{ 
A.prototype.x = x; 
} 
var obj = new A(10); 
alert(obj.x); 
alert(obj.constructor);

因为原型对象的所有属性能被构造函数创建对象共享,所以创建的对象可以访问这里的constructor属性,同时obj对应的就是原型对象(prototype)所创建出来的一个实例,那么重写constructor属性会出现什么样的结果呢?

Code

function A(x) 
{ 
A.prototype.x = x; 
} 

var objA = new A(10); 
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 }; 
objA.constructor(); 
alert(objA.x); 

var objB = new A(10); 
alert(objB.x);

根据结果我们可以看到,首先弹出的是“重写obj的constructor属性”,然后弹出20,在弹出10,可见,我们在书写重写objA这个对象的constructor之后,objB并没有被改变,因此无论在一个对象加入或修改多少属性这都不影响其原型对象中属性的本来面目,其实很容易理解js为什么这样做,因为一个对象的行为不能影响到其他对象,否则将会造成混乱。

在这里,我们可以总结一下,上面代码的规则:

1.当我们调用某个对象的时候,首先检查该对象本身的自己定义的属性,如果存在则调用。

2.当自己本身的属性不存在的时候,则调用其构造函数所定义的原型对象的引用。

那么根据这个规则,就形成了JavaScript中的一个原型链,我们就可以根据这个规则来定义继承关系。

function A(x) 
{ 
A.prototype.x = x; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
}

这段代码显示了两个函数,B函数继承与A函数,A.call(this.x)表示,将B的对象this传递到A函数中进行执行。然后,我们同样需要由B函数构造出来的对象需要包含A函数的所有特性,因此需要加上这么一句话。

B.prototype = new A(); 

alert(B.prototype.constructor);

先我们指定B的原型为A,因此,B函数继承了A函数的特性,根据弹出的结果,我们可以看到,其constructor指向的是A函数,那么我们的B函数的特性是不是丢失了呢?因此,我们需要在加上一句话,最后给出继续的整合代码。
function A(x) 
{ 
A.prototype.x = x; 
A.prototype.ShowA = function(){ alert("A的Show方法!"); }; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
B.prototype.ShowB = function(){ alert("B的Show方法!"); }; 
} 

B.prototype = new A(); 
B.prototype.constructor = B; 

var obj = new B(10,5); 
alert(obj.x); 
alert(obj.y); 
obj.ShowA(); 
obj.ShowB();

若有疑问或不正之处,欢迎提出指正和讨论。

Javascript 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JavaScript 构造函数 面相对象学习必备知识
Jun 09 #Javascript
JS 图片缩放效果代码
Jun 09 #Javascript
JQuery优缺点分析说明
Jun 09 #Javascript
web页面数据展示新想法(json)
Jun 08 #Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 #Javascript
location.search在客户端获取Url参数的方法
Jun 08 #Javascript
js word表格动态添加代码
Jun 07 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
2017/02/23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Python的log日志功能及设置方法
2019/07/11 Python
使用Python封装excel操作指南
2021/01/29 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
思想品德课教学反思
2014/02/10 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python