class是es6新特性。在ES6中,class(類別)作為物件的模板被引入,可以透過class關鍵字定義類別;新的class寫法讓物件原型的寫法更加清晰、更像物件導向程式設計的語法,也更加通俗易懂。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ES6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和建構函數的概念,讓物件原型的寫法更加清晰、
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
class是es6新特性。在ES6中,class (類別)作為物件的模板被引入,可以透過 class 關鍵字定義類別。
ES6 提供了更接近傳統語言的寫法,新引入的class關鍵字具有正式定義類別的能力。類別(class)是ECMAScript中新的基礎語法糖結構,雖然ECMAScript 6類別表面上看起來可以支援正式的物件導向編程,但實際上它背後使用的仍然是原型和構造函數的概念,讓物件原型的寫法更加清晰、更像物件導向程式設計的語法。
一、class簡介
傳統的JS只有物件的概念,沒有class類別的概念,因為JS是基於原型的物件導向語言,原型物件特點就是將屬性全部共享給新物件。
ES6引入了class類這個概念,透過class關鍵字可以定義類,這就是更符合我們平常所理解的物件導向的語言。
class Person{ //定义一个名为Person的类 // 构造函数,用来接受参数 constructor(x,y){ this.x = x; //this代表的是实例对象 this.y = y; } todoSome(){ //这是个类的方法,不需要加function,有多个方法也不用逗号隔开 alert(this.x + "的年龄是" +this.y+"岁"); } } export default Person;
二、靜態方法和靜態屬性
靜態方法和靜態屬性,是使用static關鍵字的屬性和方法
2.1 靜態方法
static classMethod(){ console.log('123456') }
- #靜態方法不會被子類別繼承,子類別不能呼叫
- 靜態方法中的this,指向的是類別class,不是類別的實例。因此靜態方法只能透過類別名稱來呼叫,不能透過實例來呼叫
let p = new Point(); p.classMethod(); // 报错
2.2 靜態屬性
static prop = 1 ; // 静态属性
- 靜態屬性不能被子類別繼承,子類別不能呼叫
- 靜態屬性只能透過類別名稱來調用,不能透過類別的實例來調
三、class繼承extends
- class可以用過extends關鍵字來繼承
- ES6繼承,子類別建構子必須使用super()。因為ES6繼承是先將父類別實例物件的屬性和方法,加到this上面,然後再呼叫子類別的建構子修改這個this
- 如果子類別沒有定義constructor方法,super()會默認新增上
- 子類別會繼承父類別的方法和屬性,但是靜態方法和屬性必須透過子類別的類別名稱來呼叫
import classtest from "./classtest"; //先引入父类 class Man extends classtest{ constructor(x,y){ //构造函数尽量与父类参数保持一致 super(); //利用super()关键字,这个必须放在子类构造函数中的第一位置 this.x = x; this.y = y; } } export default Man;
四、class的取值函數getter和存值函數setter
getter、setter就是給class的屬性讀值、傳值用的。
取值函數getter和存值函數setter可自訂賦值和取值行為,當一個屬性只有getter沒有setter的時候,這個屬性就是只讀屬性,不能賦值,第一次初始化也不行。
如果變數定義為私有的(定義在類別的花括號外面),就可以只使用getter不使用setter。
let data=[1,2,3,4]; //放在类外面,属于私有变量,可以只读取 class Person{ // 构造函数 constructor(x,y){ this.x = x; this.y = y; } get x(){ console.log('获得name'); return this._name; //get读取属性 } set x(x){ console.log("设置name"); this._name=x; //set给属性赋值 } get data(){ return data; //只读属性,属性返回的值只能是私有变量 } todoSome(){ alert(this.x + "的年龄是" +this.y+"岁"); } static dayin(){ alert("dayin"); } } export default Person;
如何使用:
var test= new this.$myutils.classtest('haha','18'); test.x="haha3"; //改变了实例化时候的x的值 test.todoSome(); //输出:haha3的年龄是18岁。这里就已经不是实例化时候的haha了 console.log(test.data); //结果:打印[1,2,3,4]
五、注意事項:
1、在類別中定義方法時候,不可以給方法加上function關鍵字,因為JS中建構子是用function定義的,兩個隔開。
2、所有方法不要用逗號隔開,否則會報錯。
【推薦學習:javascript進階教學】
#以上是class是es5還是es6的詳細內容。更多資訊請關注PHP中文網其他相關文章!

React是前端框架,用於構建用戶界面;後端框架用於構建服務器端應用程序。 React提供組件化和高效的UI更新,後端框架提供完整的後端服務解決方案。選擇技術棧時需考慮項目需求、團隊技能和可擴展性。

HTML和React的關係是前端開發的核心,它們共同構建現代Web應用的用戶界面。 1)HTML定義內容結構和語義,React通過組件化構建動態界面。 2)React組件使用JSX語法嵌入HTML,實現智能渲染。 3)組件生命週期管理HTML渲染,根據狀態和屬性動態更新。 4)使用組件優化HTML結構,提高可維護性。 5)性能優化包括避免不必要渲染,使用key屬性,保持組件單一職責。

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件,函數組件更簡潔,類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法,提高性能。 4)狀態管理使用useState或this.state,生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態,高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題,調試技巧包括使用ReactDevTools和優

React是一個用於構建用戶界面的JavaScript庫,其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染,優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件,高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當,可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting,保持代碼可讀性和可維護性是最佳實踐。

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

React組件可以通過函數或類定義,封裝UI邏輯並通過props接受輸入數據。 1)定義組件:使用函數或類,返回React元素。 2)渲染組件:React調用render方法或執行函數組件。 3)復用組件:通過props傳遞數據,構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯,提升開發效率和代碼可維護性。

React嚴格模式是一種開發工具,可通過激活其他檢查和警告來突出反應應用中的潛在問題。它有助於識別遺產代碼,不安全的生命週期和副作用,鼓勵現代反應實踐。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

禪工作室 13.0.1
強大的PHP整合開發環境

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Dreamweaver CS6
視覺化網頁開發工具