• 技术文章 >web前端 >前端问答

    es6中super的用法是什么

    长期闲置长期闲置2022-05-05 18:40:49原创164

    super的用法:1、super作为函数时,用于表示父类的构造函数,语法为“constructor(){super();}”;2、super作为对象时,在普通方法中用于指向父类的原型对象,在静态方法中用于指向父类。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    es6中super的用法是什么

    第一种情况:super作为函数时,代表父类的构造函数

    ES6要求,子类的构造函数,必须执行一次super函数

    class A {}
    class B extends A {
      constructor() {
        super();//子类的构造函数,必须执行一次super函数,代表父类的构造函数
      }
    }

    注意:虽然super代表父类的构造函数,但此时返回的时B的实例,即super内部的this指的是B的实例,因此super()相当于 A.prototype.constructor.call(this)

    class A {
      constructor() {
        console.log(new.target.name);
      }
    }
    class B extends A {
      constructor() {
        super();
      }
    }
    new A() // A
    new B() // B

    上述代码中,new.target指向当前正在执行的函数,super()执行的时候,它指向的是子类B的构造函数,而不是父类A的构造函数,也就是说,super()内部的this指向B

    super作为函数使用时,必须出现在子类的构造函数constructor中,否则会报错

    class A {}
    class B extends A {
      m() {
        super(); // 报错
      }
    }

    第二种情况:super作为对象时,在普通方法中,指向父类的原型对象,在静态方法中,指向父类

    class A {
      p() {
        return 2;
      }
    }
    class B extends A {
      constructor() {
        super();//父类的构造函数
        console.log(super.p()); // 2
      }
    }
    let b = new B();

    上面代码中,super作为函数时,代表父类的构造方法,作为对象时,指向父类的原型对象,即A.prototype,所以super.p()相当于A.prototype.p()

    这里还需要注意,由于 super指向父类的原型,所以在父类实例上的属性或者方法,并不能通过super调用

    class A {
      constructor() {
        this.p = 2;
      }
    }
    class B extends A {
      get m() {
        return super.p;
      }
    }
    let b = new B();
    b.m // undefined

    上面代码中,p是父类A实例的属性,super.p 就引用不到它

    如果属性是定义在父类的原型上,则使用super就可以访问

    class A {}
    A.prototype.x = 2;
    class B extends A {
      constructor() {
        super();
        console.log(super.x) // 2
      }
    }
    let b = new B();

    上面代码中,属性x是定义在父类的原型对象上,所以可以使用super.x来访问

    【相关推荐:javascript视频教程web前端

    以上就是es6中super的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:foreach是es6里的吗 下一篇:es6数组合并方法有哪些
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• es6 filter方法的参数有哪些• 什么是es6中的构造函数• es6中find和filter有什么区别• es6怎么判断是否是数组• es6数组怎么去除特定的数
    1/1

    PHP中文网