# Why you might want to create static class members?

<hr/>

## 一、static的使用

### A.原型鏈

* 概念:
每一個物件都會有一個對應的原型物件

* 原型物件的順序:
建立車子物件 → Car車子原型物件 → Object的原型物件→ 空值null(終點)


- 物件實體的應用:


//定義類別
class Car{
    //建構式產生物件屬性
    constructor(color){
        this.color=color; //父類別的屬性，可以讓子類別使用
    }
    //建立物件方法
    run(){
        console.log("running") //父類別的方法，可以讓子類別使用
    }
}

//建立子類別
class ElectricCar extends Car{
    constructor(color){
        //super()呼叫父類別
        super(color);
        //專屬屬性
        this.battery=100;
    }
    run(distance){
        console.log("行駛了"+distance+"km")
    }
    charge(){
        this.battery=100;
    }
}




//在實體物件中，直接建立物件的屬性、物件的方法
let car=new ElectricCar("red");

//引用父類別或子類別的方法或屬性
//順著原型鍊由下往上找物件方法
car.run(100); //"行駛了100km"



car.name="悄悄"
car.test=function(){
    console.log("建立物件後，在實體物件中新增方法");
    console.log(this.name);
};


car.test() //建立物件後，在實體物件中新增方法  //悄悄

### B.定義、呼叫靜態方法
* **特性**

1. 原本使用物件必須要先建立物件，並且綁定物件與實體屬性、實體方法來使用；
2. 而靜態方法可直接使用類別名稱綁定實體屬性、實體方法來使用，無須建立物件

* **語法**

類別的名稱+ . + 靜態方法名稱


class Car{
constructor(color){
this.color = color;
}

run(){
console.log('Car ' + this.color + 'Running');
}

static showColors(){ //定義一個靜態方法
console.log('we support three colors: blue, red, green.')
}
}

//直接使用類別名稱呼叫靜態方法

//正確的程式
Car.showColors();
//錯誤的程式，run非靜態方法，必須由物件實體呼叫
Car.run();


//產生新物件實體
//正確的程式
let carobj = new Car('blue');
carobj.run(); //使用物件實體，呼叫物件的方法run();


//錯誤的程式，showColors為靜態方法,必須由類別名稱呼叫
carobj.showColors(); 

* **關鍵**
靜態方法須用類別名稱綁定；其他的方法一律使用物件名稱綁定!
- 非靜態方法只能用物件實體呼叫
- 靜態方法只能用類別名稱呼叫

#

## 二、static於Class的作用:
建構新物件時，如果使用class 語法，我們需要在 class body 裡定義：
1. constructor方法
2. 其他方法

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(this.name);
  }
}
let user = new User('John');
user.sayHi();

而在class 裡面宣告static method(靜態方法)，其效果等同於直接定義一個方法在class的屬性上

在 class 裡面宣告靜態方法 (static method)

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(this.name);
  }
  static add(a, b) {
    console.log(a+b);
  }
}
let user = new User('John');
user.sayHi();
User.add(1,2);

其等同於定義方法在class屬性上

class User {}

User.add = function(a, b) {
  // ...
}

## 三、結論：建立Static的好處:

Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it.
Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.

靜態方法不需要實體化它所屬類別的實例就可以被呼叫，
它也無法被已實體化的類別物件呼叫。
靜態方法經常被用來建立給應用程式使用的工具函數。

:::info
**Static class members (properties/methods)**
* are not tied to a specific instance of a class(不受特定的實體類別綁定)
* have the same value regardless of which instance is referring to it
* Static properties are typically configuration variables and static methods
* pure utility(工具函式，像是建立物件或複製物件的函式) functions which do not depend on the state of the instance(靜態方法不須實例化(instantiating)其類別即可被呼叫)
* 靜態方法本身沒有被綁定在某個特定的instance上，而是綁定這個instance所屬的class。
:::

## 五、參考資料
MDN文件關於static 定義
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes/static

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes
https://shubo.io/javascript-class/#class-%E7%9A%84%E9%9D%9C%E6%85%8B%E6%96%B9%E6%B3%95-static-method

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