首页 > 代码库 > (知识点)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继承