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 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
小程序实现发表评论功能
Jul 06 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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,不用COM,生成excel文件
2006/10/09 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue组件生命周期详解
2017/11/07 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
火车票抢票python代码公开揭秘!
2018/03/08 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python实现ATM系统
2020/02/17 Python
python 调整图片亮度的示例
2020/12/03 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
新教师工作感言
2014/02/16 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
读群众路线的心得体会
2014/09/03 职场文书
学生会辞职信
2015/03/02 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书