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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php session的应用详细介绍
2017/03/22 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python raise的基本使用
2020/09/10 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
银行会计财务工作个人的自我评价
2013/10/29 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
英语生日邀请函
2014/01/23 职场文书
安全标准化实施方案
2014/02/20 职场文书
高三高考决心书
2014/03/11 职场文书