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

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

代码如下:
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属性进行相应的重置是一个非常好的习惯。如下所示:

代码如下:

改写:

代码如下:
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;
}

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

代码如下:
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值受到了影响。 子对象和父对象指向的是同一个对象。所以一旦子对象对其原型进行修改,父对象也会随即被改变。

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

代码如下:

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

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

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...