面试题super和super(prophotoshop)的区别

1.基本概念

constructor( )

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

super( )

class sub extends sup {
   constructor(name, age) {
     this.age = age;
     super(name); // super代表的事父类的构造函数
   }
 }

在class方法中，继承是使用 extends 关键字来实现的。子类在 constructor函数中调用 super( )方法，否则新建实例时会报错。

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

2.Es5-----Es6关于继承的实现不同之处

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

你肯定也疑惑，ES5中的new到底做了什么？

当一个构造函数前加上new的时候，主要是四件事：
1.生成一个空的对象并将其作为 this；
2.将空对象的 __proto__ 指向构造函数的 prototype；
3.运行该构造函数；
4.返回临时对象，如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。

简单解释，就是在ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上（ Parent.apply(this) ）。而ES6采用的是先创建父类的实例this（故要先调用 super( )方法），完后再用子类的构造函数修改this。

3.super(props)与super()区别

如果在类组件中，使用到constructor构造函数，就必须调用super(),主要是用来初始化this的，可以绑定事件到this上;

如果你在constructor中要使用this.props,就必须给super加参数：super(props)；

（无论有没有使用constructor函数，在render函数中this.props仍然可以使用，这是React内部实现的；）

如果没用到constructor,这个函数可以不写；React会默认添加一个空的constructor。

    class Button extends React.Component {
      constructor(props) {
        super(); // 没传入 props
        console.log(this.props); // undefined
        // ...
      }
    }

    class Button extends React.Component {
      constructor(props) {
        super(props); // 传入 props
        console.log(this.props); // {}
        this.props.name = 'hahaha' // 可以添加自定义的props的属性
        // ...
      }
    }

4. 用es6的class（类）的方法创建组件：

需要使用super()继承父类的属性，同时创建this(子类本身没有this);

想要使用和继承父组件的props属性，则需要调用 super(props)，这能够确保在constructor函数执行完之前就已经给props赋值。

如果不定义props的属性，只定义状态this.state ,就可以直接super();

所以super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义其他的属性了，然而其他的父组件的内部属性由于没有传参就直接赋值为undefind，这个也是为什么初次调用super（）内部的属性都为undefined的原因；

由于state下面没有属性，所以如果只是定义state就可以直接super（）就行了

这篇好文章是转载于：学新通技术网