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中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
RequireJS使用注意细节
May 15 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
JS实现省市县三级下拉联动
Apr 10 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
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
详解Python之unittest单元测试代码
2018/01/24 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
绿色学校实施方案
2014/03/31 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
论文答辩开场白大全
2015/05/27 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL