react中constructor( )和super( )详解

前言

如果大家经常使用 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;}//创建新的子类p1let 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;}}//创建新的子类p1let person1 = new Person('小明',18);

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

原型链

这个图咋一看有点复杂，如果看不懂，贴心的我还有一遍关于原型链的教程，先看这个 => 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 进行处理，如果能成功的话，那只能说明隔壁老王有问题。

经典的报错例子：

    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 关键字，否则会报错。

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

react中constructor( )和super( )详解相关推荐

25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
react中副作用函数(useEffect)详解
先简单说一下常见的useEffect使用方式三种 useEffect(() => {// 副作用函数的内容 }) 每次更新之后都要执行 -------------------- useEffe ...
Java中super详解
目录 Java中super详解 super的作用: 1. 通过super可以访问父类的构造方法 2. 通过super可以访问父类的属性(非私有) 3. 通过super可以访问 ...
React Native - Keyboard API使用详解（监听处理键盘事件）
参考: React Native - Keyboard API使用详解(监听处理键盘事件) 当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入. 但有时我们想在键盘弹出时对页面布局做个调整, ...
php中继承中的概念,JavaScript_JavaScript中的继承方式详解，js继承的概念 js里常用的如下 - phpStudy...
JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...
React学习二（组件详解）
文章目录一.React数据流二.组件的特性 1.属性(props) (1)React Props默认值与标签属性限制 (2)应用-React组件切分与提取 2.状态(state) (1)state ...
Java中的static关键字详解
** Java中的static关键字详解 ** 在一个类中定义一个方法为static,即静态的,那就是说无需本类的对象就可以调用此方法.调用一个静态方法就是 "类名.方法名" ,静 ...
java多线程中的join方法详解
java多线程中的join方法详解方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. 自从接触Java多线程,一直对Join理解不了.JDK是这样说的:join p ...
Python 在子类中调用父类方法详解（单继承、多层继承、多重继承）
Python 在子类中调用父类方法详解(单继承.多层继承.多重继承) by:授客 QQ:1033553122 测试环境: win7 64位 Python版本:Python 3.3.5 代码实践 ...

react中constructor( )和super( )详解

react中constructor( )和super( )详解相关推荐

最新文章

热门文章