[JS] JavaScript 類別(Class)
function constructor
有 hoisting 的情況,所以可以寫再後面但在前面使用;但是 class constructor 沒有 hoisting 的情況 ,所有使用該 class constructor
的程式,必須放在 class constructor 後面。
ES6 Class Playground @ jsfiddle
keywords: class
, constructor(data)
建立 Constructor
傳統 function constructor
過去使用 function constructor
來建構物件,並且搭配 prototype 來建議物件可使用的方法:
// 過去使用 function constructor
let Person = function (data) {
this.name = data.name;
this.age = data.age;
let profile = `${this.name}(${this.age})`; // 無法在實例中使用
};
Person.prototype.greet = function () {
console.log(`Hello ${this.name}, your age is ${this.age}`);
};
let Aaron = new Person({ name: 'Aaron', age: 28 });
let Jackson = new Person({ name: 'Jackson', age: 24 });
console.log(Aaron); // Person {name: "Aaron", age: 28}
在實例中取用不存在的變數時會得到
undefined
。
ES6 Class
在 ES6 中可使用關鍵字 class
和 constructor(self)
:
// 在 ES6 中可以透過 class 來建立 constructor
class Person {
constructor(data) {
this.name = data.name;
this.age = data.age;
}
}
let Aaron = new Person({ name: 'Aaron', age: 28 });
let Jackson = new Person({ name: 'Jackson', age: 24 });
console.log(Aaron); // Person {name: "Aaron", age: 28}
設定預設值:
// 同樣可以透過 object destructuring 來做到設定預設值
class Person {
constructor({ name, age = 18 } = {}) {
this.name = name;
this.age = age;
}
}
let Aaron = new Person({ name: 'Aaron' });
let Jackson = new Person({ name: 'Jackson', age: 24 });
console.log(Aaron); // Person {name: "Aaron", age: 18}
console.log(Jackson); // Person {name: "Jackson", age: 24}
在
class
中只能使用方法(function),不能直接代入資料。