1. ECMAScript Là Gì?
ECMAScript (ES) là tiêu chuẩn cho ngôn ngữ kịch bản, được ECMA International xác định. Nó quy định cú pháp, kiểu dữ liệu, câu lệnh, từ khóa, từ được giữ lại, toán tử, và các đối tượng cơ bản khác. Tiêu chuẩn ECMAScript thường xuyên được cập nhật, với phiên bản mới nhất là ECMAScript 2023 (ES14).
2. JavaScript Là Gì?
JavaScript là một ngôn ngữ lập trình dựa trên tiêu chuẩn ECMAScript. Nó không chỉ thực hiện các tính năng cốt lõi của ECMAScript mà còn mở rộng nhiều tính năng khác như thao tác DOM, xử lý sự kiện, AJAX, v.v. Do đó, JavaScript có thể được coi là một thực hiện của ECMAScript.
3. Sự Khác Nhau Chính
a. Tiêu Chuẩn và Thực Hiện
- ECMAScript: Là một tiêu chuẩn ngôn ngữ, định nghĩa các đặc tính cơ bản.
- JavaScript: Là một thực hiện của ECMAScript, bao gồm các tính năng chạy trong trình duyệt và môi trường khác.
b. Cập Nhật Phiên Bản
ECMAScript phát hành một phiên bản mới mỗi năm, thêm các tính năng và chức năng mới. Ví dụ, ES6 (2015) giới thiệu các hàm mũi tên, lớp, mô-đun, v.v., trong khi việc thực hiện JavaScript có thể thay đổi tùy thuộc vào cập nhật của trình duyệt.
c. Môi Trường Chạy
- ECMAScript: Là một tiêu chuẩn ngôn ngữ, không phụ thuộc vào môi trường cụ thể.
- JavaScript: Thường chạy trong trình duyệt, nhưng cũng có thể chạy trong Node.js và các môi trường khác, với API phong phú hơn.
4. Phân Tích Ví Dụ
Trong phần này, chúng ta sẽ xem xét các ví dụ mã cụ thể để hiểu rõ sự khác biệt giữa ECMAScript và JavaScript, đặc biệt là cách sử dụng các tính năng mới của ECMAScript để cải thiện chức năng và độ dễ đọc của JavaScript.
Ví Dụ 1: Hàm Mũi Tên
Hàm mũi tên được giới thiệu trong ECMAScript 6 (ES6)
Hàm mũi tên là một cú pháp ngắn gọn cho hàm biểu thức, làm cho mã trở nên ngắn gọn và trực quan hơn, đặc biệt là khi xử lý this keyword.
// Hàm truyền thống
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // Kết quả: 5
// Sử dụng hàm mũi tên
const addArrow = (a, b) => a + b;
console.log(addArrow(2, 3)); // Kết quả: 5
Trong ví dụ này, cú pháp hàm mũi tên ngắn gọn hơn, không cần function keyword và dấu ngoặc nhọn. Đặc biệt, hàm mũi tên không tạo ra ngữ cảnh this riêng, mà kế thừa từ ngữ cảnh bên ngoài, điều này rất hữu ích khi xử lý hàm callback.
function Counter() {
this.count = 0;
setInterval(() => {
this.count++; // `this` trỏ đến instance của Counter
console.log(this.count);
}, 1000);
}
const counter = new Counter(); // In giá trị count tăng dần mỗi giây
Trong ví dụ này, sử dụng hàm mũi tên đảm bảo this trỏ đến instance của Counter, trong khi hàm truyền thống có thể dẫn đến this trỏ đến đối tượng toàn cục hoặc undefined.
Ví Dụ 2: Định Nghĩa Lớp
Lớp trong ES6
ES6 giới thiệu khái niệm lớp, làm cho lập trình hướng đối tượng trong JavaScript trở nên rõ ràng và dễ hiểu hơn. Cú pháp lớp giúp tạo và kế thừa đối tượng trở nên trực quan hơn.
// Sử dụng hàm constructor để tạo đối tượng
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const john = new Person('John');
john.greet(); // Kết quả: Hello, my name is John
So với hàm constructor truyền thống, sử dụng cú pháp lớp của ES6 giúp định nghĩa hàm constructor và phương thức rõ ràng hơn:
// Định nghĩa lớp trong ES6
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const john = new Person('John');
john.greet(); // Kết quả: Hello, my name is John
Trong ví dụ này, cấu trúc mã trở nên rõ ràng và dễ bảo trì. Đồng thời, kế thừa lớp cũng trở nên đơn giản hơn:
class Employee extends Person {
constructor(name, position) {
super(name); // Gọi hàm constructor của lớp cha
this.position = position;
}
describe() {
console.log(`I am ${this.name} and I work as a ${this.position}.`);
}
}
const jane = new Employee('Jane', 'Developer');
jane.greet(); // Kết quả: Hello, my name is Jane
jane.describe(); // Kết quả: I am Jane and I work as a Developer.
Trong ví dụ này, lớp Employee kế thừa các thuộc tính và phương thức từ lớp Person, minh họa tính năng kế thừa trong ES6, giúp mã trở nên mô-đun và tái sử dụng.
Ví Dụ 3: Chuỗi Mẫu
Chuỗi mẫu được giới thiệu trong ES6
Chuỗi mẫu là một cách mới để biểu diễn chuỗi, cho phép chèn các biểu thức vào chuỗi, làm tăng độ dễ đọc và bảo trì của chuỗi.
const name = 'John';
const age = 30;
// Nối chuỗi truyền thống
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting); // Kết quả: Hello, my name is John and I am 30 years old.
// Sử dụng chuỗi mẫu
const greetingTemplate = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greetingTemplate); // Kết quả: Hello, my name is John and I am 30 years old.
Chuỗi mẫu không chỉ làm cho nối chuỗi ngắn gọn hơn, mà còn hỗ trợ viết chuỗi đa dòng:
const message = `This is a message
that spans multiple lines.`;
console.log(message);
Ví Dụ 4: Gán Giải Quyết
Gán giải quyết được giới thiệu trong ES6
Gán giải quyết là một cú pháp cho phép trích xuất giá trị từ mảng hoặc đối tượng, làm cho mã trở nên ngắn gọn hơn.
// Gán giải quyết mảng
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // Kết quả: 1 2 3
// Gán giải quyết đối tượng
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name, age); // Kết quả: John 30
Gán giải quyết làm cho việc trích xuất thông tin từ cấu trúc dữ liệu phức tạp trở nên trực quan và ngắn gọn, giảm thiểu sự lặp lại trong mã.
Qua các ví dụ trên, chúng ta thấy rằng các tính năng mới của ECMAScript đã được thực hiện trong JavaScript, nâng cao khả năng đọc và bảo trì mã. Hiểu rõ các tính năng này không chỉ giúp chúng ta sử dụng JavaScript hiệu quả hơn, mà còn giúp viết mã hiện đại và hiệu quả hơn.