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中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Angular使用Restful的增删改
Dec 28 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
javascript void(0)的妙用
2009/10/21 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
python求最大连续子数组的和
2018/07/07 Python
Python引用计数操作示例
2018/08/23 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
如何用Django处理gzip数据流
2021/01/29 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年管理工作总结
2014/11/22 职场文书
党员先进事迹材料
2014/12/19 职场文书
高一军训感想
2015/08/07 职场文书
Python3 类型标注支持操作
2021/06/02 Python