js面向对象之封装，继承，多态，类的详解

封装

在面向对象的操作中，我们有完全不同的一些写法。

想要封装我们的对象，就要用到构造函数。我们需要创建构造函数，构造函数和函数一致，都是通过function创建的

• 首字母大写（规范，为了和普通函数进行区分）
• 通过new调用的函数叫构造函数，new完之后得到的结果叫实例对象

属性写在实例对象中，方法写在原型对象中。

function 构造函数名 (参数, 参数n) {
  this.属性 = 参数
  this.属性 = 值
}
 
构造函数.prototype.方法名 = function () {
  
}
 
构造函数.prototype.方法名2 = function () {
  
}
 
构造函数.prototype.方法名n = function () {
  
}

构造函数中的this指向new之后的实例对象。构造函数的原型对象中的方法里的this也指向实例对象。

我们可以在原型对象的方法中，直接通过this调用属性和方法。

function Person (name, age) {
  this.name = name
  this.age = age
  
  // 方法写在构造函数中，每生成一个实例对象，都会在实例对象中生成一个新的方法，浪费内存。
  /* this.say = function () {
    console.log(`我叫${this.name}，今年${this.age}岁`)
  } */
}
 
Person.prototype.type = "人"
 
Person.prototype.say = function () {
  // 原型对象的方法中，可以通过this调用其他方法 也可以通过this实现属性
  console.log(`我叫${this.getName()}，今年${this.age}岁`)
}
 
Person.prototype.getName = function () {
  return this.name
}

继承

JS中一个对象a可以调用另外一个对象b中的属性和方法。表示对象a继承对象b

继承的目的就是为了复用公共代码，不需要每次生成新的对象后重新写相关的方法。

JS官方的继承：把要继承的对象放在子对象的原型链上。把子构造函数的原型对象的__proto__指向父构造函数的原型对象

function Parent (参数1, 参数2, 参数3, 参数n) {
  this.属性1 = 参数1
  this.属性2 = 参数2
  this.属性3 = 参数3
  this.属性n= 参数n
}
 
Parent.prototype.fn1 = function () {}
Parent.prototype.fn2 = function () {}
Parent.prototype.fnn = function () {}

创建一个子对象继承Parent,以下方法是我比较常用的一个继承方法，当然还有一些象寄生组合式继承，对象冒充继承等，个人感觉花里胡哨除了减少内存的使用没有太大的作用，绕来绕去还是离不开原型链

function Child (参数1, 参数2, 参数3, 参数n, 子独有的参数1, 子独有的参数2, 子独有的参数n) {
  // 继承属性
  Parent.call(this, 参数1, 参数2, 参数3, 参数n)
  this.子属性1 = 子独有的参数1
  this.子属性2 = 子独有的参数2
  this.子属性n = 子独有的参数n
}
 
// 方法继承
Child.prototype.__proto__ = Parent.prototype
 
// 子对象的方法
Child.prototype.子fn1 = function () {}
Child.prototype.子fn2 = function () {}
Child.prototype.子fnn = function () {}

多态

同一个方法，在不同的对象中，有不同的表现，就是多态。

打印机都有打印方法彩色打印机的打印是彩色的，普通打印机是黑白的。

• 必须要有继承
• 必须要有方法的重写

class Animal {
  constructor (name) {
    this.name = name
  }
 
  eat () {
 
  }
}
 
class Cat extends Animal {
  constructor (name) {
    super(name)
  }
 
  eat () {
    console.log('吃鱼')
  }
}
 
class Dog extends Animal {
  constructor (name) {
    super(name)
  }
 
  eat () {
    console.log('吃骨头')
  }
}
 
let c = new Cat("猫")
let d = new Dog('狗')

类

ES6中新增的写法，是构造函数写法的语法糖，只是为了填补js中类的缺失，在ES6中就有了这种写法，更简单，更好用

class 类名 {
  constructor (参数) {
    this.属性 = 参数
  }
 
  方法 () {
    
  }
 
  方法2 () {
    
  }
}

类的继承很简单

class Child extends Parent {
  constructor (参数, 子参数) {
    super(参数)
    this.属性 = 子参数
  }
 
  子方法 () {}
}

   class Student {
      constructor(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
      }
 
      sleep() {
        console.log('上课睡觉')
 
      }
 
      eat() {
        console.log('下课干饭')
 
      }
    }
 
    let stu1 = new Student("张三", 18, '男')

new的子类得到的实例对象可以直接使用parent中的方法