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插件Firebug的使用教程
Jan 02 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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 生成WML页面方法详解
2009/08/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
javascript 短路法代码精简
2009/08/20 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python os模块学习笔记
2015/06/21 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python 基于opencv去除图片阴影
2021/01/26 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
回门宴答谢词
2014/01/13 职场文书
老公保证书范文
2014/04/29 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2016继续教育研修日志
2015/11/13 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
JavaScript流程控制(循环)
2021/12/06 Javascript