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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
拼音码表的生成
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
Javascript Global对象
2009/08/13 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
ES6的新特性概览
2016/03/10 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
什么是Rollback Segment
2013/04/22 面试题
美容院营销方案
2014/03/05 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
读后感作文评语
2014/12/25 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
小学六一主持词开场白
2015/05/28 职场文书
初中物理教学反思
2016/02/19 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python