• ES6学习笔记(五):Class和Module


    Class

    Class

    只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待

    定义:
    constructor代表构造方法,而this指向new 生成的实例
    定义类方法时,可以不使用function

    注意:类的内部所有定义的方法,都是不可枚举的(non-enumerable)。

    //定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    

    使用

    new Point(x,y)
    

    constructor

    类的默认方法,new生成对象实例的时候执行的就是这个方法
    一个类必须有constructor方法
    constructor默认返回实例对象

    Class不存在变量提升

    new Foo(); // ReferenceError
    class Foo {}
    

    Class的继承

    extends关键字

    class ColorPoint extends Point {}
    

    注意:
    1.子类必须调用super,子类本身没有this,super是父类的构造函数,调用super,子类才有this
    这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。

    类的prototype属性和__proto__属性

    1.子类的__proto__指向父类
    2.子类的prototype的__proto__指向父类的.prototype

    class A {
    }
    
    class B extends A {
    }
    
    B.__proto__ === A // true
    B.prototype.__proto__ === A.prototype // true
    

    super关键字
    1.调用super方法时,super代表父类的constructor方法
    2.作为属性super调用时,super代表父类本身

    ES6改变了Object构造函数的行为,一旦发现Object方法不是通过new Object()这种形式调用,ES6规定Object构造函数会忽略参数。

    getter和setter

    Generate方法

    直接在方法属性前加*

    静态方法static

    一个方法前加static,则该方法不会被继承,而是通过类来直接调用
    父类的静态方法,可以被子类继承。
    静态方法也可以从super上调用,因为super指向父类本身

    注意:Class内部只有静态方法,没有静态属性。

    new.target

    (在构造函数中)返回new命令作用于的那个构造函数。

    mixin模式

    ???

    Module

    严格模式

    es6的模块自动使用严格模式

    export

    as

    通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

    function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
    

    export命令必须处于模块顶层。
    export命令规定的是对外的接口。

    import

    import具有变量提升效果,会提升到模块头部执行

    default

    import和export的默认变量名

    es6模块加载与CommonJS

    CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。

    CommonJS一旦输出一个值,模块内部的变化就影响不到这个值。
    ES6模块原始值变了,import输入的值也会跟着变。

  • 相关阅读:
    使用POI读写Word doc文件
    用纯css改变下拉列表select框的默认样式
    深入探究JFreeChart
    arcgis api for javascript中使用proxy.jsp
    【Itext】7步制作Itext5页眉页脚pdf实现第几页共几页
    iText5报表_页眉与页脚
    JFreeChart柱状图单组柱子的不同颜色显示
    如何自定义FusionCharts图表上的工具提示?
    span 文本内容超过宽度自动换行
    JS正则表达式验证账号、手机号、电话和邮箱
  • 原文地址:https://www.cnblogs.com/shuiyi/p/5891176.html
Copyright © 2020-2023  润新知