JavaScript中的 super() 是什么？

最新推荐文章于 2024-05-17 09:10:18 发布
最新推荐文章于 2024-05-17 09:10:18 发布
阅读量493 收藏 2
点赞数 1
文章标签： python java js javascript 编程语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NewTyun/article/details/127781114
版权

cfbd887f183b34e741a7d823b8ddd053.gif

新钛云服已累计为您分享701篇技术干货

8ce6654502e12d0922b0a3936ff932e4.gif

a955b9678bb9ac9dd9858cdf7a50f6f1.jpeg

当你在js代码中看到有调用super()时，会不会好奇这个super()到底有什么作用？在子类中，您可以使用super()调用其父级的构造函数，并使用super.<方法名>来访问其父级的方法。

本文将假定您至少对构造函数以及子类和父类的概念有所了解。如果你不了解这些，则可能需要从Mozilla的Object-oriented JavaScript for beginners开始学习。

super并不是只javascript语言才有--许多其它编程语言，如java, python都有一个super()关键字来提供对父类的引用。与Java和Python不同，JavaScript并不是围绕类继承模型构建的。相反，它扩展了JavaScript的原型继承模型，以提供与类继承一致的行为。

让我们进一步了解它，并查看一些代码示例。

首先，这里引用的一段话Mozilla’s web docs for classes：

 
 
JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.
 
 
一个简单的子类和父类的例子将有助于说明这句话的真正含义:
 
 
 
 
class Fish {
constructo



                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  新钛云服
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
【学习笔记】JavaScript中super

				
			

			

				

					蔡姐的博客
				

				

					06-25
					
					1957
					
				

			

		

		

			
				
最近在开发中见到了super，但是对这块不是很清楚，所以学习了一下，并进行一个小小的总结，方便自己再度加强记忆，也方便小伙伴们一起查询。
因为也是学习过程，如果文中有理解错误的地方，请评论区中指正，十分感谢
1.super的概念
在MDN中对super的定义如下：

super关键字用于访问和调用一个对象的父对象上的函数。
super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的。

其实我理解就是super关键字可以用在类和对象里面，并且可用于访问父类/父对象的构造函数和

			
		

	



                

              
                



	

		

			

				
					
谈谈JavaScript中super(props)的重要性

				
			

			

				

