Cách dùng use strict trong javascript (strict mode)

Trong bài này chúng ta sẽ tìm hiểu use strict trong js, đây là chế độ strict mode được nhắc đến rất nhiều khi làm việc với module trong javascript.

Khi bạn tải những file javascript hoặc những plugin jQuery trên mạng thì bạn sẽ thấy phía trên cùng của file có dòng chữ "use strict";. Đây là từ khóa dùng để khai báo chế độ strict mode trong javascript.

Trong bài này chúng ta sẽ thảo luận về strict mode, một chế nghiêm ngặt trong việc sử dụng đúng với cú pháp của javascript. Với chế độ này giúp cho ta có một thói quen logic trong lập trình. Nhưng với những bạn có tính cẩu thả thì không ưng chút nào.

1. Strict mode trong javascript là gì?

Trong javascript, strick mode là chế độ code nghiêm ngặt, nó bắt buộc lập trình viên phải tuân thủ theo quy tắc mà javascript đưa ra. Các lỗi cơ bản thường gặp như khai báo trùng tên biến và trùng tên hàm, sử dụng biến mà chưa được định nghĩa..

Bài viết này được đăng tại [free tuts .net]

Trong bài tìm hiểu hoisting các bạn đã biết được quá trình biên dịch sẽ trải qua 2 giai đoạn, đầu tiên là giai đoạn khởi tạo và thứ hai là thực thị. trong giai đoạn khởi tạo thì các biến và hàm sẽ được di chuyển lên phía trên cùng của file, sau đó là biên dịch chương trình. Đây tưởng chừng là một lỗi nhưng nó lại không phải là lỗi nhé các bạn, nên không vi phạm vào quy tắc của strict mode.

Và bây giờ câu hỏi đặt ra là làm thế nào để khai báo sử dụng chế độ strict mode trong js? Để trả lời câu hỏi này thì ta qua phần tiếp theo nhé.

2. Use strict trong js là gì?

Trong javascript, use strict là từ khóa khai báo sử dụng chế độ strict mode. Nghĩa là nếu bạn muốn sử dụng chế độ Strict Mode ở đâu thì chỉ việc đặt từ khóa "use strict" ở đó.

Chế độ Strict Mode có hai phạm vi sử dụng, đó là toàn cục và cục bộ. Tính toàn cục tức là khi bạn đặt từ "use strict" ở ngoài hàm và nằm phía trên cùng của file, thì lúc này tất cả các đoạn code bên dưới đều bị ảnh hưởng. Tính cục bộ tức là bạn đặt "use strict" nằm trong một hàm nào đó thì phạm vi ảnh hưởng chỉ nằm trong hàm đó mà thôi.

Strict mode toàn cục

Trong ví dụ này chương trình chạy bị sẽ bị sai vì biến domain chưa được khởi tạo. Tuy nhiên nếu ta bỏ từ khóa use strict đi thì chương trình sẽ chạy bình thường.

// Phía trên cùng của file
"use strict";

// Đoạn code này lỗi vì biến domain chưa được khởi tạo
domain = "https://freetuts.net";

// In ra màn hình
document.write(domain);

Bây giờ ta thử gom đoạn code trên vào một hàm thử.

// Phía trên cùng của file
"use strict";

function show_domain(){
    // Đoạn code này lỗi vì biến domain chưa được khởi tạo
    domain = "https://freetuts.net";

    // In ra màn hình
    document.write(domain);
}

show_domain();

Chương trình vẫn bị lỗi vì ta đã khai báo tính strict mode toàn cục.

Strict mode cục bộ

Mình sẽ sử dụng lại ví dụ trên nhưng sẽ khai báo trong phạm vi của hàm.

function show_domain(){
    "use strict";    
}

// Đoạn code này không có lỗi
// Mặc dù domain chưa được khai báo nhưng vì ta đang chạy chế độ bình thường
domain = "https://freetuts.net";

// In ra màn hình
document.write(domain);

Chạy lên chương trình vẫn hoạt động bình thường. Tuy nhiên, nếu ta sử dụng một biến chưa được khai báo trong hàm đó thì chương trình sẽ không hoạt động.

function show_domain(){
    "use strict";    
    
    // Đoạn code này lỗi vì biến domain chưa được khởi tạo
    domain = "https://freetuts.net";

    // In ra màn hình
    document.write(domain);
}

