ES6 中的Class中的关键字super

Raaabbit 发布于2019-08-22 16:32 / 680人阅读

摘要：在类的继承中，有两个用法作为函数使用，如上边的例子中的作为对象使用，如把作为函数使用在类的继承中，子类如果显式的声明了构造函数，则必须首先调用，不然会找不到。此时代表父类的构造函数。如果在继承中子类压根不写构造函数呢不过不写，相当于也写了。

复习一下ES6 中的关于类的语法 定义一个类

</>复制代码 
class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}

相当于下面ES5的这样的写法

</>复制代码 
function Animal(){
   this.type = "animal";
}
Animal.prototype.speak = function(){
   console.log(this.type);
}

类的继承

</>复制代码 
class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}
class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
}

相当于下面ES5的写法

</>复制代码 
function Animal(){
   this.type = "animal";
}
Animal.prototype.speak = function(){
   console.log(this.type);
}
function Cat(){
  Animal.call(this);
  this.type = "animal";
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;//因为上一步造成constructor为Animal
//或者可以把上边的两行改成下面这样的写法
Cat.prototype = Object.create(Animal.prototype, {
  constructor: Cat,
});

super登场

从上边的例子可能已经领略了super的一些用法了。但是还不全面。super在类的继承中，有两个用法

作为函数使用，如上边的例子中的super()

作为对象使用，如super.type

1. 把super作为函数使用

在类的继承中，子类如果显式的声明了构造函数，则必须首先调用super，不然会找不到this。此时super代表父类的构造函数。这时在构造函数里调用super（），相当于 parentConstructor.call(this). 还是以上边的实际例子为例。

</>复制代码 
class Cat extends Animal {
    constructor(){
        super();   // 相当于  Animal.call(this)
        this.type = "cat"
    }
}

现在再解释一个疑问。如果在继承中子类压根不写构造函数呢？不过不写，相当于也写了。只是构造函数用的是父类的构造函数

</>复制代码 
class Cat extends Animal {
}
// 相当于
class Cat extends Animal {
    constructor(...args){
             super(...args);
    }
}

2.把super作为对象使用

super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

在普通方法中，指向父类的原型对象，下面举例

</>复制代码 
class Animal {
    constructor(){
        this.type = "animal";
    }
}
Animal.prototype.type ="type on propotype"
class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
               console.log(super.type)
    }
}
new Cat();  // 此处打印出来的是type on propotype，而不是animal

在静态方法中指向父类

</>复制代码 
class Animal {
  static type = "this is static type";
    constructor(){
        this.type = "animal";
    }
}
Animal.prototype.type ="type on propotype"
class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
  static miao(){
    console.log(super.type);  // 这里输出的是this is static type，而不是animal或者type on propotype
  }
}
Cat.miao()

GPU云服务器云服务器 es6中的class es6中的promise cdn加速中的关键技术,cdn技术详细解剖, es6class

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94443.html

ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论0 收藏0
ES6—class与面向对象编程（8）

摘要：接下来我们看下类的写法，这个就很接近于传统面向对象语言了。如果你想了解传统面向对象语言，这里是一个好切入点。作为对象时，指向父类的原型对象。这些就是为将来在中支持面向对象的类机制而预留的。在ES5中，我们经常使用方法或者对象去模拟类的使用，并基于原型实现继承，虽然可以实现功能，但是代码并不优雅，很多人还是倾向于用 class 来组织代码，很多类库、框架创造了自己的 API 来实现 c...

wangjuntytl 2019-08-26 18:27 评论0 收藏0
由一篇ES6继承文章引发对于super关键字的思考

摘要：举个栗子中一段简单的继承代码实现使用了，不会报错这段代码非常简单，在子类中使用了关键字，编译时不会报错，也可以正常执行。参考资料从中的讲原型链与继承的静态属性和实例属性问题引入最近一直在看原型继承相关的东西，翻到这么一篇文章：从ES6中的extends讲js原型链与继承文中有一个点让我很感兴趣，箭头函数在继承过程中无法通过super关键字获取，这是为什么呢？前置知识 MDN上...

mudiyouyou 2019-08-23 11:30 评论0 收藏0
ES6 中Class创建对象与继承实现

摘要：使用类创建实例对象也是直接对类使用命令，跟中构造函数的用法一致。中没有构造函数，作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含...

zhou_you 2019-08-20 14:40 评论0 收藏0
ES6 中Class创建对象与继承实现

摘要：使用类创建实例对象也是直接对类使用命令，跟中构造函数的用法一致。中没有构造函数，作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含...

wind5o 2019-08-01 16:25 评论0 收藏0