iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
1
自我挑戰組

重新開始的Vue.js 30day系列 第 17

從頭開始的Javascript 入門 -Constructor 建構式 ES6 Day15

  • 分享至 

  • xImage
  •  

Constructor 建構式

  • 建構物件用的函式
  • 建立新物件時會被呼叫的函式
  • JavaScript 會內建一個空白建構式(即便你沒寫建構式)
class Car {
constructor(){
   console.log("THIS IS CALLED");
    }
}

let car1 =new Car();

屬性:用來描述物件的個別差異

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


consrtructor(參數列表){
this.屬性名稱=初始資料;
}
this代表 正要產生的新物件 obj 
屬性名稱 ex color this.color 
let car1= new Car(); 呼叫建構式 資料會拿到color 屬性


constructor(color){
this.color=color
//建立新屬性color 資料偷過參數 彈性的 在建立物件時提供的
}
//利用已經定義好的類別產生新物件
let car1 = new Car("blue");
let car2 = new Car("green");

this代表 正要產生的新物件 obj

物件.屬性名稱
物件.屬性名稱 =新資料

方法:與物件綁定的function

method 方法

  • 用來描述物件可以做的事
  • 與物件綁定的函式

呼叫物件方法:
物件.方法名稱(參數資料)

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

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

class Animal{
constructor(name){
this.name=name;
} // 撰寫建構式,以滿足下方的輸出要求
sleep(){
console.log(this.name+"is Sleeping");
} // 撰寫方法,以滿足下方的輸出要求
... }

let a=new Animal("Mini");
console.log(a.name); // 印出 "Mini"
a.sleep(); // 印出 "Mini is Sleeping"

// 建立物件
new 類別名稱(參數資料)
// 存取屬性
物件.屬性名稱
// 呼叫方法
物件.方法名稱(參數資料)


class SimpleAnimal{
 constructor(name){
     this.name=name;
 }
 sleep(){
      console.log(this.name+"is Sleeping");
 }
}

let a = new SimpleAnimal("Spot");
console.log(a.name);
a.sleep;

// 練習二:進階練習
class Animal{
    constructor(name,kg){
     this.name=name;
     this.kg=kg;
    }// 撰寫建構式,以滿足下方的輸出要求
    eat(moreKG){
       this.kg+=moreKG;
       console.log(this.name+"吃飯, 增加"+moreKG+"公斤,現在"+this.kg+"公斤");
    }
    defecate(lessKG){
    
    this.kg-=lessKG;
        console.log(this.name+"大號,減少"+lessKG+"公斤,現在 "+this.kg+"公斤");
    }//  撰寫方法,以滿足下方的輸出要求
};
let a=new Animal("Mini", 2);
console.log(a.name+": "+a.kg+" 公斤"); // 印出 "Mini: 2 公斤"
a.eat(0.1); // 印出 "Mini 吃飯,增加 0.1 公斤,現在 2.1 公斤"
a.defecate(0.08); // 印出 "Mini 大號,減少 0.08 公斤,現在 2.02 公斤"

上一篇
從頭開始的Javascript 入門 -ES6 繼承 Day14
下一篇
從頭開始的Javascript 入門 -實作demo Whack A Mole Game Day16
系列文
重新開始的Vue.js 30day21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言