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;//=>change2. 使用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 CNHero4. 寄生继承
- 组合继承的改进方法,可以避免属性重复的问题
- 构造函数的静态常量不能继承到
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