对象的继承

一、原型继承 

　　缺点：1、不能给父级构造函数传参

　　　　　2、父级构造函数中引用类型的数据，会被自己构造函数实例共享

　　ps：这是下面实例中的2只猫，是不是萌萌哒！

       这是小7         这是8哥

 

function Animal(name,age) {
  this.name = name
  this.age = age
  this.hobby = ['music','dance']
}

Animal.prototype.say = function() {
  return this.hobby
}
function Cat(color) {
  this.color = color
}
Cat.prototype = new Animal('八哥','1')

var cat1 = new Cat('白色')
cat1.hobby.push('sleep')
var cat2 = new Cat('花色')

console.log(111,cat1.say()) //["music", "dance", "sleep"]
console.log(2222,cat2.say()) //["music", "dance", "sleep"]
console.log(333,cat1.name) //八哥
console.log(444,cat1.age) //1
console.log(555,cat1.color) //白色

二、借用构造函数继承

　　缺点：无法继承原型中的方法

function Animal(name) {
  this.name = name
  this.hobby = ['music','dance']
}

Animal.prototype.say = function() {
  return this.hobby
}
function Cat(color,name) {
  this.color = color
  Animal.call(this,name)
}

var cat1 = new Cat('白色','8哥')
cat1.hobby.push('sleep')
var cat2 = new Cat('花色','小七')

//console.log(111,cat1.say()) //报错 cat1.say is not a function
console.log(333,cat1.name) //八哥
console.log(444,cat1.color) //白色
console.log(555,cat2.name) //小七
console.log(666,cat2.color) //花色

三、组合继承

　　完美的解决了前面2种方式造成的缺陷，但是我们会发现构造函数的属性会有冗余

function Animal(name) {
  this.name = name
  this.hobby = ['music','dance']
}

Animal.prototype.say = function() {
  return this.hobby
}

function Cat(color,name) {
  this.color = color
  Animal.call(this,name)
}

Cat.prototype = new Animal('66')

var cat1 = new Cat('白色','8哥')
cat1.hobby.push('sleep')
var cat2 = new Cat('花色','小七')

console.log(111,cat1.say()) //["music", "dance", "sleep"]
console.log(222,cat2.say()) //["music", "dance"]
console.log(333,cat1.name) //八哥
console.log(444,cat1.color) //白色
console.log(555,cat2.name) //小七
console.log(666,cat2.color) //花色

四、升级一下

function Animal(name) {
this.name = name
this.hobby = ['music','dance']
}


Animal.prototype.say = function() {
  return this.hobby
}



function Cat(color,name) {
  this.color = color
  Animal.call(this,name)
}



Cat.prototype = Animal.prototype



var cat1 = new Cat('白色','8哥')



console.log(111,cat1 instanceof Cat)//true
console.log(222,cat1 instanceof Animal)//true
console.log(333,cat1.constructor)//Animal

 

我们会发现，判断实例的构造函数打印出来的跟我们预期不符

 

优化

function Animal(name) {
this.name = name
this.hobby = ['music','dance']
}


Animal.prototype.say = function() {
return this.hobby
}



function Cat(color,name) {
this.color = color
Animal.call(this,name)
}





Cat.prototype = Object.create(Animal.prototype) 
Cat.prototype.constructor = Cat
var cat1 = new Cat('白色','8哥')


console.log(111,cat1 instanceof Cat)//true
console.log(222,cat1 instanceof Animal)//true
console.log(333,cat1.constructor)//Cat