首页 > 代码库 > (知识点)JavaScript继承
(知识点)JavaScript继承
1)原型链
①原型链示例
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; }}TwoDshape.prototype = new Shape();Triangle.prototype = new TwoDshape(); //用new新建对象实体,并赋值覆盖该对象的原型TwoDshape.prototype.constructor = TwoDshape;Triangle.prototype.constructor = Triangle; var my = new Triangle(5,10); my.getArea(); //25console.log(my.toString());//继承的方法,具体步骤(遍历my对象属性没有找到,接着查看my.__proto__所指向的对象,即new TwoDshape()创建的实体,//依然没找到,又继续查找该实体的__proto__所指向的对象,即new Shape()所创建的实体,找到toString方法,并在my对象中被调用,this指向my)//通过instanceof操作符,我们可以验证my对象同时是上面三个构造器的实例my instanceof Shape; //truemy instanceof TwoDShape; //truemy instanceof Triangle; //true
//我们也可以用其他两个构造器来创建对象,用new TwoDshape()所创建的对象也可以获得继承自Shape()的toString()方法
var td = new TwoDshape();
td.constructor === TwoDshape; //true;
td.toString(); // 2D shape
var s = new Shape();
s.constructor === shape; // true;
②将共享属性迁移到原型中去
function Shape(){this.name=‘shape‘}//使用new Shape()新建对象,每个实体都有全新的属性并占用独立空间function Shape(){};Shape.prototype.name=‘shape‘;//属性移到原型后,使用new新建对象时,不再含自己独立的这个属性
2)只继承于原型
Triangle.prototype=Shape.prototype;//减少继承方法的查询步骤Triangle.prototype.name=‘Triangle‘;//修改子对象原型后父对象原型也随即被改,即再new Shape()新建对象时,新对象name为‘Triangl
②临时构造器——new F()
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;}var F = function () {};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;}var my = new Triangle (5,10);alert(my.getArea());
//通过这种方法,我们仍然能保持住原型链
my._proto_ === Triangle.prototype; //true
my._proto_.constructor === Triangle; //true
my._proto_._proto_ === TwoDshape.prototypr; //true
my._proto_._proto_._proto_.constructor === Shape;_ //true
//并且父对象的属性不会被子对象覆盖:
var s = new Shape();
s.name; // shape
//calling toString()
"I am a" + new TwoDshape(); //I am a 2D shape
3)uber—子对象访问父对象的方式
function Shape(){}Shape.prototype.name=‘shape‘;Shape.prototype.toString=function(){ var const = this.constructor;
return const.uber
? this.const.uber.toString() + ‘,‘ + this.name
: this.name;
}function TwoDShape(){}var F=function(){}F.prototype=Shape.prototype;TwoDShape.prototype=new F();TwoDShape.prototype.constructor=TwoDShape;TwoDShape.uber=Shape.prototype;TwoDShape.prototype.name=‘2D shape‘;function Triangle(side,height){ this.side=side; this.height=height;}var F=function(){}F.prototype=TwoDShape.prototype;Triangle.prototype=new F();Triangle.prototype.constructor=Triangle;Triangle.uber=TwoDShape.prototype;Triangle.prototype.name=‘triangle‘;Triangle.prototype.getArea=function(){return this.side*this.height/2};var my=new Triangle(5,10)console.log(my.toString());//shape,2D shape,triangle
(知识点)JavaScript继承
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。