ES6中super的使用

最新推荐文章于 2024-06-28 16:17:04 发布
原创 最新推荐文章于 2024-06-28 16:17:04 发布 · 9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JS #ES6

本文介绍了ES6中super关键字的两种使用方式：作为函数在构造函数中使用及调用父类的方法和属性。文章强调了在构造函数中使用this前必须先调用super的规定，并提到了一个关于设置类属性时的潜在bug。

ES6中super用于类继承，有二种方式：
直接作函数使用，但只能用在构造函数中；
作为父类，可调用父类的方法和属性（包括静态）。

第一种方式有二点要注意，在构造函数中用this之前，必须先使用super。
另一点算是super的BUG吧。当父类和子类都重写了构造函数时，如果在子类构造函数中设置类属性~如：this.prop = [];将会报错。具体见：http://stackoverflow.com/questions/31067368/javascript-es6-class-extend-without-super

ES6关键字“super“的含义和用法
TechChamp的博客
10-04 295
通过 “super” 关键字，子类能够继承父类的属性和方法，并在需要的时候进行扩展和重写。当我们创建一个子类时，通常需要先调用父类的构造函数来初始化父类的属性。在子类的构造函数中，使用 “super” 来调用父类的构造函数，并传递相应的参数。通过 “super.methodName()” 的方式，我们可以在子类中调用父类的方法，并且可以在方法中使用子类的属性。“super” 是JavaScript中的一个关键字，用于引用父类的构造函数或方法。它主要用于在子类中调用父类的构造函数以及访问父类的方法。
深入浅析ES6 Class 中的 super 关键字
08-29
本文给大家收藏整理了ES6 Class 中的 super 关键字，非常不错，具有参考借鉴价值，需要的朋友参考下吧
js中的super
热门推荐
个人前端记录
09-12 1万+
1.this和super的区别： this关键词指向函数所在的当前对象 super指向的是当前对象的原型对象 2.super的简单应用 const person = { name:'jack' } const man = { sayName(){ return super.name; } } Object.setPrototypeOf( m...
浅谈ES6中super关键字
xuxinwen32的博客
02-20 7204
作用： 1 super 关键字用于访问父对象上的函数。 语法： 1 2 super([arguments]); // 访问父对象上的构造函数 super.functionOnParent([arguments]); // 访问对象上的方法 详解： super可以用在类的继承中，或者对象字面量中...
this&super两个关键字的意义和用法
weixin_30621919的博客
12-06 437
"this"，作为一个特殊的关键字，它的规则如下： 1、可以表示构造函数传递。this(a,b)表示调用另外一个构造函数。这里面的this就是一个特殊语法，不是变量，没有什么类型。 2、可以在一个类的非static成员内部使用，表示当前这个对象。此时，this就是一个final的普通变量，它有静态类型，就是这个类C本身；它有动态类型，就是当前这个对象的类型。你可以对它调用成员函数，把它传递给别...
es6 super关键字的理解与应用实例分析
11-21
在子类`B`继承自父类`A`的情况下，如果子类的构造函数中使用`super()`，那么它实际上是在调用父类的构造函数。例如： ```javascript class A { constructor() { console.log(new.target.name); } } class B ...
es6中new.target的作用和使用场景简单示例分析
10-15
在ES6中，`new.target`是一个元属性，它的主要作用是帮助开发者识别函数或类是如何被调用的。这个属性允许我们检测当前构造函数是否是通过`new`关键字来调用的，以及如果是在继承链中，它能提供调用构造函数的实际类...
js super
打杂人
01-20 2724
The super keyword is used to call functions on an object's parent. The super.prop and super[expr] expressions are valid in any method definition in both classes andobject literals. Syntax s
javascript中的super
ioscoder的专栏
12-25 1160
/* Uber – access to the parent from a child object */ function Shape() { } Shape.prototype.name = 'Shape'; Shape.prototype.toString = function() { var uber = this.constructor.uber; return uber
js中super的使用
weixin_43801836的博客
08-12 6924
因为：ES5 的继承的实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。son2.func()出错的原因是，在对象son2，定义的func方法是传统的定义方式，不是es6新定义的方法的简写方式，func（）{}；使用super：super继承，super方法，super对象。...
ES6 的 super 到底是什么？
做一个NB的码农，且不止于码农
05-30 9035
原文地址：https://www.web-tinker.com/article/21291.html 说起 ES6 的继承和 super 的用法大家都不会陌生，可是一问到 super 到底是什么，很多人就支支吾吾。也许在别的编程语言中 super 和 this 一样，都是一个指针，可以像一般变量一样使用。但是在 ES6 中，super 是一个特殊的语法，而且它比 this 还要特殊，有很多用法上的
【JS中super详解】
前端-CV全粘工程师
07-20 2517
在JavaScript中，super可以在类中使用，通过使用super可以访问父类中的属性和方法，也可以在子类的构造函数中调用父类的构造函数。在子类的构造函数中，通过super(name)调用了父类的构造函数，并传入了name参数。super关键字在JavaScript中的主要作用是用来访问父类的属性和方法，以及调用父类的构造函数。在子类中可以使用super来继承父类的属性和方法，并且可以通过super来调用父类的构造函数来实现初始化子类的过程。在子类的构造函数中，可以使用super来调用父类的构造函数。
ES6中super()方法的使用和作用
前端小白的博客
08-05 502
在上面的例子中，我们首先定义了一个Animal类，它有一个构造函数和一个speak方法。然后我们定义了一个speak方法，通过使用super.speak()来调用父类的speak方法，并在子类中添加了一些额外的功能。在子类的构造函数中，我们可以使用super()来调用父类的构造函数，以便可以在子类中访问父类的属性和方法。它必须在子类的构造函数中调用super()，以便可以在子类中访问父类的属性和方法。通过使用super()方法，我们可以在子类中使用父类的属性和方法，从而实现了继承和扩展。
关于 super 关键字
iamxuqianqian的博客
04-01 390
super 这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。 作为函数调用 super 作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super 函数。 class A {} class B extends A { constructor() { super(); } } 上面代码中，子类B的构造函数之中的 super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。 注意，super.
js 中 super 的 用 法
onlybyyourself的博客
06-28 950
在 子 类 中 ， 使 用 super 关 键 字 调 用 父 类 的 方 法 或 属 性 时 ， 可 以 使 用 以 下 两 种 方 式 ： l. 调 用 父 类 的 构 造 函 数 当 子 类 需 要 访 问 父 类 的 构 造 函 数 时 ， 可 以 使 用 s uper 关 键 字 来 调 用 父 类 的 构 造 函 数。在 子 类 的 构 造 函 数 中 ， 调 用 super() 方 法 即 可。/ / 调 用 父 类 的 构 造 函 数。
谈谈JavaScript中super(props)的重要性
明月如霜丶
03-27 1631
我听说 Hooks 最近很火。讽刺的是，我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何？ 本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式，就会发现实际上它们很有趣。 开始第一个。 首先在我的职业生涯中写过的super(props) 自己都记不清： class Checkbox extends React.Component { ...
理解 es6 class 中 constructor 方法 和 super 的作用
丁晓东go
03-10 155
首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + ')'; ...
ES6中的super关键字详解
ES6之super关键字详解
12-31 4336
ES6重新实现了类的继承，而在继承的过程中，super关键字实现了至关重要的作用，可以说理解不了super关键字，也就掌握不了类的继承，今天我们就一起来盘盘super这个关键字 首先抛出一个概念： super这个关键字，既可以当作函数使用，又可以当作对象使用 第一种情况：super作为函数时，代表父类的构造函数 ES6要求，子类的构造函数，必须执行一次super函数 class A {} class B extends A { constructor() { super();//子类.
ES6中的super
最新发布
09-09
ES6（ECMAScript 2015）引入了新的语法特性，其中`super`关键字主要用于构造函数和原型链中的方法调用。以下是`super`的主要用途： 1. **构造函数中的使用**：当你在一个子类的构造函数中需要先调用父类的构造函数时，可以使用`super()`。这是为了初始化父类的属性或执行必要的设置。如果直接在子类构造函数的第一行调用，它会自动调用父类的构造函数。 ```javascript class Parent { constructor(name) { this.name = name; } } class Child extends Parent { constructor(age) { super('Alice'); // 先调用父类构造函数传入 'Alice' this.age = age; } } ``` 2. **访问父类方法和属性**：`super`也可以用于在子类方法中调用父类的方法。例如，在原型链上查找方法： ```javascript class Parent { sayHello() { console.log('Hello from parent'); } } class Child extends Parent { sayHello() { // 覆盖父类方法，但仍可通过 super.call(this) 或 super.sayHello() 访问 super.sayHello(); // 输出 'Hello from parent' } } ``` 3. **避免`this`指向错误**：在子类的构造函数或成员方法中，如果没有明确地使用`this`，`super`可以帮助你准确指向正确的上下文。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值