					10-17
				

			

		

		

			
				
在JavaScript中，`super(props)`的重要性在于它是子类继承父类时正确初始化实例的关键。当创建一个类组件（class component）扩展自React的`React.Component`时，`super(props)`的作用在于调用父类（即`React....

			
		

	



                


  
              

                


	

		

			

				
					
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】js 中class的extends、super关键字用法和避坑点_js class extends(5)

					
最新发布

				
			

			

				

					2401_84870916的博客
				

				

					05-17
					
					324
					
				

			

		

		

			
				
在上面的例子中，Student类继承了Person类的构造函数和方法，并且定义了自己的属性和方法。在构造函数中，使用super关键字来调用父类的构造函数，以便初始化父类的属性和方法。上面的必须在this之前。因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。

			
		

	



		

			
		



	

		

			

				
					
【JS中super详解】

				
			

			

				

					前端-CV全粘工程师
				

				

					07-20
					
					1700
					
				

			

		

		

			
				
在JavaScript中，super可以在类中使用，通过使用super可以访问父类中的属性和方法，也可以在子类的构造函数中调用父类的构造函数。在子类的构造函数中，通过super(name)调用了父类的构造函数，并传入了name参数。super关键字在JavaScript中的主要作用是用来访问父类的属性和方法，以及调用父类的构造函数。在子类中可以使用super来继承父类的属性和方法，并且可以通过super来调用父类的构造函数来实现初始化子类的过程。在子类的构造函数中，可以使用super来调用父类的构造函数。

			
		

	





	

		

			

				
					
js中super的使用

				
			

			

				

					weixin_43801836的博客
				

				

					08-12
					
					6661
					
				

			

		

		

			
				
因为：ES5 的继承的实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。son2.func()出错的原因是，在对象son2，定义的func方法是传统的定义方式，不是es6新定义的方法的简写方式，func（）{}；使用super：super继承，super方法，super对象。...

			
		

	





	

		

			

				
					
js中类的继承 - Super()

				
			

			

				

					weixin_46448762的博客
				

				

					02-09
					
					446
					
				

			

		

		

			
				
可以简单的理解为使用super调用继承的父类的构造器函数，给父类的属性赋值，或者调用父类的方法。super关键字一般在类的继承中使用。

			
		

	





	

		

			

				
					
Javascript-Super-Repositorio

				
			

			

				

					05-10
				

			

		

		

			
				
【标题】"Javascript-Super-Repositorio" 是一个专门针对JavaScript技术的综合资源库，它旨在为学习者提供一个全面的JavaScript学习路径。这个资源集合很可能包含了从初级到高级的各种JavaScript概念、技巧和最佳...

			
		

	





	

		

			

				
					
SuperMario:JavaScript Canvas 和 SVG 团队合作

				
			

			

				

					07-06
				

			

		

		

			
				
在本文中，我们将深入探讨"SuperMario:JavaScript Canvas 和 SVG 团队合作"这一主题，这是一个结合了JavaScript技术，特别是Canvas和SVG元素来创建互动游戏的项目。超级马里奥作为经典的游戏，其复刻版的开发对于...

			
		

	





	

		

			

				
					
javascript 中的继承实例详解

				
			

			

				

					10-19
				

			

		

		

			
				
JavaScript中的继承是面向对象编程中的核心概念，它允许一个对象（子对象）继承另一个对象（父对象或基对象）的属性和方法。在JavaScript中，主要有三种常见的继承方式：原型链继承、借用构造函数（也称为经典继承）...

			
		

	





	

		

			

				
					
【JavaScript】学习笔记之es6中super( )

				
			

			

				

					lizhengxv的博客
				

				

					11-07
					
					332
					
				

			

		

		

			
				
为什么一定要在constructor中调用super
如果一个子类通过extends关键字继承了父类，那么在子类的constructor构造函数中，必须优先调用一下super()，这是一种约定俗成的做法。
super是一个函数，指向父类的构造函数，也可以理解为，子类中的super其实就是父类中 constructor 构造函数的一个引用

...

			
		

	





	

		

			

				
					
JavaScript中类的继承（ES6、class、extends、super）

				
			

			

				

					01-08
				

			

		

		

			
				
Class 可以通过extends关键字实现继承 这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。如下：
class Test{}
class ColorTest extends Test{}

       上面代码定义了一个ColorTest类，该类通过extends关键字，继承了Test类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Test类。下面，我们在ColorTest内部加上代码：
class ColorTest extends Test {
  constructor(x, y, color) {
    super(x, y); /

			
		

	





	

		

			

				
					
JS中ES6语法的super到底是什么？

				
			

			

				

					weixin_45757499的博客
				

				

					05-09
					
					944
					
				

			

		

		

			
				
ES6 中的继承和 super 的用法大家都不会陌生，可是一问到 super 到底是什么，估计很对人都会回答不上来。在 ES6 中，super 是一个特殊的语法，而且它比 this 还要特殊，有很多用法上的限制。
super类似于ES5语法中的call继承
class A{
    constructor(n){
        console.log(n); //=>100;
        this.x = 100;
    }
    getX(){
        console.log(th

			
		

	





	

		

			

				
					
js super

				
			

			

				

					打杂人
				

				

					01-20
					
					2529
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
JS11day(类constructor构造函数，super继承，面向对象Tab栏JS代码)

				
			

			

				

					shrimper
				

				

					07-15
					
					254
					
				

			

		

		

			
				
注意子类在构造函数中使用super,必须放到this前面(必须先调用父类的构造方法,再使用子类构造方法)命令生成对象实例时，自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个。用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过。（类命名首字母大写,驼峰式命名.如CatRun）注意类必须使用new实例化对象。注意方法之间不能加逗号分隔。......

			
		

	





	

		

			

				
					
JavaScript super关键字

				
			

			

				

					weixin_49087505的博客
				

				

					12-04
					
					740
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
学习《你不知道的JavaScript》遇到的问题：Uncaught SyntaxError: ‘super‘ keyword unexpected here

				
			

			

				

					buchiyudegarcat的博客
				

				

					11-16
					
					988
					
				

			

		

		

			
				
学习《你不知道的JavaScript》遇到的问题：Uncaught SyntaxError: 'super' keyword unexpected here

			
		

	





	

		

			

				
					
【ES6】js 中class的extends、super关键字用法和避坑点

				
			

			

				

					qq_22744093的博客
				

				

					09-04
					
					2078
					
				

			

		

		

			
				
在JavaScript中，使用class关键字可以实现面向对象编程。其中，extends和super是两个非常重要的关键字，它们分别用于实现类的继承和调用父类的方法。

			
		

	





	

		

			

				
					
JAVASCRIPT 中的super方法

				
			

			

				

					05-21
				

			

		

		

			
				
在 JavaScript 中，`super` 方法是用于调用父类方法的关键字。它可以在子类中使用，以便调用父类的构造函数、静态方法和原型方法。使用 `super` 方法可以避免在子类中重复编写父类的代码。

在 ES6 中，使用 `super` 方法要注意以下几点：

1. 在子类的构造函数中，必须先调用 `super()` 方法，以便完成父类的初始化。
2. 在子类的原型方法中，可以使用 `super` 关键字调用父类的同名方法。
3. 在子类的静态方法中，也可以使用 `super` 关键字调用父类的同名静态方法。

下面是一个简单的示例，演示了如何在子类中使用 `super` 方法：

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类的构造函数
  }
  
  speak() {
    super.speak(); // 调用父类的同名方法
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // 输出 "Mitzie makes a noise." 和 "Mitzie barks."
```

在上面的示例中，`Dog` 类继承自 `Animal` 类。在 `Dog` 类的构造函数中，我们使用 `super(name)` 调用了父类的构造函数，并传入了一个参数。在 `Dog` 类的 `speak` 方法中，我们使用 `super.speak()` 调用了父类的同名方法，并在其后面添加了自己的逻辑。最终，我们创建了一个 `Dog` 对象 `d`，并调用了它的 `speak` 方法，输出了两行信息。第一行信息是来自父类的，第二行信息是来自子类的。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值