zoukankan      html  css  js  c++  java
  • 深入ES6中的class类

    今天在学习vuex时,遇到了定义store类时的一种写法,就是在类中的方法使用箭头函数绑定this的问题时的一种操作,感觉写法有点陌生,遂深究一番,好了上代码

     此处写commit中的地方,是为了绑定this指向Store类的实例对象,所以使用了箭头函数,当然也可以使用bind进行绑定,今天就来说说ES6中class类的实质

    第一、首先要明白,ES6的class只是一个语法糖,class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已,其实还是使用ES5的构造函数来实现的。

    如下是ES5的写法:

     如下是ES6的写法:

     总结:可以看到类里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5的构造函数Point,对应ES6的Point类的构造方法;ES5的构造函数原型prototype上的方法对应ES6的 class类里面写的函数,即ES6的各种现象都可以使用ES5进行解释。

    第二、让我们来注意一点,就是网络上所有的教程,包括阮一峰老师的教程中都提到了一点就是,ES6的类中的定义方法的时候,前面不需要加function关键字,另外方法直接不能加逗号分隔,加了会报错;然而教程里只说了不能写,没有说为什么不能写逗号,为什么写了会报错,现在让我们一探究竟,教程截图为证:

     当然,后面也有一句话就是“上面代码表明,类的数据类型就是函数,类本身就指向构造函数”。但没有进一步说明,这样前面的提示就会误导新手们,会误以为类带了个大括号,就像写对象属性一样,这种错误的想法;

    回到上面箭头函数的写法上,因为是类中的方法都会被加到类的原型上,所以,箭头函数赋值的那个变量名commit也就加在了类的prototype属性上面,他通过赋值那就是这个箭头函数了,即:

    Store.prototype.commit= ()=>{ }

    类里面是写语句的,所以不能写逗号,但可以写分号的,因为里面的一个方法就是一个语句;

    但是class中的constructor是不能使用函数赋值的写法的,否则会报错

    分析:class类里面,使用赋值=写的方法应该是写到了class的实例上(这是运行时绑定),而省略function和赋值=直接写的方法应该是是加到了class的原型对象上

    因为class实例是没有constructor的,所以不允许在class类中使用赋值操作写constructor,如下调试

    以下是这两种写法的babel编译的代码

     

    因为class里面的constructor才是实例的构造函数,写在constructor外部的是绑定在构造函数原型上的。

  • 相关阅读:
    HDU--1212大数取模
    欧拉函数
    自制体重转换器
    常用快捷键
    Markdown基本语法
    python全栈开发day50-jquery之ajax、XmlHttpRquest
    python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
    阳历转阴历算法
    python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
    python全栈开发day47-jqurey
  • 原文地址:https://www.cnblogs.com/gopark/p/11776221.html
Copyright © 2011-2022 走看看