Bài 8: Enhanced Object Properties trong ES6

Trong Javascript đối tượng là thứ mà chúng ta thường xuyên phải sử dụng. Và cách khai báo nó cũng hết sức đơn giản (ai không biết xem lại). Nhưng nhận thấy cách thức khai báo và sử dụng trong javascript vẫn còn rườm ra và phức tạp quá, nên ES6 đã hỗ trợ thêm cho chúng ta các kiểu khai báo và sử dụng sau…

1, Property Shorthand.

– Bây giờ chúng ta đã có thể binding biến vào trong object và nó sẽ nhận luôn tên của biến đó là thuộc tính trong object (điều mà trước đây không thể làm được).

VD: Khai báo đối tượng student chứa thuộc tính name và age. Với name và age là 2 biến chứa 2 giá trị.

var name = "Vũ Thanh Tài";
var age = 22;
var student = {name, age};
console.log(student);
//{name: "Vũ Thanh Tài", age: 22}

Nếu như trước đây, khi ES6 chưa ra đời thì chúng ta sẽ phải bind như sau:

var name = "Vũ Thanh Tài";
var age = 22;
var student = {name: name, age: age};
console.log(student);

2, Computed Property Names.

Computed Property Names dịch ra tiếng việt là tính toán các giá trị trên tên của thuộc tính. Đây là một thứ mình thấy rất hay mà ES6 đã update. Bây giờ chúng ta đã có thể làm các phép tính toán, hay biểu thức, để tạo ra thuộc tính cho object ngay trong khi chúng ta khai báo object (trước đây thì phải khai báo xong object mới làm được).

VD:

var n = "Name";
var student = {
    ["student" + n] : "Vũ Thanh Tài",
    age: 22
};
console.log(student);
//{studentName: "Vũ Thanh Tài", age: 22}

3, Method Properties.

Nếu như trước đây, để khai báo một phương thức trong đối tượng thì chúng ta thường phải lách luật bằng cách đặt nó dưới dạng một thuộc tính và xử lý bằng hàm ẩn danh (closure).

VD:

var student = {
    name: "Vũ Thanh Tài",
    age: 22,
    getName: function () {
        return this.name;
    },
    getAge: function () {
        return this.age;
    }
};
console.log(student.getName());
//Vũ Thanh Tài
console.log(student.getAge());
//22

Thì giờ đây với ES6, chúng ta có thể khai báo một phương thức như một hàm bình thường (chỉ cần bỏ keyword function đi là được) mà không phải dựa vào hàm ẩn danh nữa. Với tên hàm là tên phương thức luôn. Điều này sẽ giúp cú pháp (syntax) của chúng ta trở lên rõ ràng và tường minh hơn.

VD: Mình sẽ chuyển object trên về theo chuẩn ES6.

var student = {
    name: "Vũ Thanh Tài",
    age: 22,
    getName() {
        return this.name;
    },
    getAge() {
        return this.age;
    }
};
console.log(student.getName());
//Vũ Thanh Tài
console.log(student.getAge());
//22

Đối với phương thức có truyền tham số chúng ta cũng làm tương tự như với hàm.

VD:

var student = {
    name: "Tôi Đi Code",
    setName(name) {
        this.name = name;
    },
    getName() {
        return this.name;
    }
};
//set name
student.setName("Vũ Thanh Tài")
//get name
console.log(student.getName());
//Vũ Thanh Tài

4, Lời kết.

ES6 đã làm chuẩn hóa việc khai báo đối tượng trong javascript, giúp cho nó được đồng nhất về mặt cú pháp với các ngôn ngữ khác. Từ đó các lập trình viên sẽ dễ tiếp cận với javascript hơn.