ES6中class方法及super关键字

更新日期: 2022-07-21阅读: 979标签: super
记录下class中的原型,实例,super之间的关系
//父类
class Dad {
    constructor(x, y) {
        this.x = 5;
        this.y = 1;
        this.state = 789
    }

    static x = 521

    state1 = 666

    say() {
        console.log("父类bark");
    }
    talk = () => {
        console.log("父类talk");
    }

    static speak() {
        console.log("父类speak");
        console.log(this.state);
    }
    speak(){
        console.log("父类不会speak");
    }
}
//子类
class Child extends Dad {
    constructor() {
        super()
        this.x = 987
        this.toString = this.toString.bind(this)
    }

    state = {}

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }

    say = () => {
        super.say();
        console.log("子类bark");
        console.log(super.x);
    }

    talk = () => {
        super.talk()
        console.log("子类talk");
    }

    static speak() {
        super.speak()
        console.log("子类speak");
        console.log(super.x);
    }

}

console.log(new Child().x); // 输出987
console.log(new Child().y); // 输出1

new Child().say(); // 输出 父类bark  子类bark undefined
new Child().talk(); // 报错 super.talk is not a function

Child.speak(); // 父类speak undefined 子类speak 521

1、构造器中的this指向实例对象,在构造函数上定义的属性和方法相当于定义在类实例上的,而不是原型对象上

2、toString方法是挂载到原型上的,toString1是挂载到每个实例上的

3、this.toString.bind(this),前面的this是不确定的,取决于调用方式;后面的this指实例对象,这行代码目的是为了固定toString方法的this为实例对象,避免函数赋值给变量时this丢失

4、super关键字用于访问和调用一个对象的父对象上的函数

5、super作为函数使用,调用的是父类的构造函数,而其中的this指向子类自己(用父类的方法操作自己的东西)

6、super 作为对象时,在普通方法中,指向父类的原型对象(只能访问原型上的函数,无法访问属性);在静态方法中,指向父类本身(调用的是父类的静态方法或属性),但是this指向子类。

本文作者:lupulus
本文链接:https://www.cnblogs.com/yuyunhao/archive/2022/07/21/16502033.html

链接: https://fly63.com/article/detial/11926

ES6 类继承 和 super的使用

ES6中继承的子类中,如果使用构造函数constructor()那么就必须使用 super()方法初始化,这样下面才可以调用this关键字。super()只能用在子类的构造函数之中,用在其他地方就会报错。

谈谈super(props) 的重要性

我听说 Hooks 最近很火。讽刺的是,我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何?本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式,就会发现实际上它们很有趣。

js中的super的使用

super()相当于Parent.prototype.constructor.call(this)ES5的继承,实质上是先创造子类的实例对象this,然后再将父类的方法添加到this上(Parent.call(this)). ES6的继承

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

在ES6版本之前,JavaScript语言并没有传统面向对象语言的class写法,ES6发布之后,Babel迅速跟进,广大开发者也很快喜欢上ES6带来的新的编程体验。当然,在这门“混乱”而又精妙的语言中,许多每天出现我们视野中的东西却常常被我们忽略。

为什么我们要写 super(props) ?

据说 Hooks 势头正盛,不过我还是想略带调侃地从 class 的有趣之处开始这篇博客。可还行?这些梗对于使用 React 输出产品并不重要

jses6语法:class类 class继承 super关键字

Class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承,super关键字既可以当做函数使用,也可以当做对象使用,当做函数使用的时候,代表的是父类的构造函数

es6中class类、super和estends关键词

JavaScript 语言在ES6中引入了 class 这一个关键字,在学习面试的中,经常会遇到面试官问到谈一下你对 ES6 中class的认识,同时我们的代码中如何去使用这个关键字,使用这个关键字需要注意什么,这篇来总结一下相关知识点。

面试官:this和super有什么区别?this能调用到父类吗?

this 和 super 都是 Java 中的关键字,都起指代作用,当显示使用它们时,都需要将它们放在方法的首行(否则编译器会报错)。this 表示当前对象,super 用来指代父类对象

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!