• ECMAScript6 入门 Class 的基本语法与继承


    Class语法
    
    1:类的定义
    class Point {
      m; //也可以定义在顶部    
      constructor(x, y) {
        //定义类的属性可以在  constructor 函数当中使用this
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    
    注意:定义类的方法的时候,前面不需要加function关键字,方法之间也不需要加逗号分隔
    
    2:类的数据类型是函数,类本身指向构造函数
    使用的时候,也是直接对类使用new命令,类的所有方法都定义在类的prototype属性上面
    
    3:一次性添加多个方法
    class Point {
      constructor(){
        // ...
      }
    }
    
    Object.assign(Point.prototype, {
      toString(){},
      toValue(){}
    });
    
    注意:类的内部定义的方法,都是不可枚举的
    
    4:取值函数(getter)和存值函数(setter)
    在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为
    class MyClass {
      constructor() {
        // ...
      }
      get prop() {
        return 'getter';
      }
      set prop(value) {
        console.log('setter: '+value);
      }
    }
    
    let inst = new MyClass();
    
    inst.prop = 123;
    // setter: 123
    
    inst.prop
    // 'getter'
    
    5:类的属性名可以采用表达式
    let methodName = 'getArea';
    
    class Square {
      constructor(length) {
        // ...
      }
    
      [methodName]() {
        // ...
      }
    }
    
    6:类也可以采用表达式的形式定义
    const MyClass = class Me {
      getClassName() {
        return Me.name;
      }
    };
    
    注意:需要注意的是,这个类的名字是Me,但是Me只在 Class 的内部可用,指代当前类。在 Class 外部,这个类只能用MyClass引用
    
    7:注意点
    {
        1:类的内部默认使用严格模式
        2:类不存在变量提升
        3:ES6的类只是ES5的构造函数的包装,所以函数的许多特性都会被继承,包括name属性
        4:如果某个方法之前加上星号(*),就表示该方法是一个 Generator 函数
        5:类的方法内部如果含有this,它默认指向类的实例
    }
    
    8:静态方法
    类相当于实例的原型,所有在类中定义的方法,都会被实例继承。
    如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,
    而是直接通过类来调用,这就称为“静态方法”。
    
    静态方法当中的this指向类,而不是实例
    
    class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    
    Foo.classMethod() // 'hello'
    
    var foo = new Foo();
    foo.classMethod()
    // TypeError: foo.classMethod is not a function
    
    9:静态属性
    class Foo {
    }
    
    Foo.prop = 1;
    Foo.prop // 1
    
    这个属性实例不会继承
    目前,只有 这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性
    
    提案:写法是在实例属性的前面,加上static关键字
    
    10:私有方法和属性
    待续...
    Class的继承
    
    1:子类可以通过extends关键字实现继承
    
    2:子类必须在constructor方法中调用super方法,否则新建实例时会报错 
    //如果子类显示定义了constructor,那么第一行必须是调用super方法,继承父类的实例
    
    3:继承的区别
    ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。
    ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),
    然后再用子类的构造函数修改this。
    
    4:Object.getPrototypeOf()
    功能:用来从子类上获取父类
    因此,也可以通过这个方法判断,一个类是否继承另一个类
    
    5:super
    {
        1:作为函数时,只能在子类的构造函数当中使用,且必须执行一次
        2:作为对象时,在普通方法中,指向父类的原型对象,在静态方法中,指向父类
    }
    不忘初心,不负梦想
  • 相关阅读:
    【C#】Color颜色对照表
    eslint的实践
    关于babel和webpack结合使用的实践
    前端学习博客
    css学习4--网格布局
    css学习3--flexbox布局
    CSS学习2-布局介绍
    css学习1
    前端性能优化
    line-height介绍
  • 原文地址:https://www.cnblogs.com/panrui1994/p/11639759.html
Copyright © 2020-2023  润新知