show_domain();

3. Các trường hợp của use strict trong Javsacript

Bây giờ mình sẽ liệt kê ra một số trường hợp bị lỗi khi chạy ở chế độ strict mode.

Sử dụng biến chưa được định nghĩa: Bạn không thể sử dụng một biến mà chưa được định nghĩa trước đó.

"use strict";

// sai vì biến domain chưa được khởi tạo trừ trước
domain = 'freetuts.net'; 

Không chấp nhận delete biến: Bạn không thể delete các hàm, biến nếu chạy ở chế độ strict mode

"use strict";

var domain = 'freetuts.net'; 

// Sai vì không được delete
delete domain;

Định thuộc tính nghĩa hai lần: Nếu trong một Object bạn định nghĩa tên key bị trùng thì sẽ bị lỗi.

"use strict";

// Sai vì key email bị trùng
var info = {
    email : "thehalfheart@gmail.com",
    email : "freetuts.net@gmail.com"
};

Khao báo tham số bị trùng: Nếu bạn khai báo các tham số bị trùng tên thì sẽ bị lỗi

"use strict";

// Sai vì tham số domain bị trùng
function show_domain(domain, domain){
    // do some thing
}

Lỗi literals và escape với number: Bạn không được sử dụng literals và escape với kiểu number.

"use strict";

// Sai
var x = 0100;
var y = \0100;

Khai báo tên biến trùng với key: Bạn không thể khai báo tên của biến trùng với key của Javascript.

// Lỗi: Trùng hàm eval
var eval = 12;

// Lỗi: từ khóa arguments không được sử dụng làm tên biến
var arguments = 12;

// Lỗi: Từ khóa delete là khóa nên không được sử dụng làm tên biến
var delete = 123;

Ngoài ra bạn không thể đặt tên biến trùng với các từ khóa sau:

• implements
• interface
• package
• private
• protected
• public
• static
• yield

Đó là những từ khóa mà javascript chắc chắn sẽ có sử dụng trong tương lai.

Từ khóa with bị loại bỏ: Bạn không thể sử dụng từ khóa with trong chế độ strict mode.

"use strict";
let one = 1;
let two = 2;

// Sai, vì đây là chế độ strict mode
with(one) {
        document.write(one);
}

Không được khai báo biến trong lệnh eval: Eval là một hàm dùng để biên dịch một chỗi chứa mã javascript. Nếu trong chuỗi đó có chứa đoạn code khai báo biến thì sẽ bị lỗi.

"use strict";
eval("let x = 17");
document.write(x);
// Uncaught ReferenceError: x is not defined

Từ khóa this không còn là đối tượng windows nữa: Trước đây, khi bạn sử dụng this trong một hàm không phải là constructor, hoặc sử dụng this bên ngoài chương trình chính, thì con trỏ this lúc này chính là đối tượng window. Tuy nhiên, ở chế độ strict mode thì this sẽ mang giá trị undefined.

"use strict";
function myFunction() {
  console.log(this); // Kêt quả: undefined
}
myFunction();

Nếu không sử dụng use strict thì kết quả sẽ là window:

function myFunction() {
    console.log(this); // Kêt quả: Window
}
myFunction();

4. Strict mode luôn được kích hoạt trong module

Từ khi ES6 ra đời thì xuất hiện thêm khái niệm module. Module ra đời giúp lập trình viên có cách tổ chức cho cấu trúc của ứng dụng trở nên chuyên nghiệp hơn. Mỗi module sẽ là tập hợp những biến, hàm, lớp có liên quan với nhau, và nó cho phép các module khác sử dụng tài nguyên thông qua từ khóa export và import.

Điều đặc biệt là chế độ strict mode luôn được bật trong module, vì vậy hãy tập thói quen code cho thật cẩn thận nhé.

<script type="module">
    alert(a); // Sai, vì biến a chưa được định nghĩa
</script>

5. Lời kết

Qua bài này bạn sẽ không còn thắc mắc về từ khóa use strict trong js nữa phải không nào? Đây là chế độ biên dịch rất nghiêm túc, là xu hướng lập trình javascript tương lai. Vì vậy, bạn nên tập thói quen code theo chuẩn của javascript nhé.