---
# System prepended metadata

title: ES6 物件導向 Class 類別

---

# ES6 物件導向 Class 類別
在開始講class之前，先看一下之前es5的寫法:
這是一個狗的建構子，裡面可以定義名字與顏色，並且有一個playwidth的功能
```
ES5的寫法:
function Dog({name:name,color:color}){
    this.name = name;
    this.color = color;
    
    this.playWidth = function(someone){
        console.log(`${this.name}跟${someone}一起玩`)
    }
}

let dog1 = new Dog({name:'小白', color:'白色'});
```
### Class
在es6多了一個Class的定義，將屬性的部分定義在constrctor內，constrctor的意思就像是在創造object之前，要先把描述、藍圖定義好。
在Class內也可以定義一些methods function專門給這個Class用。

ES6的寫法:
```
Class Dog {
    constructor({name:name,color:color}){
        this.name = name;
        this.color = color
    }
    playWidth(someone){
     console.log(`${this.name}跟${someone}一起玩`)
    }
}
let dog = new Dog({name:'小白', color:'白色'});
```

### static
class 只是一個藍圖，在沒有使用new關鍵字之前，就只是一個宣告與描述，用來描述要被建造的object要有什麼屬性及功能，是不能被直接使用的。

若需要單獨使用 class內的功能，就要用 static 關鍵字 在function前，就會被表示成可以直接從class被使用的function，提升成一個class級別的功能。
```
Class Dog {
    constructor({name:name,color:color}){
        this.name = name;
        this.color = color
    }
    static playWidth(someone){
     console.log(`${this.name}跟${someone}一起玩`)
    }
}

Dog.playWidth('貓咪');
```

但一旦提升之後，就不能用當作建構子內的功能使用了。
```
//不能這樣用 會出現 dog.playWidth is not a function

let dog = new Dog();
dog.playWidth('貓咪')
```




