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中类的继承（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中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对象。...

			
		

	





	

		

			

				
					
【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

					
热门推荐

				
			

			

				

					个人前端记录
				

				

					09-12
					
					1万+
					
				

			

		

		

			
				
1.this和super的区别：


this关键词指向函数所在的当前对象
super指向的是当前对象的原型对象




2.super的简单应用

const person = {
    name:'jack'
}

const man = {
    sayName(){
        return super.name;
    }
}

Object.setPrototypeOf( m...

			
		

	





	

		

			

				
					
js中类的继承 - Super()

				
			

			

				

					weixin_46448762的博客
				

				

					02-09
					
					446
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					10-17
				

			

		

		

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

			
		

	





	

		

			

				
					
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》遇到的问题：Uncaught SyntaxError: ‘super‘ keyword unexpected here

				
			

			

				

					buchiyudegarcat的博客
				

				

					11-16
					
					988
					
				

			

		

		

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

			
		

	





	

		

			

				
					
this&super两个关键字的意义和用法

				
			

			

				

					weixin_30621919的博客
				

				

					12-06
					
					367
					
				

			

		

		

			
				
"this"，作为一个特殊的关键字，它的规则如下：
1、可以表示构造函数传递。this(a,b)表示调用另外一个构造函数。这里面的this就是一个特殊语法，不是变量，没有什么类型。
2、可以在一个类的非static成员内部使用，表示当前这个对象。此时，this就是一个final的普通变量，它有静态类型，就是这个类C本身；它有动态类型，就是当前这个对象的类型。你可以对它调用成员函数，把它传递给别...

			
		

	





	

		

			

				
					
ES6中的super关键字

				
			

			

				

					qs8lk88的博客
				

				

					01-10
					
					4838
					
				

			

		

		

			
				
在JavaScript中，this关键字总是指向函数所在的当前对象，ES6中增加了一个与this对应的super关键字，指向的是当前对象（this指向的对象）的原型对象。

const demo1 = {
   prop1  : '属性1'
};

const demo2 = {
    find(){
       //返回demo2 的原型对象的foo属性
       return su

			
		

	





	

		

			

				
					
js多层继承 super方法

				
			

			

				

					小图的专栏
				

				

					07-26
					
					5048
					
				

			

		

		

			
				
继承的时候我们需要调用父类的同名方法，这里面提供了一个简单的实现方式，供大家一起参考。
_gs_super 方法是扩展与最顶层父类的原型链上。
   RootView.prototype._gs_super = function() {
        var caller = arguments.callee.caller;
        var scope = null;
       

			
		

	





	

		

			

				
					
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的使用方法

				
			

			

				

					weixin_53667605的博客
				

				

					12-16
					
					1288
					
				

			

		

		

			
				
class Father {

      constructor(x, y) {

        this.x = x;

        this.y = y;

      }

      sum() {

        console.log(this.x + this.y);



      }

    }

    // 子类中显式定义constructor

 ...

			
		

	





	

		

			

				
					
JAVASCRIPT 中的super方法

				
			

			

				

					05-21
				

			

		

		

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

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值