js--继承

每个类有3部分,
第一部分是构造函数内的,供实例化对象复制用的
第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到
第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是供所有实例化对象共用的。
1.类式继承

//类式继承
//声明父类
function SuperClass(){
 this.superValue=true;
}
//为父类添加共有方法
SuperClass.prototype.getSuperValue=function(){
 return this.superValue;
};
//声明子类
function SubClass(){
  this.subValue=false;
}
//继承父类
SubClass.prototype=new SuperClass();//子类的原型为父类的实例
//为子类添加共有方法
SubClass.prototype.getSubValue=function(){
 return this.subValue;
};

类的原型对象是为类的原型添加共有方法,但类不能直接访问这些属性和方法,必须通过原型prototype来访问。通过改变原型,新创建的对象不仅可以访问父类原型的属性和方法,也可以访问从父类构造函数中复制的属性和方法。

var instance=new SubClass();
console.log(instance.getSuperValue());//true
console.log(instance.getSubValue());//false

instanceof是通过判断对象的prototype链来来检测某个对象是否是某个类的实例,而不关心对象和类的自身结构。

console.log(instance instanceof SuperClass);//true
console.log(instance instanceof SubClass);//true
console.log(SubClass instance SuperClass);//false

subclass继承superclass是通过将superclass的实例赋值给subclass的原型prototype,所以SubClass.prototype继承了superClass

console.log(SubClass.prototype instanceof SuperClass);//true

类式继承的缺点:
(1)子类通过原型继承了父类,父类中的共有属性要是引用类型,就会在子类中被所有实例共用。因此一个子类的实例更改子类原型从父类构造函数中继承来的共有属性就会直接影响其他子类。

function SuperClass(){
  this.books=['js','html','css'];
}
function SubClass(){}
SubClass.prototype=new SuperClass();
var instance1=new SubClass();
var instance2=new SubClass();
console.log(instance2.books);//   js   html   css
instance1.books.push('设计模式');
console.log(instance2.books);//  js  html  css 设计模式

(2)子类实现的继承是靠其原型prototype对父类的实例化实现的,因此在创建父类的时候,是无法向父类传递参数的,因而在实例化父类的时候也无法对父类构造函数内的属性初始化
2.构造函数继承

//声明父类
function SuperClass(id){
  //引用类型共有属性
  this.books=['js','html','css'];
  //值类型共有属性
  this.id=id;
}
//父类声明原型方法
SuperClass.prototype.showBooks=function(){
  console.log(this.books);
}
//声明子类
function SubClass(id){
 //继承父类
 SuperClass.call(this,id);
}
//创建第一个子类的实例
var instance1=new SubClass(10);
//创建第二个子类的实例
var instance2=new SubClass(11);

instance1.books.push('设计模式');
console.log(instance1.books);//js html  css 设计模式
console.log(instance1.id);//10
console.log(instance2.books);// js  html  css
console.log(instance2.id)//11

isntance1.showBooks();//TypeError

由于更改了函数的作用环境,因此在子类中,对superclass调用这个方法就是将子类中的变量在父类中执行一遍,由于父类中是给this绑定属性的,因此子类自然也就继承了父类的共有属性。
由于继承时没有涉及原型prototype,所以父类原型的方法不会被继承。要想被子类继承必须放在构造函数中,这样创建出来的每个实例都会单独拥有一份而不能共用,这就违背了代码复用的原则。
3.组合继承
类式继承是通过子类的原型prototype对父类实例化实现的
构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的

//声明父类
function SuperClass(name){
  //值类型共有属性
  this.name=name;
  //引用类型共有属性
  this.books=['html','css','js'];  
}
//父类原型共有方法
SuperClass.prototype.getName=function(){
  console.log(this.name);
};
//声明子类
function SubClass(name,time){
  //构造函数式继承父类name属性
  SuperClass.call(this,name);
  //子类中新增的共有属性
  this.time=time;
}
//类式继承
SubClass.prototype=new SuperClass();
//子类原型方法
SubClass.prototype.getTime=function(){
 console.log(this.name);
};

这样,子类的实例中更改父类继承下来的引用类型属性如books,根本不会影响其他实例,并且在子类实例化过程中又能将参数传递到父类的构造函数中name。

var instance1=new SubClass('js',2014);
instance1.books.push('设计模式');
console.log(instance1.books); //html   css  js  设计模式
instance1.getName();//js
isntance1.getTime();//2014

var instance2=new SubClass('css',2013);
console.log(instance2.books);//html css js
instance2.getName();//css
instance2.getTime();//2013

4.原型式继承

//原型式继承
function inheritObject(o){
  //声明一个过渡函数对象
  function F(){}
  //过渡对象的原型继承父对象
  F.prototype=o;
  //返回过渡对象的一个实例,该实例的原型继承了父对象
  return new F();
}

对类式继承的一个封装,由于F过渡类的构造函数中无内容,所以开销较小,使用起来也比较方便。跟类式继承一样,父类对象的book中的值类型属性被复制,引用类型的属性被共用

var book={
 name:"js  book",
 alikeBook:["css","html"]
};
var newBook=inheritObject(book);
newBook.name="ajax";
newBook.alikeBook.push("xml");

var otherBook=inheritObject(book);
otherBook.name="flash";
otherBook.alikeBook.push("as book");

console.log(newBook.name);//ajax
console.log(newBook.alikeBook);//css html xml

console.log(otherBook.name);//flash
console.log(otherBook.alikeBook);// css html xml as book

console.log(book.name);//js  book
console.log(book.alikeBook); //css  html  xml as book

5.寄生式继承

//声明基对象
var book={
 name:"js",
 alikeBook:["css","html"]
};
function createBook(obj){
 //通过原型继承方式创建新对象
 var o=new inheritObject(obj);
 //拓展新对象
 o.getName=function(){
 console.log(name);
 };
//返回拓展后的新对象
return  o;
}

寄生式继承是对原型继承的第二次封装,并且在第二次封装的过程中对继承的对象进行了拓展,这样先创建的对象不仅仅有父类的属性和方法而且添加了新的属性和方法。

6.寄生组合式继承

function inheritPrototype(subClass,superClass){
  //复制一份父类的原型副本保存在变量中
  var p=inheritObject(superClass.prototype);
  //修正因为重写子类原型导致子类的constructor属性被修改
  p.constructor=subClass;
  //设置子类的原型
  subClass.prototype=p;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值