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 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
js正则匹配多个全部数据问题
Dec 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
用cssText批量修改样式
2009/08/29 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
深入理解Python中的*重复运算符
2017/10/28 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python解释器安装教程的方法步骤
2020/07/02 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
商务主管岗位职责
2013/12/08 职场文书
敬老模范事迹
2014/05/21 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
嘉宾邀请函
2015/01/31 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书