脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript原型链继承用法

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

 更新时间：2015年01月28日 11:16:43   投稿：shichen2014  
这篇文章主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下

本文实例分析了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 全系IE支持Bootstrap的解决方法

    全系IE支持Bootstrap的解决方法

    用了bootstrap模版搭建的网站，在IE7中打不开，在IE8中背景图片都不显示，内容排列也出现问题，在IE9中表现的最好，在IE11中出现弹出层中的图片无法显示，那么这些兼容性怎么去解决
    2015-10-10
  • JavaScript数组及常见操作方法小结

    JavaScript数组及常见操作方法小结

    这篇文章主要介绍了JavaScript数组及常见操作方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • js中如何将多层嵌套的数组转换为一层数组

    js中如何将多层嵌套的数组转换为一层数组

    这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 微信小程序实现modal弹出框遮罩层组件（可带文本框）

    微信小程序实现modal弹出框遮罩层组件（可带文本框）

    这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件（可带文本框）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序实现登录界面

    微信小程序实现登录界面

    这篇文章主要为大家详细介绍了微信小程序实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JS获取本周周一，周末及获取任意时间的周一周末功能示例

    JS获取本周周一，周末及获取任意时间的周一周末功能示例

    这篇文章主要介绍了JS获取本周周一，周末及获取任意时间的周一周末功能,结合实例形式分析了js通过扩展实现针对日期的运算相关技巧,需要的朋友可以参考下
    2017-02-02
  • javascript制作的滑动图片菜单

    javascript制作的滑动图片菜单

    本文给大家分享的是一款javascript制作的很漂亮的js滑动导航菜单，鼠标经过立即快速滑动切换显示。有需要的小火把可以参考下。
    2015-05-05
  • JS图片预加载 JS实现图片预加载应用

    JS图片预加载 JS实现图片预加载应用

    由于图片加载慢，导致用户体验特别差，本文将介绍一种图片预加载技术，需要了解的朋友可以参考下
    2012-12-12
  • js实现导航栏上下动画效果

    js实现导航栏上下动画效果

    这篇文章主要为大家详细介绍了js实现导航栏上下动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript中的Function.prototye.bind

    javascript中的Function.prototye.bind

    这篇文章主要介绍了javascript中的Function.prototye.bind的相关资料,需要的朋友可以参考下
    2015-06-06

最新评论