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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
PassWord输入框代码分享
Jun 07 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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 图片上传类代码
2009/07/17 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Redis可视化客户端小结
2021/06/10 Redis