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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP获取文件行数的方法
2015/06/10 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
php curl发送请求实例方法
2019/08/01 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
英国自行车商店:AW Cycles
2021/02/24 全球购物
大学生社会实践评语
2014/04/25 职场文书
预备党员公开承诺书
2014/05/28 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
二审答辩状格式
2015/05/22 职场文书
中秋节随笔
2015/08/15 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers