原型和原型链

面试回答：原型是一个对象，它用于共享属性和方法。原型链是一系列对象通过 __proto__ 属性连接起来的链，用于实现对象继承和属性查找。通过原型和原型链的机制，JavaScript 实现了基于原型的对象继承模型。

原型

构造函数(类) 有一个自己的属性 prototype, 是一个对象

每一个对象都有一个自己的属性 __proto__, 指向所属构造函数的 prototype

这样, 就将构造函数和对象连接了起来

原型链

 原型链就是 __proto__ 串联起来的对象链状结构

 每一个对象都会有自己的原型对象( __proto__ )

原型链访问规则

对象成员的访问规则就是按照原型链的机制进行访问的

当你访问一个对象的成员的时候，会首先在对象自己内查找，如果自己有, 直接使用自己的，如果自己没有, 就会自动去到自己的 __proto__ 查找，如果还没有, 再继续去 __proto__ 查找，以此类推直到 Object.prototype 都没有, 那么返回 null。

常见继承方案

1.  原型链继承

本质就是在原型链上做一些手脚, 让某一个对象的 __proto__ 能指向另一个对象就好了

核心 : 子类的原型指向父类的实例

// 父类
function Person(name) {
  this.name = name
}
Person.prototype.sayHi = function () { 
  console.log('hello world') 
}

// 子类
function Student(age) {
  this.age = age
}

// 实现继承
Student.prototype = new Person('千锋大前端')

const s = new Student(10)
console.log(s)

 缺点 :

    子类没有自己的原型, 因为子类的原型就是父类的实例

    在继承属性这方面, 所有子类实例对象继承下来的属性都是一模一样的

 优点 :

    属性和方法都能继承下来

2.  借用构造函数继承

本质就是把父类构造函数当做一个普通函数来使用, 再利用一些改变 this 指向的方法

核心 : 利用 call 或者 apply 方法调用父类构造函数, 让其 this 指向子类的实例

// 父类
function Person(name) {
  this.name = name
}
Person.prototype.sayHi = function () { 
  console.log('hello world') 
}

// 子类
function Student(age, name) {
  this.age = age

  // 实现继承
  Person.call(this, name)
}

const s = new Student(10, '千锋大前端')
console.log(s)

缺点 :

    只能继承父类的属性, 原型上的方法不能继承

优点 :

    子类有自己的原型, 可以向自己的原型上添加专属于子类的内容

    对于继承的属性而言, 每一个子类的实例都会继承一套自己的属性

3.  基础组合继承

本质就是把上面的 原型继承 和 借用构造函数继承 组合在一起使用而已

将以上两种继承方式的优点全部合并在一起, 号称最早的完美继承

// 父类
function Person(name) {
  this.name = name
}
Person.prototype.sayHi = function () { 
  console.log('hello world') 
}

// 子类
function Student(age) {
  this.age = age

  // 实现继承( 目的 : 继承属性 )
  Person.call(this, name)

}

// 实现继承( 目的 : 继承方法, 属性不重要 )
Student.prototype = new Person()

const s = new Student(10, '千锋大前端')
console.log(s)

4.  寄生继承

本质就是是利用一个空对象来包装父类的实例对象，然后再将该空对象的原型设置为父类的原型对象，最后将该空对象返回作为子类的实例对象，从而实现继承。

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHi = function() {
  console.log('hello world')
}

function Student(parent, name) {
  let student = Object.create(parent)
  student.name = name
  student.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`)
  }
  return student
}

let parent = new Parent('千锋大前端')
let student = createChild(parent, '千锋大前端')

student.sayHello()
student.sayHi()

5.  寄生组合继承

这是一个非常经典的继承方案, 他是结合了 寄生继承 和 基础组合继承 两者创造出来的. 并且解决了组合继承中重复调用构造函数的尴尬, 同时也很好的避免了寄生继承中的原型链污染, 是我个人觉得非常优秀的以中继承方案, 不知道是哪一个大神想出来的方案.

在寄生组合继承中，我们首先使用组合继承的方式创建对象和原型之间的关系，然后通过寄生继承的方式修正原型上不需要的属性

// 寄生继承实现函数
function inheritPrototype(student, person) {
  // 创建父类原型的一个副本
  let prototype = Object.create(person.prototype)
  // 修正副本的 constructor 属性
  prototype.constructor = student
  // 将修正后的原型赋值给子类
  student.prototype = prototype
}

// 父类
function Person(name) {
  this.name = name
}
Person.prototype.sayHi = function() {
  console.log('hello world')
}

// 子类
function Student(age, name) {
  this.age = age
  // 借用继承( 目的 : 继承属性 )
  Person.call(this, name)
}

// 寄生继承
inheritPrototype(Student, Person)

// 向子类自己的原型上添加方法
Student.prototype.sayHello = function() {
  console.log(`Hello, My name is ${ this.name }`);
}

let instance = new Student(10, '千锋大前端')
instance.sayHello()
instance.sayHi()

6.  ES6 的类继承语法

在 ES6 规范中, 出现了类继承的语法

也就是说, 我们可以不需要以上这些乱七八糟的玩意了, 直接上语法

我们可以直接使用 extends 关键字进行父类的继承

     注意 : 还需要在类的构造器内写一个 super 来继承父类属性

// 父类
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHi () {
    console.log('Hello world')
  }
}

// 子类, 直接使用 extends 关键字继承父类
class Student extends Person {
  constructor(name, age) {
    // 继承父类属性
    super(name)
    this.age = age
  }

  sayAge() {
    console.log(`Hello, My name is ${ this.name }`)
  }
}

let instance = new Student('千锋大前端', 10)
instance.sayHello()
instance.sayHi()