Web前端入门第 67 问：JavaScript 中的面向对象编程

此 对象 非彼对象啊，不要理解错了哦~~

面向对象编程 这个概念在 Java 编程语言中用得比较多，JS 同时支持 面向对象编程 和 函数式编程。

像大名鼎鼎的 React 和 Vue 他们都有两种开发风格，比如：

Vue 中的 组合式API 和 选项式API 也是两种编程模式的代表。

React 中的 函数式组件 和 类组件 就是两种编程模式的代表。

原型链

JS 中的每个对象（null 除外）都有一个隐式原型，可以通过 __proto__ 或者 Object.getPrototypeOf() 访问。

null 虽然用 typeof 检测会获得 Object 类型，但 null 有一点特殊，表示空，什么都没有的意思。

比如：

const a = 'str'
console.log(a.__proto__) // 获得 String.prototype
console.log(Object.getPrototypeOf(a)) // 获得 String.prototype
console.log(a.__proto__ === String.prototype) // true
console.log(Object.getPrototypeOf(a) === String.prototype) // true

这么多年的搬砖经验来看，__proto__ 这个属性能派上用场的场景真的少见~~

构造函数

function 申明的函数都拥有一个显式原型 prototype 属性，如果用 new 关键字调用这个函数，那么此时这个函数就称之为 构造函数。

实例化构造函数的时候，实例化对象的 __proto__ 就指向构造函数的 prototype 属性。

function Person() {}
Person.prototype.name = '前端路引'

const person = new Person()

console.log(person.__proto__ === Person.prototype) // true
console.log(person.name) // 输出：前端路引

编程实践推荐：构造函数声明时，首字母一般大写，而函数声明时首字母一般小写。

继承

继承 这玩意儿可以算作面向对象编程的核心思想，如果编程语言不支持 继承，那面向对象就是一句空话。

JS 中的继承玩法多种多样，掌握一种就可以独步武林~~ 但面试官可是全能高手，一般都会问知道有几种继承方式，他们怎么实现这些问题。

原型链继承

子类通过 prototype 指向父类实例，就是原型链继承，但此种方式继承有一个大缺陷，会共享父类中的引用类型（比如数组、对象）。

function Parent() {
  // 父类中申明的属性
  this.arr = ['公众号', '前端路引'];
}

// 父类中申明的方法
Parent.prototype.getName = function () {
  console.log('前端路引');
}

function Child() {}
// 使用原型链继承父类
Child.prototype = new Parent();

const child1 = new Child();
// 修改 child1 的实例属性
child1.arr.push(1);
child1.getName();

const child2 = new Child();
child2.getName();
console.log(child2.arr); // 输出：['公众号', '前端路引', 1]

可以看到子类都可以调用父类的 getName 方法，但是在 child1 实例修改 arr 属性后，child2 也会受影响，这边是原型链继承中的弊端。

构造函数继承

此继承方式的特点是利用函数的 call 或者 apply 方法，再传入子类的 this 指针实现继承，缺点是无法继承父类上的原型方法。

function Parent(name) {
  this.name = name;
  this.arr = ['公众号', '前端路引'];
  this.test = function () {
    console.log('调用父类 test 方法');
  }
}
Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child(name) {
  Parent.call(this, name);
}

const child1 = new Child('前端路引');
// 修改 child1 的实例属性
child1.arr.push(1);
console.log(child1.arr); // ['公众号', '前端路引', 1]
child1.test(); // 输出：调用父类 test 方法

const child2 = new Child('前端路引');
console.log(child2.arr); // ['公众号', '前端路引']
child2.getName(); // 报错  TypeError: child2.getName is not a function

此继承方式修复了 原型链继承 中共享 引用类型 问题，但却存在无法继承父类原型链方法的弊端。

组合继承

此继承方式结合了原型链继承和构造函数继承而衍生出的另一种继承方式，同时解决了两种继承方式的弊端。

function Parent(name) {
  this.name = name;
  this.arr = ['公众号', '前端路引'];
  this.test = function () {
    console.log('调用父类 test 方法');
  }
}
Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child(name) {
  Parent.call(this, name); // 继承属性（第二次调用）
}
Child.prototype = new Parent(); // 继承方法（第一次调用）

