iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

30天入門JavaScript系列 第 25

【Day 25】物件(五):類別 class

  • 分享至 

  • xImage
  •  



昨天提到,JavaScript是用原型鍊來作繼承,
但其他的程式語言使用者通常是使用類別來作繼承,並不習慣JS這種使用原型鍊來作繼承的機制。

所以ECMAScript在ES6時新增了calss(類別)關鍵字,給那些其他語言過來的開發者使用熟悉的語法開發。

但事實上JS的class只是把語法包裝成跟其他語言的類別很像,
實際上還是使用原型鍊機制來作繼承。

//建立一個類別
class People {
  constructor(name, age) { //constructor內的是每個物件各自的屬性
    this.name = name;
    this.age = age;
  }
  //constructor外的是共用的屬性或方法,所有建立的物件都能存取
  say() {
    console.log('你好我叫做' + this.name + ',我今年' + this.age);
  }
}

//上面跟以下ES5程式等效
function People(name, age) {
  this.name = name;
  this.age = age;
}

People.prototype.say = function () {
  console.log('你好我叫做' + this.name + ',我今年' + this.age);
};


要繼承也很方便,一樣用class來重寫昨天的例子

class Student extends People { //加入extends關鍵字跟想繼承的類別
  constructor(name, age, school) {
    super(name, age);  //會呼叫People內的constructor()
    this.school = school;
  }
  saySchool() {
    console.log('我目前就讀' + this.school);
  }
}

var student1 = new Student('Jonh', 20, '台灣大學');

student1.say(); //你好我叫做Jonh,我今年20
//繼承了People的方法
student1.saySchool();//我目前就讀台灣大學
//也有自己的方法
console.log(student1.constructor === Student); //true
//手動修改prototype造成constructor指向錯誤的問題也解決了

靜態方法

在類別內的方法前面加個static關鍵字,會建立只有該類別能呼叫的方法

class User {
  constructor(name) {
    this.name = name;
    this.score = 0;
  }
  scorePlusOne() {
    this.score++;
  }

  static winner(user1, user2) { //建立一個靜態方法
    console.log(
      `獲勝的是:${user1.score > user2.score ? user1.name : user2.name}`
    );
  }
}

var user1 = new User('Sony');
var user2 = new User('微軟');

user2.scorePlusOne();
user1.scorePlusOne();
user2.scorePlusOne();

User.winner(user1, user2);//印出 獲勝的是:微軟
user1.winner(user1, user2);//無法在建立的物件呼叫  會跳出錯誤

物件相關的終於結束了... 真的好難解釋
尤其class一堆書都只說這是參照其他語言的語法,
你們到是解釋一下啊!不要預設人人都熟其他語言好嗎!/images/emoticon/emoticon04.gif


上一篇
【Day 24】物件(四):原型鍊
下一篇
【Day 26】ES6模組
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言