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 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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版微信自动获取收货地址api用法示例
2016/09/22 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
简单讲解Python中的闭包
2015/08/11 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python解决八皇后问题示例
2018/04/22 Python
python实现拼图小游戏
2020/02/22 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
工商企业管理实习自我鉴定
2013/12/04 职场文书
学生会竞聘书范文
2014/03/31 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
小学语文业务学习材料
2014/06/02 职场文书
实验室标语
2014/06/21 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
先进个人申报材料
2014/12/30 职场文书
拖欠货款起诉状
2015/05/20 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers