• js es6语法 class类 class继承 super关键字


    一, 类的由来

    es6提供了一个新语法就是class

    二, class声明一个类

    // 声明一个类
    class Piont{ // Piont就是一个类  
    
    }
    

    1, 添加属性和方法

    class Piont {
        // 构造函数
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    	// 方法
        run(){
           console.log(1);
        }
    }
    

    2, 使用方式

    var p = new Piont('刘德华',30);
    p.run();
    console.log(p.name);
    

    3, 方法的写入

    run(){
        console.log(1);
    }
    

    对象调用的属性和方法叫做成员属性和方法,有类直接调用的属性和方法叫静态属性和方法

    静态的属性指的是Class本身不是定义在实列对象上的属性

    class Foo {
    
    }
    
    Foo.pop = 1; // 给Foo这个类定义了一个静态属性
    console.log(Foo.pop);
    

    4, 内部添加静态属性

    class Po{
    static myP = 100; // 静态属性
    constructor(){
        console.log(Po.myP);
    }
    }
    
    var p1 = new Po();
    p1.constructor; // 调用
    

    5, 添加静态方法

    class Foo{
        static po = 100; // 
        static classMethod(){
            return 'hello';
        }
    }
    

    6, this和方法重名

    class Foo {
        static bar() {
            this.baz()
        }
        static baz() {
            console.log('hello');
        }
        baz() {
            console.log('world');
        }
    }
    
    Foo.bar();
    var f = new Foo();
    f.baz();
    

    7, 父类的静态方法可以被子类继承

    class Foo {
    static classMethod() {
        return 'hello';
    }
    }
    // 子类继承父类
    class Bar extends Foo { // 子类继承父类
    
    }
    console.log(Bar.classMethod());
    

    8, class继承

    Class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承

    class Point{
    
    }
    // 子类继承父类
    class ColorPoint extends Point{
    
    }
    

    在ColorPoint内加上代码

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
    }
    // 在ColorPoint内加上代码
    class ColorPoint extends Point {
        constructor(x, y, color) {
            //  this.color = color; // 错误
            super(x, y); // 调用父类的constructor(x, y)
            this.color = color; //  正确的
        }
    
        toString() {
            return this.color + ' ' + super.toString;
            toString()
        }
    }
    
    let cp = new ColorPoint(20, 30, 'green');
    
    console.log(cp instanceof ColorPoint);// true
    console.log(cp instanceof Point); //  true 
    
    console.log(cp.x, cp.y, cp.color);
    

    9, super关键字

    既可以当做函数使用,也可以当做对象使用

    当做函数使用的时候,代表的是父类的构造函数,es6要求,子类的构造函数必须执行一些super

    class A{
        constructor(){
            console.log(new.target.name);
        }
    }
    
    class B extends A{
        constructor(){
            super();// 代表的是父类的构造函数 但是返回的是子类的实列,内部的this指向的是子类的实列
            // 相当于
            // A.prototype.constructor.call(this);
        }
    }
    
    console.log(new A()); //A
    console.log(new B()); //B
    

    super作为对象使用,在普通方法中,指向父类的原型对象,在静态方法中,指向的是父类

    class A{
        p(){
            return 2;
        }
    }
    // 继承
    class B extends A {
    
        constructor(){
            super();
            console.log(super.p()); // 2  
        }
    }
    
    let b = new B();
    

    由于super指向父类的原型对象,所以定义在父类实列上的方法或者属性,是无法通过super调用

    class A {
        constructor() {
            this.p = 2;
        }
    }
    // 继承
    class B extends A {
        get m() {
            return super.p;
        }
    }
    
    let b = new B();
    console.log(b.m);
    
  • 相关阅读:
    oracle误操作commit之后,可以闪回数据
    删除表中重复数据,只保留一条数据
    去掉表中字段空的空格或换行符
    oracle主键自增
    List
    Collection Iterator 迭代器
    oracle 处理表的一列
    java swing
    oracle 常用函数大全
    cf 40A
  • 原文地址:https://www.cnblogs.com/bnzw/p/13905137.html
Copyright © 2020-2023  润新知