javascript原型链继承用法实例分析


Posted in Javascript onJanuary 28, 2015

本文实例分析了javascript原型链继承的用法。分享给大家供大家参考。具体分析如下:

function Shape(){  

 this.name = 'shape';  

 this.toString = function(){  

  return this.name;  

 }  

}  

  

function TwoDShape(){  

 this.name = '2D shape';  

}  

function Triangle(side,height){  

 this.name = 'Triangle';  

 this.side = side;  

 this.height = height;  

 this.getArea = function(){  

  return this.side*this.height/2;  

 };  

}  

  

/* inheritance */  

TwoDShape.prototype = new Shape();  

Triangle.prototype = new TwoDShape();
 

当我们对对象的prototype属性进行完全重写时,有时候会对对象constructor属性产生一定的负面影响。
所以,在我们完成相关的继承关系设定后,对这些对象的const属性进行相应的重置是一个非常好的习惯。如下所示:

TwoDShape.prototype.constructor = TwoDShape;  

Triangle.prototype.constructor = Triangle;

改写:

function Shape(){}  

  

Shape.prototype.name = 'shape';  

Shape.prototype.toString = function(){  

 return this.name;  

}  

  

function TwoDShape(){}  

  

TwoDShape.prototype = new Shape();  

TwoDShape.prototype.constructor = TwoDShape;  

  

TwoDShape.prototype.name = '2d shape';  

  

function Triangle(side,height){  

 this.side = side;  

 this.height = height;  

}  

  

Triangle.prototype = new TwoDShape;  

Triangle.prototype.constructor = Triangle;  

  

Triangle.prototype.name = 'Triangle';  

Triangle.prototype.getArea = function(){  

 return this.side*this.height/2;  

}

再改写(引用传递而不是值传递):

function Shape(){}  

  

Shape.prototype.name = 'shape';  

Shape.prototype.toString = function(){  

 return this.name;  

}  

  

function TwoDShape(){}  

  

TwoDShape.prototype = Shape.prototype;  

TwoDShape.prototype.constructor = TwoDShape;  

  

TwoDShape.prototype.name = '2d shape';  

  

function Triangle(side,height){  

 this.side = side;  

 this.height = height;  

}  

  

Triangle.prototype = TwoDShape.prototype;  

Triangle.prototype.constructor = Triangle;  

  

Triangle.prototype.name = 'Triangle';  

Triangle.prototype.getArea = function(){  

 return this.side*this.height/2;  

}

虽然提高了效率,但是这样的方法有个副作用,因为是引用传递,而不是值传递,所以“父对象”中的name值受到了影响。
子对象和父对象指向的是同一个对象。所以一旦子对象对其原型进行修改,父对象也会随即被改变。

再再改写(使用临时构造器):

function Shape(){}  

Shape.prototype.name = 'shape';  

Shape.prototype.toString = function(){  

 return this.name;  

}  

function TwoDShape(){}  

var F = function(){}  

F.prototype = Shape.prototype;  

TwoDShape.prototype = new F();  

TwoDShape.prototype.constructor = TwoDShape;  

TwoDShape.prototype.name = '2d shape';  

function Triangle(side,height){  

 this.side = side;  

 this.height = height;  

}  

F.prototype = TwoDShape.prototype;  

Triangle.prototype = new F();  

Triangle.prototype.constructor = Triangle;  

Triangle.prototype.name = 'Triangle';  

Triangle.prototype.getArea = function(){  

 return this.side*this.height/2;  

}

虽然提高了效率,但是这样的方法有个副作用,因为是引用传递,而不是值传递,所以“父对象”中的name值受到了影响。

子对象和父对象指向的是同一个对象。所以一旦子对象对齐原型进行修改,父对象也会随即被改变。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
浅析javascript 定时器
Dec 23 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
javascript this详细介绍
Sep 19 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
Jquery 实现图片轮换
Jan 28 #Javascript
javascript查询字符串参数的方法
Jan 28 #Javascript
Jquery 实现弹出层插件
Jan 28 #Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 #Javascript
Jquery 实现table样式的设定
Jan 28 #Javascript
Jquery 实现checkbox全选方法
Jan 28 #Javascript
AngularJS实现表单验证
Jan 28 #Javascript
You might like
聊天室php&mysql(二)
2006/10/09 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
js计数器代码
2006/11/04 Javascript
用js实现预览待上传的本地图片
2007/03/15 Javascript
js的写法基础分析
2011/01/17 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
《谁的本领大》教后反思
2014/04/25 职场文书
工作检讨书范文
2015/01/23 职场文书
2014年个人总结范文
2015/03/09 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书