Tạo bài viết
Đăng ký
11/10/2019, 10:10

Tham chiếu và ghi chú ngắn về ES6, ESNext

ECMAScript Tên chính thức của Javascript Tài liệu chuẩn hóa Javascript Thường được gọi tắt là ES ES6 ES6 là gì? Bản đặc tả ECMAScript phiên bản 6. Đặc tả tức là bản mô tả chức năng, cú pháp, còn việc có hỗ trợ hay không là phụ thuộc vào phiên bản của từng platform ...

ECMAScript

  • Tên chính thức của Javascript
  • Tài liệu chuẩn hóa Javascript
  • Thường được gọi tắt là ES

ES6

ES6 là gì?

  • Bản đặc tả ECMAScript phiên bản 6. Đặc tả tức là bản mô tả chức năng, cú pháp, còn việc có hỗ trợ hay không là phụ thuộc vào phiên bản của từng platform (browser, node.js, babel transpiler,…)
  • Ra đời vào năm 2015 nên còn được gọi là ES2015
  • Là phiên bản nâng cấp lớn của ES5 ra đời vào năm 2009
  • 6 năm cho một lần release là quá lâu và số lượng feature mới cũng là quá nhiều mà chưa có platform nào implement được đầy đủ [1],[2]. Do đó quy trình release đã được thay đổi. Các phiên bản tiếp theo được release theo từng năm và theo quy trình mở [3],[4].
  • Có thể chia ra thành các phiên bản: ES6, ES 2016+ (ES7, ES8, ES9, ES10…) và ES Next (là những chức năng mới sắp được release [5])
  • Vì thường có yêu cầu phải support nhiều phiên bản trình duyệt khác nhau nên chúng ta thường phải sử dụng các transpiler (chẳng hạn babel, swc) để translate ra cú pháp mà support được các browser cũ, do đó khi đọc bảng compatibility table [1] nên chú ý đến cột Babel + core-js

Tham khảo thêm:

  • [1] https://kangax.github.io/compat-table/es6/
  • [2] https://node.green/
  • [3] https://kipalog.com/posts/Tim-hieu-quy-trinh-TC39
  • [4] http://2ality.com/2015/11/tc39-process.html
  • [5] https://github.com/tc39/proposals/blob/master/finished-proposals.md

let, const

ES6 giới thiệu 2 từ khóa mới là let và const dùng để khai báo biến, trước đây chỉ có var.

Khác với var

