Tìm hiểu về ECMAScript 6

Chào các bạn, mình đã trở lại và ăn hại hơn xưa =)) Trong bài viết này, mình xin giới thiệu về ECMAScript 6 (ES6). Một khái niệm mà Web Developer nào cũng nên biết!

I/ ECMAScript6 là gì ?

ECMAScript 6/ES6 là phiên bản mới nhất của bộ tiêu chuẩn ECMAScript – một bộ đặc tả tiêu chuẩn dành cho Javascript do Hiệp hội các nhà sản xuất máy tính Châu Âu (European Computer Manufacturers Association – ECMA) đề xuất. Phiên bảnECMAScript phổ biến ở thời điểm hiện tại (đầu 2015), và được hầu hết các trình duyệt hỗ trợ là ES5 và ES5.1 (ra mắt vào khoảng năm 2009 và 2011)

ES6 đã ra mắt vào giữa năm 2015 và được lấy tên chính thức là ES2015, với rất nhiều những tính năng mới lạ, và cần thiết đối với sự phát triển chóng mặt của Javascript trong những năm gần đây. Ngoài ra, phiên bản mới nhất của bộ đặc tả tiêu chuẩn này là ES7 cũng đang được phát triển, tuy chưa định ngày ra mắt chính thức nhưng cũng đã bắt đầu gây được sự chú ý của giới công nghệ với những tính năgn hấp dẫn như async function,observer,…

II/ Các tính năng mới trong ECMAScript6

1. Arrow Functions

• Arrow là một dạng viết tắt của các function, sử dụng dấu => thay vì phải viết function
• Để các bạn dễ hiểu hơn thì mình xin giới thiệu 2 cách viết, 1 cách dùng ECMAScript 5 và một ví dụ dùng ECMAScript 6.

1.1/ Expression Bodies

Cú pháp trong ECMAScript 5

odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

Cú pháp trong ECMAScript 6

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

1.2/ Statement Bodies

Cú pháp trong ECMAScript 5

nums.forEach(function (v) {
   if (v % 5 === 0)
       fives.push(v);
});

Cú pháp trong ECMAScript 6

nums.forEach(v => {
   if (v % 5 === 0)
       fives.push(v)
})

1.3/ Lexical this

Cú pháp trong ECMAScript 5

this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

Cú pháp trong ECMAScript 6

var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});

==> Qua các ví dụ trên thì các bạn có thể thấy rằng trong ECMAScript 6 đã thay thế function bằng dấu => trong ECMAScript 6

2. Class

Trong javascript thông thường, để xây dựng và kế thừa các class, chúng ta phải thiết kế theo hướng sử dụng Prototype (prototype-based OO).

Hiểu được sự khó khăn này, ES6 đã giải quyết được vấn đề này bằng cách xây dựng bộ cú pháp đơn giản, dễ hơn rất nhiều so với sử dụng Prototype. Cú pháp gần giống với PHP, C++

Ngoài việc xây dựng class đơn giản thì ES6 còn hỗ trợ việc kế thừa, hỗ trợ các static method, constructor,...

2.1/ Định nghĩa một class

Cú pháp trong ECMAScript 5

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

Cú pháp trong ECMAScript 6

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

==> Qua 2 ví dụ về cách khai báo class trong ES5 và ES6 thì rõ ràng các bạn có thể thấy được sự khác biết rất lớn phải không nào

2.2/ Kế thừa

Cú pháp trong ECMAScript 5

var Rectangle = function (id, x, y, awidth, height) {
    Shape.call(this, id, x, y);
    this.awidth  = awidth;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var Circle = function (id, x, y, radius) {
    Shape.call(this, id, x, y);
    this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Cú pháp trong ECMAScript 6

class Rectangle extends Shape {
    constructor (id, x, y, awidth, height) {
        super(id, x, y)
        this.awidth  = awidth
        this.height = height
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

==> Qua 2 ví dụ về cách extends class trong ES5 và ES6, chúng ta có thể thấy sự khác biệt rất lớn. Syntax sử dụng trong ES6 đơn giản, rất clear, và gần gần giống như các ngôn ngữ như java, php, c++,..

2.3/ Base Class Access

Cú pháp trong ECMAScript 5

var Shape = function (id, x, y) {
    …
};
Shape.prototype.toString = function (x, y) {
    return "Shape(" + this.id + ")"
};
var Rectangle = function (id, x, y, awidth, height) {
    Shape.call(this, id, x, y);
    …
};
Rectangle.prototype.toString = function () {
    return "Rectangle > " + Shape.prototype.toString.call(this);
};
var Circle = function (id, x, y, radius) {
    Shape.call(this, id, x, y);
    …
};
Circle.prototype.toString = function () {
    return "Circle > " + Shape.prototype.toString.call(this);
};

Cú pháp trong ECMAScript 6

class Shape {
    …
    toString () {
        return `Shape(${this.id})`
    }
}
class Rectangle extends Shape {
    constructor (id, x, y, awidth, height) {
        super(id, x, y)
        …
    }
    toString () {
        return "Rectangle > " + super.toString()
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        …
    }
    toString () {
        return "Circle > " + super.toString()
    }
}

2.4/ Static Members

Cú pháp trong ECMAScript 5

var Rectangle = function (id, x, y, awidth, height) {
    …
};
Rectangle.defaultRectangle = function () {
    return new Rectangle("default", 0, 0, 100, 100);
};
var Circle = function (id, x, y, awidth, height) {
    …
};
Circle.defaultCircle = function () {
    return new Circle("default", 0, 0, 100);
};
var defRectangle = Rectangle.defaultRectangle();
var defCircle    = Circle.defaultCircle();

Cú pháp trong ECMAScript 6

class Rectangle extends Shape {
    …
    static defaultRectangle () {
        return new Rectangle("default", 0, 0, 100, 100)
    }
}
class Circle extends Shape {
    …
    static defaultCircle () {
        return new Circle("default", 0, 0, 100)
    }
}
var defRectangle = Rectangle.defaultRectangle()
var defCircle    = Circle.defaultCircle()

2.5/ Getter/Setter

Cú pháp trong ECMAScript 5

var Rectangle = function (awidth, height) {
    this._awidth  = awidth;
    this._height = height;
};
Rectangle.prototype = {
    set awidth  (awidth)  { this._awidth = awidth;               },
    get awidth  ()       { return this._awidth;                },
    set height (height) { this._height = height;             },
    get height ()       { return this._height;               },
    get area   ()       { return this._awidth * this._height; }
};
var r = new Rectangle(50, 20);
r.area === 1000;

Cú pháp trong ECMAScript 6

class Rectangle {
    constructor (awidth, height) {
        this._awidth  = awidth
        this._height = height
    }
    set awidth  (awidth)  { this._awidth = awidth               }
    get awidth  ()       { return this._awidth                }
    set height (height) { this._height = height             }
    get height ()       { return this._height               }
    get area   ()       { return this._awidth * this._height }
}
var r = new Rectangle(50, 20)
r.area === 1000

3. Template Literals

Với ES6, việc xử lý chuỗi trong javascript trở nên cực kì đơn giản hơn bao giờ hết. Đặc biệt là nó hỗ trợ chuỗi nhiều dòng, đây là một điểm hản là nhiều bạn dev rất thích thú phải không nào