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 相关文章推荐
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
浅入深出Vue之自动化路由
Aug 06 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 在文件指定行插入数据的代码
2010/05/08 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php中的ini配置原理详解
2014/10/14 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python面向对象进阶学习
2019/05/21 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
医德医风演讲稿
2014/05/20 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年教师节主持词
2015/07/03 职场文书
高中军训感想
2015/08/07 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python