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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
JS class语法糖的深入剖析
Jul 07 Javascript
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投票程序源码
2007/03/11 PHP
php zip文件解压类代码
2009/12/02 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
HTTP 304错误的详细讲解
2013/11/13 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS重载实现方法分析
2016/12/16 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python获取任意xml节点值的方法
2015/05/05 Python
python命令 -u参数用法解析
2019/10/24 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
大一自我鉴定范文
2013/12/27 职场文书
最热门的自我评价
2013/12/30 职场文书
给领导的致歉信范文
2014/01/13 职场文书
教师节慰问信
2015/02/15 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python if else条件语句形式详解
2022/03/24 Python