Trong Series này
- Nâng cấp cho Object
- Arrow function
- Assignment Destruction
- Rest parameters và spread operator
- Template literals
- Khai báo biến với let và const
- Căn bản class
Javascript vốn là ngôn ngữ prototype, class không phải là cái gì đó mới mẻ trong javascript, chỉ là trước đây có cách khai báo và tên gọi khác prototype thì giờ có cách khai báo mới cho những ai đã quen với những ngôn ngữ khác có thể tiếp cận dễ dàng.
Khai báo
Đây là cách khai báo trước đây, khai báo fruit sử dụng function contstructor, thêm một số phương thức cho nó bằng khai báo thêm prototype.
function Fruit( name, calories ) {
this.name = name
this.calories = calories
this.pieces = 1
}
Fruit.prototype.chop = function() {
this.pieces++
}
Fruit.prototype.bite = function(person) {
if ( this.pieces < 1 ) {
return
}
const calories = this. calories / this.pieces
person.satiety += calories
this.calories -= calories
this.pieces--
}Với ES6 viết theo khai báo class
class Fruit {
constructor ( name, calories ) {
this.name = name
this.calories = calories
this.pieces = 1
}
chop () {
this.pieces++
}
bite ( person ) {
if (this.pieces < 1){
return
}
const calories = this.calories / this.pieces
person.satiety += calories
this.calories -= calories
this.pieces--
}
}Lưu ý là với khai báo class, mình không cần thêm dấu , giữa các hàm, phân biệt với object literal, giữa mỗi function phải được phân cách bằng ,
Không giống như khi khai báo function, nếu khái báo class bên dưới câu gọi nó, nó sẽ không hiểu, function thì viết ở đâu gọi cũng hiểu
new Person(); // Result: referenceError: Person is not defined
class Person {
}Phương thức và Properties trong Classes
constructor không bắt buộc khai báo
class Fruit {
}Đoạn code ví dụ bên dưới, tạo một class với property là count hàm phương thức get next sẽ trả về giá trị count
class Counter {
constructor (start) {
this.count = start
}
get next () {
return this.count++
}
}Vận dụng, viết một class để lưu dữ liệu nhận về từ JSON, đọc thêm về Window.localStorage
class LocalStorage {
constructor (key) {
this.key = key
}
get data () {
return JSON.parse(localStorage.getItem(this.key))
}
set data (data) {
localStorage.setItem(this.key, JSON.stringify(data))
}
}
const ls = new LocalStorage('groceries')
ls.data = ['apple','bananas', 'grapes']
console.log(ls.data)
// Result: ['apple', 'bananas','grapes']tạo một phương thức static
class MathHelper {
static sum(...numbers) {
return numbers.reduce( (a,b) => a + b )
}
}
console.log(MathHelper.sum(1,2,3,4,5)
// Result: 15Class Extends
Trước đây gặp trường hợp này phải xài tới "thuốc" thì mới tạo được sub-class, mà cũng khá lằn ngoằn, giờ có cách chính quy. lưu ý là khi muốn viết lại hàm constructor bên trong sub-class thì phải gọi từ khóa super để gọi làm phương thức constructor từ class extend
class Banana extends Fruit {
constructor () {
super('banana',105)
}
slice () {
this.pieces = 12
}
}
Initializing...