- 什么是继承
- 继承的原理
- 如何完成JS的继承？
什么是继承
继承就是子类拥有父类的各种属性和方法
那什么是类？这里的JS的类即是函数，能产生对象的东西就是类。
继承需要两个类：父类和子类，在JS中的继承需要有2次对原型的搜索。
继承的原理
//原理
子类('参数'){
父类.call(this,'参数')
}
子类.prototype.__proto__=父类.prototyp
如何完成JS的继承？
一、ES5中如何完成JS的继承？
1、声明一个父类函数，父类函数有一个name的属性和run()的方法
function Human(name){
this.name = name
}
Human.prototype.run = function(){
console.log("我叫"+this.name+"，我在跑")
return undefined
}
2、声明一个子类函数，并从父类函数中继承属性
function Man(name){
Human.call(this, name) //是Human的属性
this.gender = '男' //是自己的属性
}
Man.prototype.fight = function(){
console.log('xxx')
}
注意，Human.call(this, name)就是从父类继承属性，这句代码很重要
3、从父类函数继承方法
//添加一句这样的代码就可以了
Man.prototype.__proto__=Human.prototype
然而IE不兼容这个代码所以要换另一种方式
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()
原因是什么？因为当 var a =new f()的时候
会发生5个步骤：
- 产生一个空对象
- this=空对象
- this.proto_=f.prototype
- 执行f.call(this,其他参数)
- return 上一行述结果
所以需要声明一个空的函数f。
二、ES6中如何完成JS的继承？
class Human{
constructor(name){
this.name = name
}
run(){
console.log("我叫"+this.name+"，我在跑")
return undefined
}
}
class Man extends Human{
constructor(name){
super(name)
this.gender = '男'
}
fight(){
console.log('xxx')
}
}
从ES5改成ES6逻辑其实是一样的，只是写法换了一下。其中用关键字extends来继承父类，用super来call一下父类获得父类的属性。
三、ES5与ES6写法的优劣？
ES5的写法可以更直观的看清楚内存的变化，同时可以在方法中增加属性。而ES6的写法不能在方法中增加属性，暂时不支持。
