Javascript 类继承

时间：2024-07-15 23:04:32

Js继承

JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念。
要想实现继承，可以用js的原型prototype机制或者用apply和call方法去实现

/**
    声明一个基础父类
*/
function Hero(name,skill){
    this.name = name?name:'';
    this.skill = skill?skill:'';
}
Hero.prototype.sayHello = function(){
    console.log(this.name + ";" + this.skill);
}

//类静态常量
Hero.type = "I'm Hero";
//类静态方法
Hero.doSomething = function(){
    console.log('doSomething');
}

子类的定义

1. 使用prototype继承

优缺点

  • 该方法能继承父类的属性,方法
  • 若父类构造器有参数，无法向父构造器传参数·
  • 若父类原型进行了修改会影响到子类实例
  • 构造函数的静态常量不能继承到

实现方法:

  • 把父类的实例付给子类的原型 Children.prototype = new Parent();
  • 要添加 Children.prototype.constructor = Children语句 使 构造函数 等于 原型的constructor
function CNHero(era){
    this.era = era;
}

CNHero.prototype = new Hero();
//使构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;

//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";

var cnHero = new CNHero('三国时代');

//以下属性均是来自父类的(__poro__)
cnHero.name;// =>''   继承了父类的属性
cnHero.skill;// =>''  

//给该属性设值,该属性会在实例下面创建,不会改变__poro__下的值
cnHero.name = 'CNHero:诸葛亮';
cnHero.skill = '东风计';

cnHero.sayHello();//=>诸葛亮;东风计;I'm CNHero

//若父类原型进行了修改会影响到子类实例 与原来父类的原型链相互影响 CNHero - > new Hero - > Hero.prototype
cnHero.change;//=>undefined
Hero.prototype.change = 'change';
cnHero.change;//=>change

2. 使用apply,call继承(构造器继承)

  • 在构造函数中调用父类的构造函数(创建子类就能够传入需要的属性)
  • 该方法能继承 父类的属性(即父类构造器里面的方法,属性)
  • 不能继承父类的原型方法,原型属性
  • 相当于把父类的属性方法拷贝到子类(消耗会变大)
  • 构造函数的静态常量不能继承到
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[]);
    this.era = era;
}
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";
var hero = new CNHero('诸葛亮','72计','三国时代');
console.log(hero.type);     //=>I'm Hero

try{
    hero.sayHello();    //=>继承不了父类原型的方法
}catch(e){
    console.log(e);     //=> hero.sayHello is not a function
}

3.prototype,call/apply组合使用 (组合继承)

  • 该方法能继承 父类的属性，方法
  • 可调用父类的构造函数
  • 会初始化父类两次 ,出现属性重复(子类以及原型有重复属性)
  • 构造函数的静态常量不能继承到
//1.使用call方法调用父类构造函数
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[]);
    this.era = era;
}

//改变prototype的指向
CNHero.prototype = new Hero();
//使 构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";
var hero = new CNHero('诸葛亮','东风计');

hero.sayHello();        //=>诸葛亮;东风计;I'm CNHero

4. 寄生继承

  • 组合继承的改进方法,可以避免属性重复的问题
  • 构造函数的静态常量不能继承到
function CNHero(name,skill,era){
    Hero.call(this,name,skill); // <=>Hero.apply(this,[name,skill]);
    this.era = era;
}

//闭包，不影响外面的执行
(function(){
    // 创建一个间接类 并 将父类的原型赋值给间接类 这样能够避免将父类的属性添加到子类
    var Super = function(){};
    Super.prototype = Hero.prototype;
    //将实例作为子类的原型
    CNHero.prototype = new Super();
}());

//使 构造函数 等于 原型的constructor
CNHero.prototype.constructor = CNHero;
//类静态常量/方法不会继承 需要自己声明
CNHero.type = "I'm CNHero";

var hero = new CNHero('诸葛亮','东风计','三国时代');

hero.sayHello();        //=>诸葛亮;东风计;I'm CNHero

相关文章