类

为什么有类？

不同对象的属性重复了，就有了类

let person1 = {
  name:'gouson',age:19,sayHi(){}
}
let person2 = {
  name:'mengmeng',age:18,sayHi(){}
}

类和构造函数

class Person{
name
age
sayHi(){}
constructor(name,age){
  this.name=name
  this.age=age
}
}
let person1 = new Person('gouson',19)
let person2 = new Person('mengmeng',18)

改为TypeScript

类+数据类型

class Person{
sayHi:void{}
  constructor(public name:string,public age:number){}
}
let person1 = new Person('gouson',19)
let person2 = new Person('mengmeng',18)

小结

类
- 类是把对象得属性提前写好，避免重复
- 类里面的字段会变成对象得属性
- 为了节约内存，所有函数都是共用的
  - 但是如果 mySayHi=()=>{}//就是自用的函数
- 而非函数属性是对象各自有的
  - 但是要创建一个共有属性可以
  - 在原型上加 Person.prototype.kind=’people’
  - static kind = ‘people’
- 使用console.log(person1)可以看到
构造函数
- 属性名虽然可以提前写好，但是属性值不可以
- 需要构造函数接受参数，初始化属性值
- 构造函数不需要写return，默认会return新对象
语法
- JS class语法
- TS class语法

继承

为什么有继承

不同的类的属性重复了，就有了继承

现在要给Person添加功能

person1.on(‘die’,fn)
person1.emit(‘die’)
person1.off(‘die’,fn)

就是让Person具有发布订阅功能

class Person{
constructor(public name){}
sayHi(){}
cache=[]
on(){}
off(){}
emit(){}
}

如果现在Animal类也要拥有发布订阅功能

class Animal{
constructor(public name){}
roar(){}
cache=[]//重复
on(){}//重复
off(){}//重复
emit(){}//重复
}

这时候，两个类的发布订阅属性重复了
现可以通过继承来解决这个问题

把重复属性拿出来单独写个类EventEmitter
然后让Person和Animal类来继承

注意constructor要调用super()来保证EventEmitter实例被初始化

class EventEmitter{
constructor(){}
cache=[]//重复
on(){}//重复
off(){}//重复
emit(){}//重复
}
class Person extends EventEmitter{
constructor(public name){
    super()
}
sayHi(){}
}
class Animal extends EventEmitter{
constructor(public name){
    super()
}
roar(){}
}
const person=new Person()
const animal=new Animal()

重写

子类重写父类的所有属性，以实现多态
多态的意思是不同的子类对同一个消息有不同的反应

class Person extends EventEmitter{
  constructor(public name){
    super()
}
sayHi(){}
on(eventName,fn){
    console.log('开始监听')
  super.on(eventName,fn)
}
}

继承的问题

如果需要更多的功能，一是让EventEmitter继承其他类，二是让Person继承两个类（多继承）
这两种方法其实都不好，用到组合

组合

组合没有固定写法

class Person{
    eventEmitter = new EventEmitter()
    name
  sayHi(){}
    on(eventName,fn){
      this.eventEmitter.on(eventName,fn)
  }
    off(eventName,fn){
      this.eventEmitter.off(eventName,fn)
  }
    emit(eventName,fn){
      this.eventEmitter.emit(eventName,fn)
  }
}

上面的代码还可以优化一下

class Person{
    name
  sayHi(){}
}
let person1 = new Person('Gouson')
mixin(person1,new EventEmitter())
function mixin(to,from){//这是最简化的mixin,实际会更复杂
    for(let key in from){
      to[key] = from[key]
  }
}

如果需要更多的功能

class Person{
  name
  sayHi(){}
}
let person1 = new Person('frank')
mixin(person1, new EventEmitter())
mixin(person1, new Flyer())
mixin(person1, new Killer())

例子

dog
.wangwang()
.poop()

cat
.miaomiao()
.poop()

animal
.poop()
dog
.wangwang()
cat
.miaomiao()

cleaningRobot
.run()
.clean()

murderRobot
.run()
.kill()

robot
.run()
cleaningRobot
.clean()
murderRobot
.kill()

不用class写dog

const createWang = (state) => ({
  wangwang: ()=> {
    console.log(`汪汪,我是 ${state.name}`)
  }
})
const createRun = (state) => ({
  run: ()=> state.position += 1
})
const createDog = (name) => {
  const state = {name, position: 0}
  return Object.assign(
    {},
    createWang(state),
    createRun(state)
  )
}
const dog = createDog('小白')

需要一个狗型杀人机器人,不需要poop(),用继承很难做到，所以要用到组合

dog=poop()+wangwang()
cat=poop()+miaomiao()
cleaningRobot=run()+clean()
murderRobot=run()+kill()
KillerDogRobot=run()+kill()+wangwang()

const createMurderRobotDog = (name) => {
  const state = {name, position: 0}
  return Object.assign(
    {},
    createWang(state),
    createRun(state),
    createKill(state)
  )
}
const murderRobotDog = createMurderRobotDog(' ')

什么情况下用继承

开发者不会用组合
功能没有太多的交叉，一眼就能看出继承关系
前端库比较喜欢用继承
举例
- const vm = new Vue({…})
- class App extends React.Component{…}
- React.Component 内置了方便的复用代码（轮子）
  什么情况下用组合
功能组合非常灵活，无法一眼看出继承关系
插件系统
mixin模式
举例
- Vue.mixin()
- Vue.use(MyPlugin)
- React接受组件的组件

JS 实践笔记

40.继承与组合

类

改为TypeScript

小结

继承

重写

继承的问题

组合

例子

什么情况下用继承

什么情况下用组合