您好,登录后才能下订单哦!
本篇内容主要讲解“JavaScript中super的功能介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中super的功能介绍”吧!
首先在我的职业生涯中写过的super(props)
自己都记不清:
class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isOn: true }; } // ... }
当然,在类字段提案 (class fields proposal) 中建议让我们跳过这个开头:
class Checkbox extends React.Component { state = { isOn: true }; // ... }
在2015年 React 0.13 增加对普通类的支持时,曾经打算用这样的语法。定义constructor
和调用super(props)
始终是一个临时的解决方案,可能要等到类字段能够提供在工程学上不那么反人类的替代方案。
不过还是让我们回到前面这个例子,这次只用ES2015的特性:
class Checkbox extends React.Component { constructor(props) { super(props); this.state = { isOn: true }; } // ... }
为什么我们要调用super
? 可以调用它吗? 如果必须要调用,不传递prop
参数会发生什么? 还有其他参数吗? 接下来我们试一试:
在 JavaScript 中,super
指的是父类的构造函数。(在我们的示例中,它指向React.Component
的实现。)
重要的是,在调用父类构造函数之前,你不能在构造函数中使用this
。 JavaScript 是不会让你这样做的:
class Checkbox extends React.Component { constructor(props) { // 这里还不能用 `this` super(props); // 现在可以用了 this.state = { isOn: true }; } // ... }
为什么 JavaScript 在使用this
之前要先强制执行父构造函数,有一个很好的理由能够解释。 先看下面这个类的结构:
class Person { constructor(name) { this.name = name; } } class PolitePerson extends Person { constructor(name) { this.greetColleagues(); //这行代码是无效的,后面告诉你为什么 super(name); } greetColleagues() { alert('Good morning folks!'); } }
如果允许在调用super
之前使用this
的话。一段时间后,我们可能会修改greetColleagues
,并在提示消息中添加Person
的name
:
greetColleagues() { alert('Good morning folks!'); alert('My name is ' + this.name + ', nice to meet you!'); }
但是我们忘记了super()
在设置this.name
之前先调用了this.greetColleagues()
。 所以此时this.name
还没有定义! 如你所见,像这样的代码很难想到问题出在哪里。
为了避免这类陷阱,JavaScript 强制要求:如果想在构造函数中使用this
,你必须首先调用super
。 先让父类做完自己的事! 这种限制同样也适用于被定义为类的 React 组件:
constructor(props) { super(props); // 在这里可以用 `this` this.state = { isOn: true }; }
这里又给我们留下了另一个问题:为什么要传props
参数?
你可能认为将props
传给super
是必要的,这可以使React.Component
的构造函数可以初始化this.props
:
// Inside React class Component { constructor(props) { this.props = props; // ... } }
这与正确答案很接近了 —— 实际上它就是这么做的。
但是不知道为什么,即便是你调用super
时没有传递props
参数,仍然可以在render
和其他方法中访问this.props
。 (不信你可以亲自去试试!)
这是究竟是为什么呢? 事实证明,在调用构造函数后,React也会在实例上分配props
:
// Inside React const instance = new YourComponent(props); instance.props = props;
因此,即使你忘记将props
传给super()
,React 仍然会在之后设置它们。 这是有原因的。
当 React 添加对类的支持时,它不仅仅增加了对 ES6 类的支持。它的目标是尽可能广泛的支持类抽象。 目前还不清楚 ClojureScript、CoffeeScript、ES6、Fable、Scala.js、TypeScript或其他解决方案是如何相对成功地定义组件的。 所以 React 故意不关心是否需要调用super()
—— 即使是ES6类。
那么这是不是就意味着你可以写super()
而不是super(props)
呢?
可能不行,因为它仍然是令人困惑的。 当然,React 稍后会在你的构造函数运行后分配this.props
, 但是在调用super()
之后和构造函数结束前这段区间内this.props
仍然是未定义的:
// Inside React class Component { constructor(props) { this.props = props; // ... } } // Inside your code class Button extends React.Component { constructor(props) { super(); //我们忘记了传递 props 参数 console.log(props); // {} console.log(this.props); // undefined } // ... }
如果这种情况发生在从构造函数调用的某个方法中,可能会给调试工作带来很大的麻烦。 这就是为什么我建议总是调用super(props)
,即使在没有必要的情况之下:
class Button extends React.Component { constructor(props) { super(props); // 传递了 props 参数 console.log(props); // {} console.log(this.props); // {} } // ... }
这样就确保了能够在构造函数退出之前设置好this.props
。
最后一点是长期以来 React 用户总是感到好奇的。
你可能已经注意到,当你在类中使用Context API时(无论是旧版的contextTypes
或在 React 16.6中新添加的 contextType
API),context
会作为第二个参数传递给构造函数。
那么为什么我们不写成super(props, context)
呢? 我们可以这样做,但是使用context
的频率较低,所以这个坑并没有那么多影响。
根据类字段提案的说明,这些坑大部分都会消失。 如果没有显式构造函数,则会自动传递所有参数。 这允许在像state = {}
这样的表达式中包含对this.props
或this.context
的引用(如果有必要的话)。
而有了 Hooks 之后,我们甚至不再有super
或this
。不过这是另外一个的话题了。
到此,相信大家对“JavaScript中super的功能介绍”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。