200222-類別物件基本概念

參考網站:

基本觀念

類別:設計圖。
物件:根據設計圖製造出來的實體。
例如一個展示盒的設計圖，可以用來產生無數個實體展示盒。
換句話說，一個類別設計，可以用來產生無數個物件實體。
基本類別設計會用到的關鍵字:class,constructor
產生物件實體會用到的關鍵字:new
物件實體以類別設計為基礎，但會依不同需求使內容有所差異。

定義類別並產生物件

定義類別:

1	class 類別名稱{} //*註:先有類別才能建立物件

建立物件:

1	new 類別名稱()

例如:

//定義一個類別
class Car{} 
//利用定義好的類別產生新物件，並放進變數中
let car1=new Car()

定義建構式(Constructor)

在類別中定義建構式:

1
2
3

constructor(參數列表){
    建構式的內部程式
}

例如:

class Car{               //定義一個類別
    constructor(){       //在類別中定義建構式
        console.log("建構式被呼叫");
    }
}

//利用已經定義的類別產生新物件
let car1=new Car();  //呼叫建構式，產生新物件

建構式:建立新物件時被呼叫的函式，若是沒特別寫，Javascript會內建
空白建構式constructor(){}，使程式可以運作。

定義、存取屬性(Attribute)

屬性:用來描述物件的個別差異。
在建構式中建立屬性:

1
2
3

constructor(參數列表){
    this.屬性名稱=初始資料;
}

例如:

class Car{
    constructor(){
        this.color="red";   //建立新屬性color，資料為red。
    }
}
//利用已經定義的類別產生新物件
let car1=new Car();  //新物件擁有color屬性，資料為red。

也可透過參數，彈性的在建立物件時提供資料:

class Car{
    constructor(color){
        this.color=color;   
    }
}
//利用已經定義的類別產生新物件
let car1=new Car("blue");  //新物件擁有color屬性，資料為blue。
let car2=new Car("green");  //新物件擁有color屬性，資料為green。

存取物件屬性:

1 2	物件.屬性名稱物件.屬性名稱=新的資料

例如:

class Car{
    constructor(color){
        this.color=color;   
    }
}
let car1=new Car("blue");  //新物件擁有color屬性，資料為blue。
console.log(car1.color);   //取得屬性資料，印出blue
car1.color="red";          //更新屬性資料
console.log(car1.color);   //取得新的屬性物件，印出red

定義、呼叫方法(Method)

方法:用來描述物件可以做的事，與物件綁定的函式。
換句話說，方法就是綁定在物件上面的函式。

在類別中建立方法:

1
2
3

方法的名稱(參數列表){
    內部的程式碼
}

例如:

class Car{
    constructor(color){
        this.color=color;   
    }
    run(){      //定義一個run方法，透過物件呼叫並執行內部程式碼。
        console.log("Running");   
    }
}
let car1=new Car("blue")  //產生新物件，物件擁有color屬性與run方法。

呼叫物件方法:

1	物件.方法名稱(參數資料)

例如:

class Car{
    constructor(color){
        this.color=color;   
    }
    run(){      //定義一個run方法，透過物件呼叫並執行內部程式碼。
        console.log("Running");   
    }
}
let car1=new Car("blue")  //產生新物件，物件擁有color屬性與run方法。
car1.run();  //呼叫run方法，執行run內部程式，印出Running。

在物件方法中使用this代表綁定物件:

例如:

class Car{
    constructor(color){
        this.color=color;   
    }
    run(){     
        console.log("Car"+this.color+"Running");   
    }
}
let car1=new Car("blue")  
car1.run();  //印出 Car blue Running

物件屬性、方法的綜合操作

以車輛做為比喻:

class Car{
    construtcor(color){               //建構式
        this.color=color;
        this.speed=0;                 //初始資料，車輛的初始速度為0
    }
    run(speed){                       //方法
        this.speed=speed;             //更新車輛速度(給予資料彈性輸入)
        console.log("Car"+this.color+"Running at"+this.speed+"KM/HR");
    }
    stop(){
        this.speed=0;                 //更新車輛速度
        console.log("Car"+this.color+"stopped);
    }
}
let car1=new Car("blue");             //產生新物件並放入變數中
car1.run(50);                         //印出Car blue Running at 50KM/HR
car1.stop();                          //印出 Car blue stopped