const child1 = new Child('前端路引');
// 修改 child1 的实例属性
child1.arr.push(1);
console.log(child1.arr); // ['公众号', '前端路引', 1]
child1.test(); // 输出：调用父类 test 方法

const child2 = new Child('前端路引');
console.log(child2.arr); // ['公众号', '前端路引']
child2.getName(); // 输出：前端路引

组合继承可以拥有父类上的 getName，同时还不会共享父类上的引用类型，但父类构造函数却被调用了两次，存在性能优化上的空间，这也是此种继承方式的弊端。

寄生组合继承

此继承方式通过 Object.create 方法复制父类的原型链，优化父类会被调用两次问题，算是比较完美的一种继承方式，不存在性能浪费。

function Parent(name) {
  this.name = name;
  this.arr = ['公众号', '前端路引'];
  this.test = function () {
    console.log('调用父类 test 方法');
  }
}
Parent.prototype.getName = function () {
  console.log(this.name);
}

function Child(name) {
  Parent.call(this, name); // 继承属性（第二次调用）
}
Child.prototype = Object.create(Parent.prototype); // 继承原型
Child.prototype.constructor = Child; // 修复子类的 constructor 引用

const child1 = new Child('前端路引');
// 修改 child1 的实例属性
child1.arr.push(1);
console.log(child1.arr); // ['公众号', '前端路引', 1]
child1.test(); // 输出：调用父类 test 方法

const child2 = new Child('前端路引');
console.log(child2.arr); // ['公众号', '前端路引']
child2.getName(); // 输出：前端路引

寄生组合继承重点就是两句代码：

Child.prototype = Object.create(Parent.prototype); // 继承原型
Child.prototype.constructor = Child; // 修复子类的 constructor 引用

由于 Object.create 会复制父类的 constructor 属性，导致子类的 constructor 属性被重写了，所以需要手动修复。

在 ES6 出现之前，这种继承已经是 JS 面向对象编程中的最优解了。

ES6 class 继承

ES6 出现了 class 类关键字，也多了 extends 继承关键字，可以很方便的实现继承。

但其底层实现逻辑还是 寄生组合继承，相当于是提供了一种语法糖，简化了寄生组合继承中的代码。

class Parent {
  constructor(name) {
    this.name = name;
    this.arr = ['公众号', '前端路引'];
  }
  test () {
    console.log('调用父类 test 方法');
  }
  getName () {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name); // 必须有此行
  }
}

const child1 = new Child('前端路引');
// 修改 child1 的实例属性
child1.arr.push(1);
console.log(child1.arr); // ['公众号', '前端路引', 1]
child1.test(); // 输出：调用父类 test 方法

const child2 = new Child('前端路引');
console.log(child2.arr); // ['公众号', '前端路引']
child2.getName(); // 输出：前端路引

如果没有 super() 这行代码，JS 解析器会报错：

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

意思就是在父类访问 this 之前，子类中必须调用 super() 方法。

原型链查找规则

有了父子两层继承关系，那肯定就有更多层次的继承关系，比如：

class A {}

class B extends A {}

class C extends B {}

在这种多层级的继承关系中，JS 的原型链查找规则永远都是一层一层往上找，终点是找到 Object.prototype 为止，如果还找不到就报错。

比如：

class A {}
class B extends A {}
class C extends B {}

const child = new C();
console.log(child.toString())
console.log(child.test()) // 报错  TypeError: child.test is not a function

以上代码中 A、B、C 都没有 toString 方法，但是实例 child 却可以调用，原因就是 child 的原型链最终找到了 Object.prototype.toString 方法。

而 test 直到 Object.prototype 为止都没找到，所以最终报错。

可以理解其查找规则是这样的：

实例 (obj) --> 构造函数.prototype --> 父构造函数.prototype --> ... --> Object.prototype --> null

写在最后

虽然个人更喜欢 函数式编程 方式，但面向对象这种写法也必须要掌握，要不然看到面向对象的代码，就玩完了~~