从babel实现es6类的继承来深入理解js的原型及继承

先聊个5毛钱的背景吧

自从有了babel这一个利器之后，es6现在已经被广泛的使用。JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。也就是说babel无论是实现类，还是实现继承，本质上都是基于原型及原型链的，那我我们就顺这这个思路，一步一步往下走，直到揭开babel是如何实现类及类的继承的。

原型和原型链

javascript中原型的概念比较抽象，不是很好理解，我们还是老老实实上代码，用代码来举例说明。

function Person (name, age, job) {this.name = name;this.age = age;this.job = job; } let p1 = new Person('张三', 18, '前端攻城狮') 复制代码

我们创建了一个Person的构造函数，并用new 创建了一个该对象的实例对象p1。

• 在js中，每一个函数都有一个prototype属性。
• 每一个js对象（除null）外都有一个__proto__的属性。 那么问题来啦，函数Person的prototype的属性指向的是什么呢？是不是Person的原型呢？我们在chrome中输入如下代码
  我们发现Person.prototype指向一个对象，实际上这个对象就是p1的原型。如图： 因此，我们也可以用下面的这个图来表示他们之间的关系
• 前面我们说过，Person.prototype指向一个对象，那么这个对象中都有什么呢？我们再在chrome中输入如下代码如图： 我们发现Person.prototype的确是一个对象，这个对象里面有两个属性:constrcutor, 和__proto__这两个属性。constructor指向Person()，也说明js对象果真都有一个__proto__的属性啊。那问题来啦constructor到底和Person是什么关系呢？实际上，constructor属性指向的就是构造函数本身。有图有真相

我们再来总结一下吧：

• 每个原型上都有一个constructor的属性指向关联的构造函数。他们的关系如下： 前面我们发现Person.prototype也有__proto__属性，那Person.prototype.__proto__是什么呢？换言之，原型的原型是什么呢。先来一张图 我们发现它只有constructor属性，该属性指向Object(),没有__proto__属性。是不是很有意思。那我们再做个实验吧。如图

通过这张图我们发现

• 原型对象就是通过Object构造函数生成的，实例的__proto__指向构造函数的prototype,Object构造函数的原型的__proto__指向null
• 我们用一张图总结一下吧： 实际上这个就是原型链啦。

ES5中的继承

前面我们聊了聊原型和原型链，其实就是为了我们聊继承做铺垫的。废话不多说，我们上代码吧：

// 我们定义一个动物类，里面有一个类型的属性 function Animal (type) {this.type = type } // 动物都有吃东西的方法 Animal.prototype.eat = function () {console.log('我在吃东西') } // 我们来个小猫咪类吧 function Cat () {} // 现在我们要实现让Cat继承Animal的属性和方法,该怎么做呢？ 复制代码

• 第一种方法

// 我们将cat类的原型直接指向Animal的实例 Cat.prototype = new Animal() let cat = new Cat() console.log(cat.eat()) 复制代码

结果如图

我们发现无法继承父类的属性。我们改造一下，借助call方法，代码入下：

function Animal (type) {this.type = type } Animal.prototype.eat = function () {console.log('我在吃东西') } function Cat (type) {Animal.call(this, type) } Cat.prototype = new Animal() let cat = new Cat('喵咪') console.log(cat.eat()) console.log(cat.type) 复制代码

运行结果如下：

nice!!!似乎完美的解决了问题，但真的是这样么？ 我就不卖关子啦，实际上是有问题的，有什么问题呢？我们上代码：

