Các đối tượng JS ES6

1. Các định nghĩa

Trong JavaScript, hầu hết mọi thứ đều là đối tượng, chúng là king.
  • Các Boolean có thể là đối tượng (nếu được xác định bằng từ khóa new)
  • Các Number có thể là đối tượng (nếu được xác định bằng từ khóa new)
  • Các String có thể là đối tượng (nếu được xác định bằng từ khóa new)
  • Các Date luôn luôn là đối tượng
  • Các Math luôn luôn là đối tượng
  • Các Regular expression luôn luôn là đối tượng
  • Các Array luôn luôn là đối tượng
  • Các Function luôn luôn là đối tượng
Tất cả các giá trị JavaScript, trừ các primitive, là đối tượng.

JavaScript định nghĩa 5 loại kiểu dữ liệu primitive:
  • string
  • number
  • boolean
  • null
  • undefined

2. Các thuộc tính

Thuộc tính là các giá trị được liên kết với một đối tượng JavaScript, nó là một tập hợp các thuộc tính không có thứ tự. Các thuộc tính thường có thể được thay đổi, thêm và xóa, nhưng một số chỉ được đọc.

Cú pháp để truy cập thuộc tính của một đối tượng là:

objectName.property // person.age

hoặc

objectName["property"] // person["age"]

hoặc

objectName[expression] // x = "age"; person[x]

3. Các phương thức

Các phương thức JavaScript là các hành động có thể được thực hiện trên các đối tượng. Một phương thức JavaScript là thuộc tính chứa định nghĩa hàm.

Cú pháp truy cập một phương thức đối tượng:

objectName.methodName()

Ví dụ:

name = person.fullName();

Khi truy cập thuộc tính fullName, không có (), nó sẽ trả về định nghĩa hàm:

ví dụ:

name = person.fullName;

Từ khóa "this", trong một định nghĩa hàm, nó đề cập đến "chủ sở hữu" của hàm.

4. Các trình truy cập

+ Getter (Từ khóa get)

Ví dụ sử dụng thuộc tính lang để lấy giá trị của thuộc tính ngôn ngữ:

// Tạo một đối tượng:
var person = {firstName: "Nguyễn", lastName : "Trang", language : "vn", get lang() {return this.language;}};

// Hiển thị dữ liệu từ đối tượng bằng getter:
document.getElementById("demo").innerHTML = person.lang;

+ Setter (Từ khóa set)

Ví dụ sử dụng thuộc tính lang để đặt giá trị của thuộc tính ngôn ngữ:

var person = {firstName: "Nguyễn", lastName : "Trang", language : "", set lang(lang) {this.language = lang;}};

// Đặt thuộc tính đối tượng bằng cách sử dụng setter:

person.lang = "vn";

// Hiển thị dữ liệu từ đối tượng:

document.getElementById("demo").innerHTML = person.language;

5. Các trình xây dựng

Ví dụ:

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}

Lưu ý: Thực hành tốt là đặt tên hàm xây dựng với một chữ cái đầu tiên viết hoa.

+ Thêm một thuộc tính vào trình xây dựng

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "Việt Nam";
}

+ Thêm một thương thức vào trình xây dựng

function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {this.lastName = name;};
}

6. Các nguyên mẫu

Tất cả các đối tượng JavaScript kế thừa các thuộc tính và phương thức từ một nguyên mẫu.

Đối tượng Date kế thừa từ Date.prototype. Các đối tượng Array kế thừa từ Array.prototype. Đối tượng Person kế thừa từ Person.prototype.

Object.prototype nằm trên đầu chuỗi kế thừa nguyên mẫu: Các đối tượng Date, Array, Person kế thừa từ Object.prototype.

Sử dụng thuộc tính prototype

+ Thuộc tính nguyên mẫu JavaScript cho phép thêm các thuộc tính mới cho trình xây dựng đối tượng:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}

Person.prototype.nationality = "Việt Nam";

+ Thuộc tính nguyên mẫu JavaScript cho phép thêm các phương thức mới cho trình xây dựng đối tượng:

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}

Person.prototype.name = function() { return this.firstName + " " + this.lastName;};

7. Các tính năng mới

Một số tính năng mới trong ES6:
  • Câu lệnh let
  • Câu lệnh const
  • Toán tử exponentiation (**)
  • Giá trị tham số mặc định
  • Array.find()
  • Array.findIndex()