继承

参考 JavaScript常见的六种继承方式

继承的实质

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。

1、原型链继承

/**
  原型链继承
  Student.prototype = new Person()
  
  https://segmentfault.com/a/1190000016708006
  
  但这种方式实现的本质是通过将子类的原型指向了父类的实例，所以子类的实例就可以通过__proto__访问到 Student.prototype 也就是Person的实例，
  这样就可以访问到父类的私有方法，然后再通过__proto__指向父类的prototype就可以获得到父类原型上的方法。
  于是做到了将父类的私有、公有方法和属性都当做子类的公有属性

  子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法，
  我们都知道在操作基本数据类型的时候操作的是值，在操作引用数据类型的时候操作的是地址，
  如果说父类的私有属性中有引用类型的属性，那它被子类继承的时候会作为公有属性，这样子类1操作这个属性的时候，就会影响到子类2。

  # 特点：
  * 父类新增原型方法/原型属性，子类都能访问到
  * 简单，易于实现


  # 缺点：
  * 无法实现多继承
  * 来自原型对象的所有属性被所有实例共享
  * 创建子类实例时，无法向父类构造函数传参
  * 要想为子类新增属性和方法，必须要在Student.prototype = new Person() 之后执行，不能放到构造器中

 * 
 */
function Person(age) {
  this.age = age
  this.setName = function (name_) {
    this.name = name_
  }
}

Person.prototype.setAge = function (age_) {
  this.age = age_
}
console.log('Person.prototype: ', Person.prototype)

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


// >>>>>>>>>>>>>>>>>>>>> begin 
// section-1 和 section-2 本质一样  

/** section-1:  */
Student.prototype = new Person()
Student.prototype.gender = 'gril'

/* section-2 */
// const p = new Person()
// p.gender = 'gril'
// Student.prototype = p
// <<<<<<<<<<<<<<<<<<<<<< end 


var s1 = new Student(15000)
// s1.__proto__ = Person.prototype

console.log('s1: ', s1)
s1.setName('bob')
s1.setAge(18)
console.log('s1: ', s1)
console.log('s1.__proto__ === Student.prototype: ', s1.__proto__ === Student.prototype)
console.log('s1.__proto__: ', s1.__proto__)

/** 输出：
s1:  Person { price: 15000 }
s1:  Person { price: 15000, name: 'bob', age: 18 }
s1.__proto__ === Student.prototype:  true
s1.__proto__:  Person {
  age: undefined,
  setName: [Function (anonymous)],
  gender: 'gril'
}
 */

2、构造函数继承

/**

:在子类型构造函数中通过`call/apply`调用父类型构造函数

只能继承父类的属性和方法，不能继承父类**原型**的属性和方法

# 特点：
* 解决了原型链继承中子类实例共享父类引用属性的问题
* 创建子类实例时，可以向父类传递参数
* 可以实现多继承(call多个父类对象)

# 缺点：
* 实例并不是父类的实例，只是子类的实例
* 只能继承父类的实例属性和方法，不能继承原型属性和方法
* 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

 */

function Person(name, age) {
  console.log('Person constructor');
  this.name = name
  this.age = age
  this.setName = function () { }
}

Person.prototype.setAge = function () { }

function Student(name, age, price) {
  console.log('Student constructor');

  // Person.call(this, name, age)  // 相当于: this.Person(name, age)
  Person.apply(this, [name, age])
  this.price = price
}
var s1 = new Student('Tom', 20, 15000)
console.log('s1: ', s1);

// 只能继承父类的属性和方法，不能继承父类原型的属性和方法
// s1.setAge()//s1.setAge is not a function



/**
 输出:

 s1:  Student {
   name: 'Tom',
   age: 20,
   setName: [Function (anonymous)],
   price: 15000
 }
 */

3、原型链+借用构造函数的组合继承

/**

原型链+借用构造函数的组合继承

通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。
本质是 **方法1+方法2+constructor=方法3**

这种方式融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。不过也存在缺点就是无论在什么情况下，
都会调用两次构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数的内部，
子类型最终会包含父类型对象的全部实例属性，但我们不得不在调用子类构造函数时重写这些属性。

# 优点：
* 可以继承实例属性/方法，也可以继承原型属性/方法
* 不存在引用属性共享问题
* 可传参
* 函数可复用

# 缺点：
* 调用了两次父类构造函数，生成了两份实例

 */
function Person(name, age) {
  console.log('Person constructor');
  this.name = name
  this.age = age
  this.setAge = function () { }
}
Person.prototype.getName = function () {
  console.log("111")
}
function Student(name, age, price) {
  console.log('Student constructor');
  Person.call(this, name, age)
  this.price = price
  this.setScore = function () { }
}
Student.prototype = new Person()
Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
Student.prototype.sayHello = function () { }
var s1 = new Student('Tom', 20, 15000)
var p1 = new Person('Jack', 22, 14000)
console.log('s1: ', s1)
console.log('s1.constructor: ', s1.constructor) //Student
console.log('p1.constructor: ', p1.constructor) //Person

/**
输出：


 */

4、组合继承优化1

/**
这种方式通过父类原型和子类原型指向同一对象，子类可以继承到父类的公有方法当做自己的公有方法，
而且不会初始化两次实例方法/属性，避免的组合继承的缺点。

**但这种方式没办法辨别是对象是子类还是父类实例化**

# 优点：
* 不会初始化两次实例方法/属性，避免的组合继承的缺点

# 缺点：
* 没办法辨别是实例是子类还是父类创造的，子类和父类的构造函数指向是同一个。

 */
function Person(name, age) {
  this.name = name
  this.age = age
  this.setAge = function () { }
}
Person.prototype.getAge = function () {
  console.log("111")
}
function Student(name, age, price) {
  Person.call(this, name, age)
  this.price = price
  this.setScore = function () { }
}
Student.prototype = Person.prototype
Student.prototype.sayHello = function () { }
var s1 = new Student('Tom', 20, 15000)
console.log(s1)

console.log(s1 instanceof Student, s1 instanceof Person)//true true
console.log(s1.constructor)//Person

5、组合继承优化2

/**

借助原型可以基于已有的对象来创建对象，var B = Object.create(A)以A对象为原型，生成了B对象。B继承了A的所有属性和方法。

**同样的，Student继承了所有的Person原型对象的属性和方法。目前来说，最完美的继承方法**


 */

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.getAge = function () {
  console.log("111")
}
function Student(name, age, price) {
  Person.call(this, name, age)
  this.price = price
  this.setScore = function () { }
}
Student.prototype = Object.create(Person.prototype)//核心代码
Student.prototype.constructor = Student//核心代码
var s1 = new Student('Tom', 20, 15000)
console.log(s1)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student

6-ES6中class 的继承

/**
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），
然后再用子类的构造函数修改this。

# 优点：
* 语法简单易懂,操作更方便

# 缺点：
* 并不是所有的浏览器都支持class关键字

 */

class Person {
  //调用类的构造方法
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  //定义一般的方法
  showName() {
    console.log("调用父类的方法")
    console.log(this.name, this.age);
  }
}
let p1 = new Person('kobe', 39)
console.log(p1)
//定义一个子类
class Student extends Person {
  constructor(name, age, salary) {
    super(name, age)//通过super调用父类的构造方法
    this.salary = salary
  }
  showName() {//在子类自身定义方法
    console.log("调用子类的方法")
    console.log(this.name, this.age, this.salary);
  }
}
let s1 = new Student('wade', 38, 1000000000)
console.log(s1)
s1.showName()