JavaScript中super的功能介紹

本篇內容主要講解“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的功能介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！