React和JavaScript 類的示例

了解React和JavaScript 類的示例？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

 我在給別人介紹 React 的過程中得出這樣的一個(gè)結(jié)論：React 完全是關(guān)于 JavaScript 的。而且，有很多材料是關(guān)于 JavaScript 而不是 React。

其中大部分是 JavaScript ES6 及其特性和語法，還包括三元運(yùn)算符、簡化的語法、this 對象、JavaScript 內(nèi)置函數(shù)（map、reduce、filter）或更一般的概念，如可組合性、可重用性、不變性或高階函數(shù)。在剛開始接觸 React 之前，你可能不需要掌握這些基礎(chǔ)知識，但在學(xué)習(xí)或?qū)嵺`過程中肯定需要用到它們。

React 和 JavaScript 類

關(guān)于 React 類組件，需要用到有關(guān) JavaScript 類的先驗(yàn)知識。JavaScript 類的概念相對較新。之前，只有 JavaScript 的原型鏈可用于實(shí)現(xiàn)繼承。JavaScript 類以原型繼承為基礎(chǔ)，讓繼承體系變得更簡單。

定義 React 組件的一種方法是使用 JavaScript 類。

class Developer {
 constructor(firstname, lastname) {
   this.firstname = firstname;
   this.lastname = lastname;
 }
 getName() {
   return this.firstname + ' ' + this.lastname;
 }
}
var me = new Developer('Robin', 'Wieruch');
console.log(me.getName());

一個(gè)類描述了一個(gè)實(shí)體，用于創(chuàng)建實(shí)體的實(shí)例。在使用 new 語句創(chuàng)建類的實(shí)例時(shí)，會調(diào)用這個(gè)類的構(gòu)造函數(shù)。類的屬性通常位于構(gòu)造函數(shù)中。此外，類方法（例如 getName()）用于讀?。ɑ?qū)懭耄?shí)例的數(shù)據(jù)。類的實(shí)例在類中使用 this 對象來表示，但在外部，僅指定給 JavaScript 變量。

在面向?qū)ο缶幊讨校愅ǔＳ脕韺?shí)現(xiàn)繼承。在 JavaScript 中也一樣，extends 語句可用于讓一個(gè)類繼承另一個(gè)類。一個(gè)子類通過 extends 語句繼承了一個(gè)父類的所有功能，還可以添加自己的功能。

class Developer {
 constructor(firstname, lastname) {
   this.firstname = firstname;
   this.lastname = lastname;
 }
 getName() {
   return this.firstname + ' ' + this.lastname;
 }
}
class ReactDeveloper extends Developer {
 getJob() {
   return 'React Developer';
 }
}
var me = new ReactDeveloper('Robin', 'Wieruch');
console.log(me.getName());
console.log(me.getJob());

感謝各位的閱讀！看完上述內(nèi)容，你們對React和JavaScript 類的示例大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。