[JS]類別(class)
文章推薦指數: 80 %
[JS]類別(class) [Class 的基本 ... JavaScript ES6 class 關鍵字 ... 都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
Published
LinkedwithGitHub
Like
Bookmark
Subscribe
---
tags:ES6,Javascript
disqus:hackmd
---
#[JS]類別(class)
[Class的基本语法](https://es6.ruanyifeng.com/#docs/class)
[JavaScriptES6class關鍵字](https://www.fooish.com/javascript/ES6/class.html)
[Classes-MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes)
---
在ES6中,引入了class(類別)這個新的概念透過class這新的關鍵字,可以定義類別。
```javascript=
functionPoint(x,y){
this.x=x;
this.y=y;
}
Point.prototype.toString=function(){
return'('+this.x+','+this.y+')';
};
varp=newPoint(1,2);
p.toString();//"(1,2)"
```
基本上,ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
上面的代碼用ES6的class改寫,就是下面這樣。
```javascript=
classPoint{
constructor(x,y){
this.x=x;
this.y=y;
}
toString(){
return'('+this.x+','+this.y+')';
}
}
varp=newPoint(1,2);
p.toString();//"(1,2)"
```
上面代碼定義了一個“類”,可以看到裡面有一個constructor方法,這就是構造方法,而this關鍵字則代表實例對象。
也就是說,ES5的構造函數Point,對應ES6的Point類的構造方法。
---
`函數宣告(ES5)`和`類別宣告(ES6)`的一個重要差別在於函數宣告是hoisting(提升),類別宣告則不是。
你需要先宣告你的類別,然後存取它,否則像是下面的程式碼就會丟出一個ReferenceError
```javascript=
varp=newPolygon();//undefined
functionPolygon(){
}
```
```javascript=
varp=newPolygon();//ReferenceError
classPolygon{}
```
---
###[constructor](https://hackmd.io/Yq5UUA5IRcigBgB_zUG3xQ?view)
×
Signin
Email
Password
Forgotpassword
or
Byclickingbelow,youagreetoourtermsofservice.
SigninviaFacebook
SigninviaTwitter
SigninviaGitHub
SigninviaDropbox
SigninviaGoogle
NewtoHackMD?Signup
延伸文章資訊
- 1[JS] JavaScript 類別(Class) | PJCHENder 未整理筆記
在ES6 中可使用關鍵字 class 和 constructor(self) : ... 透過class field syntax 的寫法,一樣可以用來建立公開(public)或私有(priva...
- 2ES6 class 關鍵字- JavaScript (JS) 教學Tutorial - Fooish 程式技術
JavaScript ES6 class 關鍵字. 在ES6 中,引入了Class (類別) 這個新的概念(如果寫過C++ 或Java 等傳統語言應該非常熟悉),透過 class 這新的關鍵字,...
- 3[JavaScript] 物件導向寫法的筆記(二) 類似Class 的宣告方式
這裡講的是類似Class 的宣告方式,是因為JavaScript 並沒有真的Class,而是利用function 來宣告和一般的Class 一樣要使用new 來產生一個實體, ...
- 4Classes - JavaScript - MDN Web Docs
ECMAScript 6 中引入了類別(class) 作為JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並不是要引入新的物件導向繼承模型 ...
- 5[ES6 JavaScript] 類別(Class) 與建構式(Constructor) - zwh.zone
之前在學習JavaScript 建構函式 時,常常被所謂的 類別(Class) 與 建構 ... 建構式(Constructor) 的關係,但在 ES6 中,增加了 class 的語法,在寫法 ...