首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ES6之类class的原理解析

在上一节的内容中讲解了在ES6中的类的用法,在ES6中新增的class关键字和extends可以成功实现类的继承

在这里有一点补充,实际上类和构造函数是有一点不同的

类调用必须使用new关键字

super()函数的使用

在子类的constructor函数实际上指向的是父类的constructor函数,因为在子类的constructor内部的this指向的是子类实例本身,需要super去改变this指向,可以调用super()方法传递参数,动态获得父类的继承

static关键字定义静态方法

有时候我们不想让对象获取类上的某个方法,指向让这个方法通过类本身调用,这个时候我们就需要使用static关键字来定义方法

分析class的原理

使用babel,我们首先将ES6的语法转变成ES5看一下

先看一个最简单的语法

接下来为这个类添加一些属性

我们为这个类添加了私有属性,共有方法和静态方法

看一下转译之后的结果

分析一下上面的源码,_createClass方法在babel写的不太便于阅读,我们拿到vscode里分析一下其内部构造

看一下实际调用过程

这就是类的创建过程

接下来看一下继承

我们同样还是借助babel来转译成ES5的源码

我们先来看一个子类不带构造函数的

转译之后的源码

在之前的基础上又多了两个方法

我们主要关注继承的方法,将源码拿到vscode中解析一下

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180407G0RF8R00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券