javascript 类的封装和类的继承及原型和原型链详解

本文主要讲ES5、ES6中类的定义、封装和类的继承，以及一些注意事项，文中除了参考引用一些资料外，也加入了很多自己的理解，如有错误，欢迎读者纠正。

javascript 类的定义

ES5 中的类

在 ES5 中，其实是没有类的概念的，原因是因为 js 的作者当初在设计这门语言的时候认为，一旦像 C++和 Java 一样引入了类，js 就是一种完整的面向对象编程语言了，这好像有点太正式了，而其增加了初学者的入门难度。他当时认为，没必要将 js 设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。因此，有了一些模拟定义类的方法出现。

构造函数法

这个方法相信稍微有些 js 基础的人都能知道。

function People(name) {
  this.name = name
}
var jack = new People('jack')
People.prototype.constructor === People // true
jack.constructor === People // true
jack.__proto__ === People.prototype // true

但是这种方法的 protype 上的属性只能在外面定义，不够语义化，也挺麻烦。

People.prototype.species = 'human'

Object.create()法

为了解决上述的缺点，ES5 有了 Object.create()的方法来直接传入 prototype。

var People={
  species='human'
}
var jack=Object.create(People)
jack.name='jack'

显而易见，这种方法的问题是定义实例属性比较麻烦，而且也不能实现私有属性和私有方法。

极简主义法

这种方法用一个对象模拟类，在对象里定义一个函数 createNew()模拟构造函数的功能，来生成实例。

var Creature = {
  blood: 'red', //瞎写的，有些生物的血不是红色的:)
}
var People = {
  species: 'human',
  createNew: function(name) {
    var people = {}
    people.name = name
    return people
  },
}

这个方法可以既可以有私有属性和方法，而且也能比较语义化的定义实例的各种属性。但是这个方法有一个缺点，那就是在继承的时候没有用到 prototype 的概念，也就是没有用到 js 自己的原型链的概念。会让人觉得不够直观。

总而言之，ES5 没有类，哪怕是模拟实现了类，也不够完美。

ES6 中的类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//定义类
let methodName = 'getArea'
class Foo {
  constructor(x, y) {
    this.x = x
    this.y = y
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')'
  }
  [methodName]() {
    return 'area_' + this.x + '_' + this.y
  }
}
let foo = foo('a', 'b') //报错
let foo = new Foo('a', 'b')
typeof Foo // 'function'
Foo === Foo.prototype.constructor // true
foo.__proto__ === Foo.prototype // true
foo.toString === Foo.prototype.toString //true

可以看到，类的所有方法都定义在类的 prototype 属性上面。在类的实例上面调用方法，其实就是调用原型上的方法。类的属性名，可以采用表达式。类的内部所有定义的方法，都是不可枚举的（non-enumerable）。这一点与 ES5 的行为不一致。类必须使用 new 调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用 new 也可以执行。类不存在变量提升（hoist），这一点与 ES5 完全不同。

new.targer 属性

new 是从构造函数生成实例对象的命令。ES6 为 new 命令引入了一个 new.target 属性，该属性一般用在构造函数之中，返回 new 命令作用于的那个构造函数。如果构造函数不是通过 new 命令调用的，new.target 会返回 undefined，因此这个属性可以用来确定构造函数是怎么调用的。

function Person(name) {
  if (new.target !== undefined) {
    this.name = name
  } else {
    throw new Error('必须使用 new 命令生成实例')
  }
}

// 另一种写法
function Person(name) {
  if (new.target === Person) {
    this.name = name
  } else {
    throw new Error('必须使用 new 命令生成实例')
  }
}

var person = new Person('张三') // 正确
var notAPerson = Person.call(person, '张三') // 报错

javascript 类的继承

ES5 中类的继承

构造函数绑定

使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

function Animal() {
  this.species = 'animal'
}
function Cat(name, color) {
  Animal.apply(this, arguments)
  this.name = name
  this.color = color
}

var cat1 = new Cat('miao', 'black')

alert(cat1.species) // 动物

这样能够达到继承的目的，但是问题是，它会为所有的 Cat 实例都创建一个自己的 species 属性，这样会浪费内存，显然是不太优雅的做法

继承 prototype

第三种方法是对第二种方法的改进。由于 Animal 对象中，不变的属性都可以直接写入 Animal.prototype。所以，我们也可以让 Cat()跳过 Animal()，直接继承 Animal.prototype。

function Animal() {}
Animal.prototype.species = 'animal'
Cat.prototype = Animal.prototype
// 因为Cat的prototype直接指向了Animal的prototype,因此它的constructor属性也发生了变化，需要手动纠正Cat的构造函数
console.log(Cat.prototype.constructor === Animal) // true
Cat.prototype.constructor = Cat
console.log(Animal.prototype.constructor === Cat) // true
var cat1 = new Cat('miao', 'black')

alert(cat1.species) // animal

这里出现了一个问题，由于是直接赋值的，所以 Cat 的 prototype 和 Animal 的 prototype 指向了同一个对象，在修改 Cat 的 prototype.constructor 的时候，Animal.prototype.constructor 也随之被更改。因此可以采用一个中间量过渡。

var F = function() {}
F.prototype = Animal.prototype
Cat.prototype = new F()
Cat.prototype.constructor = Cat
console.log(Cat.prototype === Animal.prototype) // false

这样，就能解决上述问题了。

