react中constructor( )和super( )详解

电玩女神 2022-11-16 01:38 269阅读 0赞

> **前言**

如果大家经常使用 react() 做项目，像constructor( )与super( )肯定是司空见惯了，哪哪都有，但是很多人都是复制粘贴一把梭，并不知道这是干啥的与底层原理。

实际上这不是 react() 的专属玩意，而是JS自带的，原型链相关的知识，今天来把它撸一撸。

> **constructor( )**

这是ES6对类(Class)的默认方法，一般用于数据初始化，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加。

ES5中，JavaScript是没有继承的写法的，因此，通过使用prototype来达到此目的。

//构造函数
     function Person (name,age){
          this.name = name;
          this.age = age;
      }
       Person.prototype.getAge= function(){
           return '俺的年龄是：'+this.age;
       }
    
        //创建新的子类p1
        let person1 = new Person('小明',18);
    
    
        // console.log(person1.constructor) 指向Person 如下
        ƒ Person (name,age){
           this.name = name;
           this.age = age;
        }

ES6的实现：

class Person {
          //构造方法constructor就等于上面的构造函数Person 
          constructor(name,age){
                this.name = name;
                this.age = age;
            }
    
            getAge(){
                return '俺的年龄是：'+this.age;
            }
        }
        //创建新的子类p1
        let person1 = new Person('小明',18);

这两个例子效果是一毛一样的，只是写法不同

> **原型链**

![e12a4169b8d6398721719a5db9923518.png][]

这个图咋一看有点复杂，如果看不懂，贴心的我还有一遍关于原型链的教程，先看这个 => [JS原型链详解][JS]

如果你看懂了，那么将会get到这项技能：构造方法constructor() = 构造函数本身 (上面我也进行了打印，你应该懂的)

> **super()**

super() = 继承，这玩意就是用来继承的，继承它的父级

在class方法中，继承是使用 extends 关键字来实现的

class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            getAge(){
                return '我的年龄是：'+ this.age;
            }
        }
    
        class demo extends Person{
            constructor(name,age,sex){
                super(name,age);   // 调用父类的constructor(name,age)
                this.sex = sex;
            }
            fn(){
                return this.sex + ' ' + super.getAge();    // 调用父类的getAge() 
            }
        }

上面的例子中，有super()，子类必须在constructor() 中调用 super() ，否则新建实例时会报错。不然就继承不了父类的香火了，刚刚说了这玩意是用来继承的。

报错的原因是：子类没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而 super() 就是将父类中的 this 对象继承给子类的。

没有继承，子类就得不到 this 对象，没有 this 对象而要对 this 进行处理，如果能成功的话，那只能说明隔壁老王有问题。

![969a6cb5d4aa594193382b56e26a8c8f.png][]

经典的报错例子：

class parent{}
    
        class son extends parent{
            constructor(){
                    
            }
        }
    
        let son= new parent();  // ReferenceError报错

出现上面情况的总原因是，ES5的继承机制与ES6完全不同。

> **ES5中的new是干嘛的？**

1. 生成一个空的对象（在内存中）  
2. 原型的执行，确定对象o的原型链，将空对象的\_proto\_指向构造函数的 prototype  
3. 改变this指向  
4. 如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。

ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上（Parent.call(this)）

而ES6采用的是先创建父类的实例 this（故要先调用super()），完后再用子类的构造函数修改this

> **FAQ**

*  子类如果没有 constructor()，该方法会被默认添加，即任何的子类都有 constructor()，无论定义没定义，它就在那里，不离不弃。
 *  在子类的构造函数 constructor() 中，只有调用 super() 方法之后，才可以使用 this 关键字，否则会报错。

![2b1f5ec16ceeeb4daf3269ee4ab18ad2.png][]

代码写完了，顺便送个女朋友。不得关注、点赞转发一波？

[e12a4169b8d6398721719a5db9923518.png]: /images/20221022/adc2378937dc4d5d8212e00c262f3d12.png
[JS]: https://blog.csdn.net/qq_35942348/article/details/105774243?spm=1001.2014.3001.5501
[969a6cb5d4aa594193382b56e26a8c8f.png]: /images/20221022/a96486b24f4843569e9f35ec0c21d04a.png
[2b1f5ec16ceeeb4daf3269ee4ab18ad2.png]: /images/20221022/5be2770b49914437b60d8138bccecbd0.png