浅谈ES6中class语法糖中super关键字

作用:
  • super 关键字用于访问父对象上的函数。
语法:
  • super([arguments]); // 访问父对象上的构造函数
  • super.functionOnParent([arguments]); // 访问父对象上的方法
详解:
  • super可以用在类的继承中,或者对象字面量中,super指代了整个prototype或者proto指向的对象
  1. 类(prototype相关)

a. 用在子类constructor函数中

class Person {
    constructor(name) {
        this.name = name;
    }
}
class Student extends Person {
    constructor(name, age) {
        super(); // 用在构造函数中,必须在使用this之前调用
        this.age = age;
    }
}

super()调用会生成一个空对象,作为context来调用父类的constructor,返回this对象,作为子类constructor的context继续调用构造函数。
context:执行上下文 constructor:构造函数

b. 调用父类的静态函数

class Human {
    constructor() {}
    static ping() {
        return 'ping';
    }
}

class Computer extends Human {
    constructor() {}
    static pingpong() {
        return super.ping() + ' pong';
    } // 只有在子类的静态函数中才能调用父类的静态函数(babel环境测试,按理说,在实例函数中应该也可以调用,不过实际测试环境中报错)
}
Computer.pingpong(); // 'ping pong'
  1. 对象的字面量(proto项目)
var obj1 = {
    method1() {
        console.log("method 1");
    }
}

var obj2 = {
    method2() {
        super.method1();
    }
}
// 必须利用setPrototypeOf将第二个对象的原型设为第一个对象
Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"

转载至:https://www.cnblogs.com/liutie1030/p/5997446.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 9,539评论 3 11
  • 2016.9.9 第6章 原型与面向对象 原型虽然是定义对象的一种很方便的方式,但它的本质依然是函数特性。 使用原...
    如201608阅读 3,938评论 0 0
  • 原文:http://dmitrysoshnikov.com/ecmascript/javascript-the-c...
    jaysoul阅读 3,332评论 0 0
  • 两个似乎永远没有交集的平行线,不知什么时候两条平行线开始相互靠拢,大概是你的颦蹙一笑,我的小心一跳,然后合集成...
    墨染阑珊阅读 2,854评论 0 1
  • 今天是我23岁的生日,昨天晚上梦见了前任,一个晚上一直是他的身影。 有的事我就是杞人忧天,我愿把一切实际化,所以后怕,
    天然美阅读 1,222评论 0 0