Các biến được khai báo với var có phạm vi function scope, còn với let, const thì nó phạm vi block scope

  • function scope: Biến được khai báo dùng được trong toàn bộ function
    function usingVar() { let x = 1; if (true) { var y = 2; console.log(x); // 1 } console.log(y); // 2 }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function usingVar() {
        let x = 1;
        if (true) {
            var y = 2;
            console.log(x); // 1
        }
     
        console.log(y); // 2
    }
     

     
  • block scope: Biến được khai báo chỉ sử dụng được trong block {} nơi mà nó được khai báo
    function usingLet() { let x = 1; if (true) { let y = 2; console.log(x); // 1 } console.log(y); // Error: y is not defined }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function usingLet() {
        let x = 1;
        if (true) {
            let y = 2;
            console.log(x); // 1
        }
     
        console.log(y); // Error: y is not defined
    }
     

    Hoặc đối với biến trong vòng for:
    for (let i = 0; i < 5; ++i) { console.log(i); // OK } console.log(i); // Error: y is not defined
    1
    2
    3
    4
    5
    6
    7
     
    for (let i = 0; i < 5; ++i) {
        console.log(i); // OK
    }
     
    console.log(i); // Error: y is not defined
     

let vs const

  • let: biến đã khai báo có thể được gán lại
    let letVar = 'My old name'; if (true) { letVar = 'I can have new name'; }
    1
    2
    3
    4
    5
    6
     
    let letVar = 'My old name';
    if (true) {
        letVar = 'I can have new name';
    }
     
  • const: biến đã khai báo không thể được gán lại
    const constVar = 'Only god can change me'; if (true) { constVar = 'Don't try to change me'; // Error: invalid assignment }
    1
    2
    3
    4
    5
    6
     
    const constVar = 'Only god can change me';
    if (true) {
        constVar = 'Don't try to change me'; // Error: invalid assignment
    }
     

    Tuy nhiên nếu const là object thì giá trị của object vẫn có thể bị thay đổi. Chỉ không thể bị gán thành object khác mà thôi.
    const myObject = { id: 1, name: 'Can be changed' }; myObject.name = 'New name'; // OK myObject = null; // Error
    1
    2
    3
    4
    5
    6
    7
    8
     
    const myObject = {
        id: 1,
        name: 'Can be changed'
    };
    myObject.name = 'New name'; // OK
    myObject = null; // Error
     

Từ đây trở đi chúng ta sẽ chủ yếu dùng let và const.

Template strings

ES6 giới thiệu thêm việc khai báo string bằng ký tự ` (backtick), bổ sung cho ' và ".

Dùng backtick ta có thể khai báo multiline string:

const multiline = `Rose is #f00 Violet is #00f People often use word But I will use hex code for you! `;
1
2
3
4
5
6
7
 
const multiline = `Rose is #f00
Violet is #00f
People often use word
But I will use hex code for you!
`;
 

Thay cho trước đây:

const multiline = 'This is first line' + 'This is second line';
1
2
3
4
 
const multiline = 'This is first line'
    + 'This is second line';
 

Có thể dùng biến hoặc biểu thức JS trong string (String interpolation):

const name = 'ES6'; function thanks() { return 'Thank you!'; }; const obj = { ask() { return 'And you?'; } }; const superPowerString = `How are you, ${name}? - I'm fine. ${thanks()} ${obj.ask()}`;
1
2
3
4
5
6
7
8
9
10
11
12
 
const name = 'ES6';
function thanks() {
    return 'Thank you!';
};
const obj = {
    ask() {
        return 'And you?';
    }
};
const superPowerString = `How are you, ${name}? - I'm fine. ${thanks()} ${obj.ask()}`;
 

Class

Cú pháp khá giống với các ngôn ngữ class based OOP như PHP hoặc Java.

Class trong ES6 support kế thừa, super (parent) calls, instance method, static methods and constructor.

Constructor

class Animal { constructor(name) { this.name = name; } } let dog = new Animal('Golden Retriever'); console.log(dog.name);
1
2
3
4
5
6
7
8
9
10
 
class Animal {
    constructor(name) {
        this.name = name;
    }
}
 
let dog = new Animal('Golden Retriever');
console.log(dog.name);
 

Instance method

class Animal { constructor(name) { this.name = name; } introduce() { console.log(`My name is ${this.name}`); } } let dog = new Animal('Golden Retriever'); console.log(dog.introduce());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
class Animal {
    constructor(name) {
        this.name = name;
    }
 
    introduce() {
        console.log(`My name is ${this.name}`);
    }
}
 
let dog = new Animal('Golden Retriever');
console.log(dog.introduce());
 

Static method

class Animal { constructor(name) { this.name = name; } static species() { return 1300000; } } console.log(Animal.species());
1
2
3
4
5
6
7
8
9
10
11
12
13
 
class Animal {
    constructor(name) {
        this.name = name;
    }
 
    static species() {
        return 1300000;
    }
}
 
console.log(Animal.species());
 

Getter & Setter

ES6 class support define các getter, setter cho các property của object. Cho phép chúng ta custom logic khi đọc/ghi giá trị của property, chẳng hạn validate, biến đổi giá trị…

class Animal { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(name) { this._name = name.toLowerCase(); } } let dog = new Animal('Golden Retriever'); console.log(dog.name); dog.name = 'Husky'; console.log(dog.name);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
class Animal {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name.toUpperCase();
    }
 
    set name(name) {
        this._name = name.toLowerCase();
    }
}
 
let dog = new Animal('Golden Retriever');
console.log(dog.name);
 
dog.name = 'Husky';
console.log(dog.name);
 

Nhìn vào class có thể nhầm lẫn name() là một instance method, nhưng ở đây nó là method đặc biệt, chúng ta không thể gọi trực tiếp method này mà từ tên method => tên property.

let dog = new Animal('Golden Retriever'); dog.name(); // ERROR dog.name; // OK
1
2
3
4
5
 
let dog = new Animal('Golden Retriever');
dog.name(); // ERROR
dog.name; // OK
 

Inheritance

class Animal { constructor(name) { this._name = name; } get name() { return this._name.toUpperCase(); } set name(name) { this._name = name.toLowerCase(); } introduce() { console.log(`My name is ${this.name}`); } static species() { return 1300000; } } class Cat extends Animal { constructor(name, isReal) { super(name); this.isReal = isReal; } static species() { return NaN; } } let tom = new Cat('Tom', false); console.log(tom); tom.introduce(); console.log(Cat.species());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
class Animal {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name.toUpperCase();
    }
 
    set name(name) {
        this._name = name.toLowerCase();
    }
 
    introduce() {
        console.log(`My name is ${this.name}`);
    }
 
    static species() {
        return 1300000;
    }
}
 
class Cat extends Animal {
    constructor(name, isReal) {
        super(name);
 
        this.isReal = isReal;
    }
 
    static species() {
        return NaN;
    }
}
 
let tom = new Cat('Tom', false);
console.log(tom);
tom.introduce();
console.log(Cat.species());
 

Class fields

ES vẫn chưa chính thức support việc khai báo private/public property của object class, tính năng này vẫn đang còn được thảo luận (Proposal Stage 3).

class Rectangle { constructor(height, awidth) { this.height = height; this.awidth = awidth; } } // Static field Rectangle.staticWidth = 20;
1
2
3
4
5
6
7
8
9
10
11

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024