Điểm qua những tính năng hấp dẫn trong ES6 - Phần 2
Research lại Object trong Javacript
Trước tiên để hiểu gõ về tính năng tiếp theo ta cần hiểu gõ Object trong Javacript là gì, nếu ai đã hiểu rồi thì có thể scoll xuống mục 5.
Ta gọi mỗi item là một property(thuộc tính) của object nếu value của item đó có kiểu dữ liệu là kiểu phức hợp hoặc các kiểu dữ liệu cơ bản, ngược lại nếu value của item nó là một hàm (một function) thì ta gọi nó là method của object (phương thức của object).
Ví dụ object:
1var myFirstObject = {
2 firstName: "Richard",
3 favoriteAuthor: "Conrad"
4};
Có 2 cách để tạo ra Object là 1. Dùng Object literals. 2. Dùng Object constructor.
Mình sẽ nói ngắn gọn và cho ví dụ về 2 cách này để đi thẳng vào vấn đề.
Dùng Object literals
Đại khái là sẽ dùng cặp ngoặc nhọn { } để tạo một object. Literal có thể hiểu theo ngữ cảnh nào đó là việc “sử dụng chuỗi thuần tuý”.
Ex:
1var myBook = {10: 'test1'}; //đối tượng có 1 thuộc tính
2
3//đối tượng có 1 thuộc tính và 1 phương thức (method)
4var myCar = {
5 brand: 'Toyota',
6 run: function(){
7 console.log('running');
8 }
9};
Dùng Object constructor
Cách này sẽ sử dụng phương thức khởi tạo (constructor) của kiểu dữ liệu Object để tạo ra các object. Phương thức khởi tạo này là một hàm để tạo ra các object mới, ta dùng kèm từ khoá new:
1//Tạo 1 đối tượng mới
2var myApple = new Object();
3
4//Thêm các thuộc tính cho đối tượng
5myApple.color = 'red';
6myApple.shape = 'round';
7myApple.howSweet = function(){
8 console.log('I am sweet');
9};
Tạo nhiều object cùng loại.
Ở mục 5.1 và 5.2 tôi đã giới thiệu cách tạo một object trong javascript nhưng đó chỉ là tạo một object thôi vậy để làm tao ta tạo một loạt những object cùng loại.
Sử dụng mẫu khởi tạo
Cách này giống như ta tạo một class trong các ngôn ngữ lập trình khác, nhưng khác là Javascript sử dụng từ khoá function để tạo ra một hàm khởi tạo đối tượng, dùng từ khoá this để gán các thuộc tính cho đối tượng:
1function Fruit (_color, _name){
2 this.color = _color;
3 this.name = _name;
4 this.showName = function(){
5 console.log(this.name);
6 }
7};
Với hàm khởi tạo này, ta có thể tạo hàng loạt các đối tượng kiểu Fruit như sau:
1var mangoFruit = new Fruit('yellow', 'Mango');
2var appleFruit = new Fruit('red', 'Apple');
Sử dụng prototype
Ex:
1function Fruit (_color, _name){
2};
3
4Fruit.prototype.color = 'general_color';
5Fruit.prototype.name = 'general_name';
6Fruit.prototype.showName = function(){
7 console.log(this.name);
8};
Với cách này thì ta cũng vẫn sẽ sử dụng hàm Fruit() để tạo ra các đối tượng object như cách ở trên:
1var mangoFruit = new Fruit('yellow', 'Mango');
2var appleFruit = new Fruit('red', 'Apple');
5. Enhanced Object Literals in ES6
Như tôi đã nói ở trên ta có thể tạo một mẫu khởi tạo để tạo nhiều object cùng loại, nó tương tự class như trong các ngôn ngữ khác.
5.1 Thuộc tính khởi tạo ngắn hơn
1//ES5
2 function getLaptop(make, model, year) {
3 return {
4 make: make,
5 model: model,
6 year: year
7 }
8 }
9
10 getLaptop("Apple", "MacBook", "2015");// {make: "Apple", model: "MacBook", year: "2015"}
Trong ES6 ta không cần lặp lại những parameter trùng tên với thuộc tính.
1//ES6
2function getLaptop(make, model, year) {
3 return {
4 make,
5 model,
6 year
7 }
8 }
9
10 getLaptop("Apple", "MacBook", "2015"); // {make: "Apple", model: "MacBook", year: "2015"}
5.2 Viết phương thức (methods) ngắn hơn
Ở phiên bản ES5 cú pháp để viết phương thức trong object sẽ như thế này
1//ES5
2 function getLaptop(make, model, year) {
3 return {
4 sayModel : function() {
5 return model;
6 }
7 }
8 }
9
10 getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"
Với ES6 ta không cần viết quá nhiều để phương thức đó hoạt động.
1//ES6
2 function getLaptop(make, model, year) {
3 return{
4 sayModel() {
5 return model;
6 }
7 }
8 }
9
10 getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"
5.3 Có thể tính toán trong property
Như ta đã biết thì có 2 cách để chỉ định một khóa khi xử lý một thuộc tính của object là dấu chấm . và dấu ngoặc vuông [], dấu ngoặc vuông cho phép chúng ta xử lý thuộc tính của object với các biểu thức
Xem ví dụ này:
1var name = "make";
2const laptop = {
3 [name]: "Apple"
4}
5
6console.log(laptop.make);//"Apple"
Chúng ta thấy rằng nó cho phép ta truyền biến name vào dấu [] từ đó ta có thể console.log đối tượng laptop với thuộc tính make (là giá trị của biến name).
Bonus:
1var name = "make";
2var i = 0;
3const laptop = {
4 [name + ++i]: "Apple",
5 [name + ++i]: "Dell",
6 [name + ++i]: "HP"
7}
8
9console.log(laptop.make1);//"Apple"
10console.log(laptop.make2);//"Dell"
11console.log(laptop.make3);//"HP"