Video học lập trình mỗi ngày

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Bài này là một trong những ví dụ cho thấy sự khác biệt giữa việc tạo lớp JavaScript và lớp con trong ES5 và ES6. Hiện tại rất nhiều dự án đang triển khai vẫn còn dử dụng ES5, vậy làm sao chuyển thành ES6 và cấu trúc nó thế nào ???
Tôi hy vọng rằng đến cuối blog này, bạn sẽ nhận ra rằng cấu trúc nào phù hợp với tựng dự án.
Trước khi đọc bài này các bạn nên biết ES5 là gì? ES6 là gì? Lúc đó các bạn sẽ không thấy rối hơn.
Nào bắt đầu với việc khởi tạo cấu trúc một Class với ES5.

1 - ES5.js

'use strict';

/**
* City class.
*
* @constructor
* @param {String} name - tên.
* @param {Number} x - Toạ độ x.
* @param {Number} y  - Toạ độ y.
*/
function City(name, x, y) {
this.name = name;
this.setLocation(x, y);
}

/**
* Thiết lập toạ độ cho City
*
* @param {Number} - Toạ độ x.
* @param {Number} - Toạ độ y.
*/
City.prototype.setLocation = function(x, y) {
this.x = x;
this.y = y;
};

/**
* Get toạ độ của City
*
* @return {Object}
*/
City.prototype.getLocation = function() {
return {
x: this.x,
y: this.y
};
};

/**
* Lấy tên của city
*
* @return {String}
*/
City.prototype.getName = function() {
return 'City("' + this.name + '")';
};


const _city = new City('Hồ Chí Minh', 100, 200)

console.log(_city.getName(), _city.getLocation())

Khởi tạo cấu trúc một Class với ES6.

2- ES6.js

'use strict';

/**
* City class.
* 
* @constructor
* @param {String} name - tên.
* @param {Number} x - Toạ độ x.
* @param {Number} y  - Toạ độ y.
*/
class City {
    constructor(name, x, y) { // constructor syntactic sugar
       this.name = name;
       this.setLocation(x, y);
    }

/**
* Thiết lập toạ độ cho City
* 
* @param {Number} - Toạ độ x.
* @param {Number} - Toạ độ y.
*/
   setLocation(x, y) { // prototype function
     this.x = x;
     this.y = y;
   }

/**
* Get toạ độ của City
* 
* @return {Object}
*/
  getLocation() {
     return {
       x: this.x,
       y: this.y
    };
 }

/**
* Lấy tên của city 
* 
* @return {String}
*/
   getName() {
     return `City is name ("${this.name}")`;
   }
}

const _city = new City('Hồ Chí Minh', 100, 200)

console.log(_city.getName(), _city.getLocation())

Kết luận:

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Cho dù hai cấu trúc khác nhau hoàn toàn ES5 và ES6 nhưng cuối cùng cũng đưa về một mục đích. Từ đó các bạn cũng nên đọc và viết lại để phân biệt cấu trúc cũng như join vào một dự án nào cũng không còn bỡ ngỡ nữa.

Và bài sau tôi sẽ viết về extends Class trong ES5 , ES6. 

Nếu bạn có bất kỳ câu hỏi nào về bài viết, hãy để lại nhận xét và tôi sẽ liên lạc lại với bạn hoặc gửi mail qua anonystick@gmail.com

Chân thành cảm ơn các bạn.