（知识点）JavaScript继承

Posted 2020-09-15

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();　　 　　　　//25
console.log(my.toString());//继承的方法，具体步骤（遍历my对象属性没有找到，接着查看my.__proto__所指向的对象，即new TwoDshape()创建的实体，
//依然没找到，又继续查找该实体的__proto__所指向的对象，即new Shape()所创建的实体，找到toString方法，并在my对象中被调用，this指向my）


//通过instanceof操作符，我们可以验证my对象同时是上面三个构造器的实例
my instanceof Shape；    　　    //true
my instanceof  TwoDShape；     //true
my 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