码迷,mamicode.com
首页 > 编程语言 > 详细

(知识点)JavaScript继承

时间:2017-04-30 17:13:07      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:空间   lin   pre   cal   call   triangle   自己   tar   str   

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

 

(知识点)JavaScript继承

标签:空间   lin   pre   cal   call   triangle   自己   tar   str   

原文地址:http://www.cnblogs.com/okaychen/p/6789636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!