ES6 中类的继承

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class Foo {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  static hello(){
    console.log('hello world')
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')'
  }
}
class ChildFoo extends Foo {
  constructor(x, y, z) {
    this.z=z //报错
    super(x, y); // 调用父类的constructor(x, y)
    this.z = z;
  }

  toString() {
    return this.z + ' ' + super.toString(); // 调用父类的toString()
  }
}
console.log(ChildFoo.hello===ChildFoo.__proto__.hello) // true
console.log(ChildFoo.hello===Foo.hello) // true

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。此时子类调用this对象，就会报错。
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
最后，父类的静态方法，也会被子类继承。

javascript 原型和原型链，以及prototype和proto

什么是原型？
每个javascript对象都有一个私有属性,称之为Prototype(注意这里只是一个称谓，非一个属性)，翻译过来就是原型，它被现今大多数浏览器实现为proto属性。这个proto属性，指向对象的类（构造函数）的prototype属性，这个属性也被称之为原型对象(注意和前面的原型不是一个概念)。每一个对象(null除外)在创建的时候就会从原型"继承"它所有的属性。
上述用代码表示就是：

function Person(name) {
  this.name=name
}
let person = new Person();

// 实例化之后的对象，这个对象的原型指向它的类的原型对象
console.log(person.__proto__===Person.prototype) // true

什么是原型链？
JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
上述用代码表示就是：

function Creature(){}
Creature.prototype.blood='red'
function Person(name) {
  this.name=name
}

// 将Person作为Creature的子类
Person.prototype=new Creature()

let person = new Person();

// 注意，下面是两段伪代码，实际运行后不会得到true，原因很简单，本文就不讨论了，请自行思考 :)

// 沿着等号往后走，这就是一条原型链。
console.log(person.blood===person.__proto__.blood=== Person.prototype.blood===Person.prototype.__proto__.blood===Creature.prototype.blood) // true

// 这是一个在原型链上没有找到指定属性的例子，原型链会一直延伸到最末端
console.log(person.tail===person.__proto__.tail=== Person.prototype.tail===Person.prototype.__proto__.tail===Creature.prototype.tail===Creature.prototype.__proto__.tail===Object.prototype.tail===undefined)

代码中可以看到，当访问person对象的blood属性的时候，显然本地是没有这个属性的，那么就会去寻找它的原型(即proto，也即Person.prototype)是否有这个属性，结果它的原型也没有这个属性。它的原型Person.prototype本身同样也是一个对象，那么它也有自己的原型，此时它会在自己的原型上继续寻找这个属性，也就是Person.prototype.__proto__,而Person.prototype.__proto__指向的是Creature.prototype，在Creature.prototype上找到了blood这个属性，原型链结束。

有关 prototype 的方法

使用proto是有争议的，官方也不鼓励使用它。因为它从来没有被包括在EcmaScript语言规范中，但是现代浏览器都实现了它。
不过proto属性已在ECMAScript 6语言规范中标准化，用于确保Web浏览器的兼容性，因此它未来将被支持。
但是官方依然不推荐使用它，而是推出了一系列的有关原型的方法。

Object.getPrototypeOf(object)

此方法放回给定对象的原型，注意这里的原型是指proto，而非prototype属性。

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

Object.setPrototypeOf(obj,prototype)

此方法可以重新设置一个对象的原型，同样，这里的原型依然指的是proto，其实就基本等同于Object.create()方法。

var proto={}
var obj={}
Object.setPrototypeOf(obj,proto)
obj.__proto__===proto

prototypeObj.prototype.isPrototypeOf(object)

此方法用来检查一个对象是否是另一个对象的原型，可以理解为等同于

prototypeObj.prototype===object.__proto__

私有方法/属性、静态方法/属性、公共方法/属性、实例方法/属性

经常会听到体积一些私有属性公有属性，静态属性静态方法之类的词汇，趁此机会，也对这些概念做一个系统的梳理。

私有方法/属性

指在类的内部运算使用的方法和属性，而其他人无论是通过这个类还是通过这个类的实例都无法访问。
其实很好理解为什么ES6的类没有私有属性和私有方法，因为它没有目前提供这个语法。
给一个变量赋值，无非两种方法，一种是等号，一种是声明式的，而ES6的类内部的语法很有限，并不能通过任何方法来进行一个变量赋值，等号的话不能识别，而直接声明的函数又会被解析为公有方法。
所以那些模拟的私有方法和属性也就容易理解了，其实就是要达到在类的内部能够全局使用，而脱离了这个类就无法访问的目的。

静态方法/属性

是指这个类自己的属性和方法，不会被继承，而是通过类本身来调用。比如Creature这个类，那么他的静态方法可以通过Creature.someProperty这样的方式访问到

公共方法/属性

其实就可以简单的理解为原型对象(prototype)上的方法和属性，所有的实例化的对象都是能继承到的和共享的。

实例方法/属性

就是constructor函数里this后面的一些赋值的方法和属性，是没有实例自己私有的。

参考文档：

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
http://es6.ruanyifeng.com/#docs/class
http://es6.ruanyifeng.com/#docs/class-extends
https://developer.mozilla.org/zh-cn/docs/web/javascript/reference/global_objects/object
https://stackoverflow.com/questions/41189190/how-and-why-would-i-write-a-class-that-extends-null
https://github.com/mqyqingfeng/Blog/issues/2
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

libin1991 / libin_Blog