[JS]類別(class) - constructor、extends、super、static - HackMD

[JS]類別(class) - constructor、extends、super、static、Getter & Setter. JavaScript | ES6 中最容易誤會的語法糖Class - 基本用法       Published LinkedwithGitHub Like1 Bookmark Subscribe --- tags:ES6,Javascript disqus:hackmd --- #[JS]類別(class)-constructor、extends、super、static、Getter&Setter [JavaScript|ES6中最容易誤會的語法糖Class-基本用法](https://medium.com/enjoy-life-enjoy-coding/javascript-es6-%E4%B8%AD%E6%9C%80%E5%AE%B9%E6%98%93%E8%AA%A4%E6%9C%83%E7%9A%84%E8%AA%9E%E6%B3%95%E7%B3%96-class-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-23e4a4a5e8ed) [super](https://es6.ruanyifeng.com/#docs/class-extends#super-%E5%85%B3%E9%94%AE%E5%AD%97) --- ###constructor 一個類別只能有一個名為建構子(constructor)的特別方法。

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。

一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

一個建構子可以用關鍵字super來呼叫父類別的建構子。

constructor是默認的方法，即使在宣告class的時候沒有，最後還是會被默認加入。

```javascript= classPoint{} Point.prototype;//{constructor:ƒ} ``` ###extends 繼承類別(extends)，使用extends可以繼承另一個類別的屬性(properties)與方法(method)。

```javascript= classAnimal{ //... run(){ console.log('Animalrun!'); } } classRabbitextendsAnimal{} vara=newRabbit(); a.run();//Animalrun! ``` Rabbit這個類雖然沒有任何的方法可以用，但是透過extendsAnimal，他也可以使用Animal的run這個方法了。

####兩種extends幫你自動建立的[[prototype]]關聯 使用extends語法，會自動建立下列兩種prototype的繼承關係： `Rabbit.prototype.__proto__===Animal.prototype` `Rabbit.__proto__===Animal` 第一個是為了達成一般方法的繼承，第二個是為了達成靜態方法的繼承。

###super 呼叫父類別，是用來提供一個類別呼叫其父類別的函數。

super這個關鍵字，既可以當作函數使用，也可以當作對象使用。

在這兩種情況下，它的用法完全不同。

super當作函數使用時必須放在建構子(constructor)裡。

```javascript= classPerson{ constructor(name){ this.name=name; } getFrom(){ conststate='Taiwan'; return`${this.name}from${state}.`; } run(){ console.log('YouRun!'); } } //使用extends指定parentclass classEmployeeextendsPerson{ constructor(name,position){ //用super呼叫extends指定的class super(name); this.position=position; } getPosition(){ return`${this.name}'spositionisa${this.position}.`; } } constluck=newEmployee('Luck','Front-end'); console.log(luck.getFrom());//LuckfromTaiwan. console.log(luck.getPosition());//Luck'spositionistheFront-end. ``` 繼承後只要子類別沒有要建立屬性(Properties)的時候就可以不用，放constructor跟super。

constructor本來就會預設建立。

super則是因為沒有參數要傳給父類別，所以可以不寫。

super作為對象，可以透過super去使用父類別的方法(Method)。

```javascript= classAnimal{ //... run(){ console.log('Animalrun!'); } } classRabbitextendsAnimal{ //... run(){ super.run();//Animalrun! console.log('Rabbitjump!'); } } varb=newRabbit(); b.run();//Animalrun! //Rabbitjump! ``` ###static 在Class內的Method可以加上static前綴，使它變成StaticMethod（靜態方法），被定義為StaticMethod可以直接以Constructor呼叫，但創建出來的Instance是無法使用它的： ```javascript= classPerson{ constructor(name){ this.name=name; } staticsayHello(name){ return`Hi!${name}!`; } getFrom(){ conststate='Taiwan'; return`${this.name}from${state}.`; } } console.log(Person.sayHello('Luck'));//Hi!Luck! vara=newPerson('apple'); a.getFrom();//applefromTaiwan. a.sayHello('aaa');//a.sayHelloisnotafunction ``` ###Getter&Setter 與ES5一樣，在“類”的內部可以使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行為 目前還看不太懂，感覺像是把age這個方法分成了兩個。

```javascript= classPerson{ constructor(name){ this.name=name; } staticsayHello(name){ return`Hi!${name}!`; } getage(){ if(this._age!==undefined){ return`${this.name}ageis${this._age}.`; } return`Don'tknow${this.name}'sage.`; } setage(age){ this._age=age; } getFrom(){ conststate='Taiwan'; return`${this.name}from${state}.`; } } constjohn=newPerson('John'); console.log(john.age);//Don'tknowJohn'sage. john.age=18; console.log(john.age);//Johnageis18. ``` 1 × Signin Email Password Forgotpassword or Byclickingbelow,youagreetoourtermsofservice. SigninviaFacebook SigninviaTwitter SigninviaGitHub SigninviaDropbox SigninviaGoogle NewtoHackMD?Signup