function Animal (type, val) {this.type = typethis.sum = [4,5,6] // 随便给的属性啊，为了说明问题。this.setSum = function () {this.sum.push(val)} } Animal.prototype.eat = function () {console.log('我在吃东西') } function Cat (type, val) {Animal.call(this, type, val) } Cat.prototype = new Animal() let cat = new Cat('喵咪', 1) let cat2 = new Cat('猫咪2', 2) console.log(cat.setSum()) console.log(cat2.setSum()) console.log(cat.sum) console.log(cat2.sum) 复制代码

运行结果如图：

发现了没有，图中setSum方法和sum属性都是父类定义的，但是子类可以调用。所以这个不是我们想要的结果；还有一点就是Cat的constructor属性，此时指向的并不是Cat而是Animal。那应该怎么解决呢？

• 第二种方法： 这个时候我们就不得不拿出我们的终极神器啦。它就是ES5的Object.create()方法。代码如下：

function inherit(C, P) {// 等同于临时构造函数C.prototype = Object.create(P.prototype);C.prototype.constructor = C; // 修复constructorC.super = P;//存储超类 } function Animal(type) {this.type = type; } Animal.prototype.eat = function () {console.log('动物都是要吃饭滴') } function Cat(type, talk) {Cat.super.call(this, type)this.talk = talkthis.getTalk = function () {return this.talk} } inherit(Cat, Animal) let cat = new Cat('猫咪', '我们一起学猫叫') console.log(cat.getTalk()) 复制代码

代码运行如下：

这样我们就比较完美的解决了继承的问题。

babel对es6类的实现

在背景中我们已经聊到了es6中类的继承实际上是一个语法糖，现在我们就想办法拨开这颗糖。

• es6类重写上面代码

class Animal {constructor (type) {this.type = type}eat () {console.log('动物都要吃饭')} }class Cat extends Animal {constructor (type,talk) {super(type) // 继承父类constructor的属性this.talk = talk}getTalk () {return this.talk} } let cat = new Cat('喵咪', '喵喵喵') console.log(cat.getTalk()) // 喵喵喵 console.log(cat.type) // 喵咪 复制代码

• babel中类的实现
  babel中类的实现主要是三个步骤：
  • 步骤一： 构造函数的实现,这部分的实现与我们普通的构造函数的区别就是，通过一个自执行函数包裹，代码如下 var Animal = function () {function Animal (type) {this.type = typethis.getType = function () {return this.type}}return Animal }()var Cat = function () {function Cat (talk) {this.talk = talkthis.getTalk = function () {return this.talk}}return Cat}() 复制代码
  • 步骤二: 如下代码： function Animal() {return {name: '牛逼',age: 18}}let animal = new Animal() console.log(animal) // { name: '牛逼', age: 18} 复制代码因此babel中对此做了校验，这就是第二步要干的事情。代码如下： var _classCallCheck = function (instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("不能返回一个对象")}}// 嗯，你没有看错就是这么几行代码var Animal = function () {function Animal (type) {_classCallCheck(this, Animal)this.type = type}}()...此处省略喵咪类 复制代码
  • 步骤三: 原型上方法的添加。前面两步主要是对构造函数的实现及校验，步骤三就是把原型上的方法添加到对应的类上。这里我们主要要聊聊babel是如何对 es6中类的方法的处理，也就是 class Animal {eat () {console.log('aaa')}sleep () {console.log('bbb')}} 复制代码如上面代码中的eat方法和sleep方法的处理。那怎么能把方法添加到一个对象上呢？没错，Object.defineProperty()这个方法就是用来干这件事情的，babel中也是用他来处理的。回到我们的话题，在babel中，它是通过_createClass这个函数来处理的。废话不多说我们上代码: /* _createClass()这个函数接受两个参数，一个是这个类的构造函数，即给哪个类添加方法。第二个参数是一个数组对象，类似这样婶的[{key: 'eat', val: function eat () { console.log('aaa') }}] 是不是恍然大悟？那接下来我们就实现一下吧*/function definePropties (target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ('value' in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor)}}var _createClass = function () {return function (Constructor, protoProps, staticProps) {// 添加原型上的方法if (protoProps) definePropties(Constructor.prototype, protoProps)// 添加静态的方法if (staticProps) definePropties(Constructor, staticProps) return Constructor}}()_createClass(Animal,[{key: 'eat',value: function () {console.log('aaa')}}]) 复制代码
  到这里babel实现类就基本上实现啦。上面代码可以多看，多思考，还是挺收益的。

babel中继承的实现

接下来，终于到了我们的大boss啦，上面我们聊了聊babel中是怎么处理es6中类的，这节我们就聊聊babel中是怎么处理es6中的继承。

• babel中继承的实现 babel中继承的实现的思路基本跟我们前面聊的es5的继承思路基本一致。下面我们来聊一聊。

function _inherits(subClass, superClass) {subClass.prototype = Object.create(superClass.prototype, {constructor: {value: subClass,enumerable: false,writable: true,configurable: true;}})if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 复制代码

好啦，这个话题就聊到这里，欢迎大家拍砖啊。

总结

以上是生活随笔为你收集整理的从babel实现es6类的继承来深入理解js的原型及继承的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。