【JavaScript】两种方法实现继承

JS继承-ES6-基于 class 实现继承

mdn 类

阮一峰 ES6-class

mdn-super

ES6中推出了class类,是用来创建对象的模板。

class可以看作是一个语法糖,它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class

核心语法:

MDN-类

// 定义类
class Person {
  // 实例属性
  name
  food
  // 构造方法，类似于构造函数，new的时候会调用，内部的this就是实例化的对象
  constructor(name, food) {
    this.name = name
    this.food = food
  }

  // 实例方法
  sayHi() {
    console.log(`你好，我叫${this.name},我喜欢吃${this.food}`)
  }
}
const p = new Person('小黑', '西蓝花')
p.sayHi()

总结：

class核心语法：

1. 通过class 类名{}的形式来定义类
2. 内部直接写实例属性,可以设置默认值
3. 实例方法的添加方式为方法名(){}
4. 构造函数通过constructor进行添加
5. 通过new 类名()创建实例,会调用构造函数constructor

class Person{
    name
    food='西兰花炒蛋'
    constructor(name){
        this.name=name
    }
	sayHi(){
        console.log('你好,我叫:',this.name)
    }
}

class 实现继承

1. 子类通过 extends 继承父类
2. 子类构造函数中通过 super 调用父类构造函数

// 在上一份代码的基础上继续编写下面代码
class Student extends Person {
  song
  constructor(name, food, song) {
    // 子类构造函数使用this以前必须调用super
    super(name, food)
    this.song = song
  }
  // 添加方法
  sing() {
    console.log(`我叫${this.name},我喜欢唱${this.song}`)
  }
}
const s = new Student('李雷', '花菜', '孤勇者')
s.sayHi()
s.sing()

总结：

class实现继承

1. 子类通过extends继承继承父类
2. 子类如果需要重新定义构造函数,必须在内部通过super关键字调用父类的构造函数

class 私有属性，静态属性和方法

1. 私有属性 / 方法
2. 静态属性 / 方法

class Person {
  constructor(name) {
    this.name = name
  }
  // 通过#作为前缀添加的属性会变为私有
  // 私有属性
  #secret = '我有一个小秘密，就不告诉你'
  // 私有方法
  #say() {
    // 私有属性可以在
    console.log('私有的say方法')
  }
  info() {
    // 在类的内部可以访问私有属性调用私有方法
    console.log(this.#secret)
    this.#say()
  }

  // 通过 static定义静态属性/方法
  static staticMethod() {
    console.log('这是一个静态方法')
    console.log(this)
  }
  static info = '直立行走，双手双脚'
}

const p = new Person('jack')
console.log(p)
// 外部无法访问 点语法访问直接报错，通过[]无法动态获取
console.log(p['#secret'])
p.info()
// 通过类访问静态属性/方法
Person.staticMethod()
console.log(Person.info)

总结：

class 语法补充

1. class中私有属性/方法
   1. 定义和使用时需要使用关键字#
   2. 私有属性只能在类的内部使用,外部无法使用(代码中)
   3. Chrome的控制台中为了方便调试,可以直接访问
2. class中静态属性/方法
   1. 定义和使用时需要使用关键字static
   2. 通过类访问
   3. 静态方法中的this是类

JS继承-ES5-基于原型和构造函数实现继承

ES5-寄生组合式继承

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

• 组合式继承：借用构造函数，原型链
• 寄生：父类的原型中，有子类的构造函数

其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。

核心步骤:

1. 通过构造函数来继承属性
2. 通过原型链来继承方法

// 继承原型函数
function inheritPrototype(son, parent){
    const prototype = object.create(parent.prototype)
    prototype.constructor = son
    son.prototype = prototype
}

// 父类构造函数
function Parent(name) {
  this.name = name
  this.foods = ['西蓝花', '西葫芦', '西红柿']
}

Parent.prototype.sayHi = function () {
  console.log(this.name, `我喜欢吃,${this.foods}`)
}

// 子类借用父类的构造函数，将 this，name 参数传递给父类
function Son(name, age) {
  Parent.call(this, name)
  this.age = age
}
// 完成原型继承
inheritPrototype(Son,Parent)
// 可以继续在原型上添加属性/方法
Son.prototype.sayAge = function () {
  console.log('我的年龄是', this.age)
}

const son1 = new Son('jack', 18)
const son2 = new Son('rose', 16)

总结：

ES5-寄生组合式继承

1. 寄生组合式继承的核心步骤是：通过构造函数来继承属性，通过原型链来继承方法
2. 寄生组合式继承和组合式继承的区别是：原型链的继承并没有调用父类的构造函数，而是直接基于父类的原型创建一个新副本实现继承