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的倒计时插件代码
May 07 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue-i18n实现中英文切换的方法
Jul 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js精度溢出解决方案
2012/12/02 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JS简单计算器实例
2015/01/20 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
详解js获取video任意时间的画面截图
2019/04/17 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
运动会宣传稿50字
2015/07/23 职场文书
办公室规章制度范本
2015/08/04 职场文书
高三语文教学反思
2016/02/16 职场文书