Lập trình hướng đối tượng trong JavaScript

Phần lớn những gì bạn làm khi viết phần mềm là tạo và kết nối nhiều giá trị và phương thức hoạt động cùng nhau để cung cấp chức năng cho ứng dụng của bạn. Lập trình hướng đối tượng giúp bạn đạt được và thực hiện điều này một cách dễ dàng và khai báo hơn nhiều

Trong bài viết này, bạn sẽ tìm hiểu mọi thứ bạn cần biết để bắt đầu sử dụng các lớp và phương pháp lập trình hướng đối tượng trong JavaScript

Hãy xem xét những gì bạn cần để tận dụng tối đa bài viết này

điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn cần có kiến ​​thức cơ bản về JavaScript

Lập trình hướng đối tượng

Lập trình hướng đối tượng [OOP] là một mô hình lập trình được các nhà phát triển sử dụng để cấu trúc các ứng dụng phần mềm thành các đoạn mã và bản thiết kế có thể tái sử dụng bằng cách sử dụng các đối tượng. OOP được sử dụng hàng ngày trong các dự án lớn, phức tạp và được bảo trì tích cực

OOP giúp việc tạo và quản lý nhiều phần trong ứng dụng của bạn trở nên dễ dàng hơn và kết nối chúng mà không khiến chúng phụ thuộc vào nhau. Tiếp theo, hãy xem xét bốn khái niệm chính của OOP

trừu tượng

Trừu tượng hóa trong OOP là quá trình chỉ hiển thị các chức năng cần thiết cho người dùng trong khi ẩn các hoạt động phức tạp bên trong để làm cho chương trình dễ sử dụng và dễ hiểu hơn

Ví dụ: khi bạn gửi tin nhắn trên điện thoại, tất cả các chức năng và logic định tuyến tin nhắn của bạn đến người khác sẽ bị ẩn vì bạn không cần biết chúng hoặc cách chúng hoạt động

Tương tự như vậy, trong lập trình, nếu bạn đang xây dựng một API giúp các ứng dụng tài chính xác minh danh tính người dùng và thông tin ngân hàng, thì các nhà phát triển sử dụng API của bạn không cần biết bạn sử dụng hệ thống cơ sở dữ liệu nào hoặc cách bạn gọi cơ sở dữ liệu của mình. Tất cả những gì họ cần biết là chức năng họ cần gọi và những thông số họ cần cung cấp

Tính trừu tượng giúp giảm độ phức tạp, tăng khả năng sử dụng và làm cho các thay đổi đối với ứng dụng ít gây gián đoạn hơn

đóng gói

Đóng gói là quá trình gói mã liên quan vào một đơn vị duy nhất. Đóng gói làm cho các phần khác của mã không thể thao tác hoặc thay đổi cách thức hoạt động của phần được đóng gói của ứng dụng trừ khi bạn đi vào đơn vị đó một cách rõ ràng và thay đổi chúng

Ví dụ: nếu bạn đang xây dựng API đặt vé máy bay, bạn nên tách mã tìm kiếm chuyến bay khỏi mã đặt chuyến bay. Bằng cách này, hai nhà phát triển khác nhau có thể làm việc liền mạch trên từng phần mà không có xung đột vì mỗi nhà phát triển sẽ không có lý do gì để thao túng trực tiếp mã của người kia

Đóng gói giúp bạn giảm độ phức tạp và tăng khả năng sử dụng lại mã

Di sản

Tính kế thừa trong OOP giúp giảm trùng lặp mã, cho phép bạn xây dựng một phần ứng dụng của mình trên ứng dụng khác bằng cách kế thừa các thuộc tính và phương thức từ phần đó của ứng dụng

Ví dụ: khi xây dựng một ứng dụng giao hàng thương mại điện tử với nhiều loại phương tiện, các lớp

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

6 và

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

7 có thể kế thừa các hàm

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

8 và

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

9 từ lớp

console.log[job[role]]; // returns 'Software Engineer'

0. Các lớp sẽ được giải thích chi tiết hơn sau trong bài viết

Một lợi thế đáng kể của tính kế thừa trong OOP là giảm trùng lặp mã

đa hình

Trong lập trình, tính đa hình là một thuật ngữ dùng để mô tả một đoạn mã hoặc chương trình có thể xử lý nhiều loại dữ liệu bằng cách trả về phản hồi hoặc kết quả dựa trên dữ liệu đã cho.

Ví dụ: bạn có một biểu mẫu được sử dụng để thêm sản phẩm vào danh mục sản phẩm và ba loại sản phẩm khác nhau. Với tính đa hình, bạn có thể tạo một phương thức lớp duy nhất để định dạng tất cả các loại sản phẩm trước khi thêm chúng vào cơ sở dữ liệu

Tính đa hình giúp bạn loại bỏ các câu lệnh

console.log[job[role]]; // returns 'Software Engineer'

1 và

console.log[job[role]]; // returns 'Software Engineer'

2 phức tạp và không cần thiết, vì chúng có thể trở nên dài dòng khi viết các chương trình phức tạp

Hãy xem xét các đối tượng JavaScript trong phần tiếp theo

Đối tượng JavaScript

Một đối tượng trong JavaScript là một tập hợp các cặp khóa-giá trị không theo thứ tự, còn được gọi là thuộc tính và giá trị. Các khóa đối tượng có thể là một giá trị chuỗi, trong khi các giá trị có thể là bất kỳ loại nào. Dưới đây là một số ví dụ

• Sợi dây
• Con số
• Boolean
• Mảng
• Chức năng

Tiếp theo, hãy xem cách tạo đối tượng trong JavaScript

Tạo đối tượng

Tạo một đối tượng trong JavaScript khá dễ dàng

const car = {
    name: 'Ford',
    year: 2015,
    color: 'red',
    description: function [] {
    return `${this.name} - ${this.year} - ${this.color}`;
    }
} 

Đoạn mã trên khai báo một đối tượng

console.log[job[role]]; // returns 'Software Engineer'

3 với các thuộc tính của nó là

console.log[job[role]]; // returns 'Software Engineer'

4,

console.log[job[role]]; // returns 'Software Engineer'

5,

console.log[job[role]]; // returns 'Software Engineer'

6 và một hàm

console.log[job[role]]; // returns 'Software Engineer'

7

Truy cập thuộc tính đối tượng

Có hai cách để truy cập thuộc tính đối tượng trong JavaScript;

Sử dụng ký hiệu dấu chấm

Ví dụ sau đây cho thấy cách truy cập các thuộc tính đối tượng bằng cách sử dụng ký hiệu dấu chấm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

Nếu bạn có một đối tượng giống như đối tượng được hiển thị ở trên, bạn có thể sử dụng định dạng

console.log[job[role]]; // returns 'Software Engineer'

8, định dạng này sẽ trả về giá trị của khóa đã cho

console.log[country.name]; // returns 'Spain'

Sử dụng ký hiệu mảng

Ví dụ sau đây cho thấy cách truy cập các thuộc tính đối tượng bằng cách sử dụng ký hiệu mảng

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

Nếu bạn có một đối tượng như ở trên, bạn có thể sử dụng định dạng

console.log[job[role]]; // returns 'Software Engineer'

9 sẽ trả về giá trị của khóa đã cho

console.log[job[role]]; // returns 'Software Engineer'

Ngoài ra, bạn chỉ có thể truy cập thuộc tính

console.log[job.'salary']; // SyntaxError: Unexpected string

0 bằng cách sử dụng ký hiệu mảng. Cố gắng lấy nó bằng ký hiệu dấu chấm sẽ trả về lỗi

console.log[job.'salary']; // SyntaxError: Unexpected string

Tiếp theo, hãy xem cách sửa đổi thuộc tính đối tượng

Sửa đổi thuộc tính đối tượng

Bạn có thể tự động thêm, chỉnh sửa và xóa các thuộc tính của đối tượng trong JavaScript

Chỉnh sửa thuộc tính

Bạn có thể sử dụng toán tử gán

console.log[job.'salary']; // SyntaxError: Unexpected string

1 để sửa đổi các giá trị đối tượng. Đây là một ví dụ

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

Bạn cũng có thể thay đổi giá trị của

console.log[job[role]]; // returns 'Software Engineer'

4 trong đối tượng trên

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

Thêm thuộc tính mới

Một trong những điểm khác biệt đáng kể giữa đối tượng trong các ngôn ngữ khác và đối tượng trong JavaScript là khả năng thêm thuộc tính mới vào đối tượng sau khi tạo

Để thêm thuộc tính mới vào đối tượng, bạn sử dụng ký hiệu dấu chấm

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

Đoạn mã trên thêm một thuộc tính

console.log[job.'salary']; // SyntaxError: Unexpected string

3 mới với giá trị "Asian"

Xóa thuộc tính đối tượng

JavaScript cho phép bạn xóa các thuộc tính khỏi một đối tượng bằng cách sử dụng từ khóa

console.log[job.'salary']; // SyntaxError: Unexpected string

4

delete person.race;
console.log[person.race]; // returns 'undefined'

Đoạn mã trên xóa thuộc tính

console.log[job.'salary']; // SyntaxError: Unexpected string

3 và truy cập thuộc tính

console.log[job.'salary']; // SyntaxError: Unexpected string

3 sẽ trả về không xác định

Ghi chú. Bạn chỉ có thể xóa các thuộc tính đối tượng hiện có

Kiểm tra thuộc tính

Trước khi thêm hoặc xóa các thuộc tính khỏi một đối tượng, bạn nên xác định xem thuộc tính đó có tồn tại trên đối tượng hay không. Kiểm tra có vẻ đơn giản này sẽ giúp bạn tiết kiệm hàng giờ để gỡ lỗi do các giá trị trùng lặp gây ra

Để xác định xem một thuộc tính có tồn tại trên một đối tượng hay không, bạn có thể sử dụng từ khóa

console.log[job.'salary']; // SyntaxError: Unexpected string

7

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

0

Đoạn mã trên trả về

console.log[job.'salary']; // SyntaxError: Unexpected string

8 cho tên kiểm tra vì tên tồn tại và

console.log[job.'salary']; // SyntaxError: Unexpected string

9 cho thuộc tính

console.log[job.'salary']; // SyntaxError: Unexpected string

3 đã bị xóa

Bây giờ bạn đã biết đối tượng là gì và cách sử dụng chúng, hãy thực hiện bước tiếp theo với OOP trong JavaScript bằng cách tìm hiểu về các lớp

Các lớp học

Trong lập trình, một lớp là một cấu trúc được định nghĩa bởi một lập trình viên, sau đó được sử dụng để tạo nhiều đối tượng cùng loại. Ví dụ: nếu bạn đang xây dựng một ứng dụng xử lý nhiều loại ô tô khác nhau, bạn có thể tạo một lớp

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

6 có các chức năng và thuộc tính thiết yếu áp dụng cho tất cả các loại ô tô. Sau đó, bạn có thể sử dụng lớp này để tạo các ô tô khác và thêm các thuộc tính và phương thức dành riêng cho từng phương tiện cho chúng

Để mở rộng các đối tượng bạn đã thấy trong ví dụ trước, nếu bạn muốn tạo một đối tượng công việc khác, bạn sẽ cần tạo một đối tượng như thế này

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

1

Tuy nhiên, như bạn có thể thấy, cách tạo nhiều đối tượng ở trên dễ bị lỗi và không thể mở rộng vì bạn không thể tạo 100 đối tượng công việc bằng cách viết ra mỗi khi bạn cần tạo công việc. Đây là nơi các lớp học có ích

Tạo lớp học

Bạn có thể tạo một lớp

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

2 để đơn giản hóa việc tạo nhiều công việc

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

2

Đoạn mã trên tạo một lớp

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

2 với các thuộc tính

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

4,

console.log[job.'salary']; // SyntaxError: Unexpected string

0,

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

6 và

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

7. Bây giờ bạn có thể tạo các công việc khác nhau bằng cách sử dụng từ khóa

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

8

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

3

Đoạn mã trên tạo ra hai công việc khác nhau với tất cả các trường bắt buộc. Hãy xem cách này có hiệu quả không bằng cách in cả hai lệnh ra trong bảng điều khiển

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

4

Đoạn mã trên sẽ in ra cả hai công việc trong bảng điều khiển

Hình ảnh hiển thị cả hai công việc và tất cả thuộc tính của chúng trong bảng điều khiển

Từ khóa

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

9

Từ khóa

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

9 được coi là từ khóa khó hiểu nhất trong JavaScript vì nó có nghĩa khác nhau tùy thuộc vào vị trí xuất hiện trong mã của bạn

Trong ví dụ trên, từ khóa

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

9 đề cập đến bất kỳ đối tượng nào được tạo bằng lớp

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

2. Do đó, bên trong phương thức

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

3,

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

4 có nghĩa là "xác định thuộc tính

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

4 của đối tượng này mà bạn đang tạo dưới dạng bất kỳ giá trị nào được cung cấp cho hàm tạo"

Ngoài ra, lưu ý rằng các giá trị ban đầu bạn cung cấp phải theo thứ tự khi tạo một đối tượng Công việc mới. Ví dụ bạn tạo một đối tượng

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

6 như vậy

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

5

Đoạn mã trên tạo một đối tượng

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

6 mới với thứ tự sai của các thuộc tính và thiếu thuộc tính

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

7. Bạn sẽ nhận được một cái gì đó như thế này trong bảng điều khiển

Hình ảnh trên cho thấy đối tượng

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

6 sẽ trông như thế nào khi được in ra trong bảng điều khiển. Lưu ý rằng

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

7 là

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

1

Trong phần tiếp theo, hãy xem cách thêm phương thức vào lớp

phương pháp lớp

Khi tạo lớp, bạn có thể thêm bao nhiêu thuộc tính tùy thích. Ví dụ: nếu bạn có một lớp

console.log[job[role]]; // returns 'Software Engineer'

0, ngoài các thuộc tính cơ bản như

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

3,

console.log[job[role]]; // returns 'Software Engineer'

6,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

5 và

console.log[job[role]]; // returns 'Software Engineer'

5, bạn có thể cũng muốn có các phương thức như

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

7,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

8,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

9 và

delete person.race;
console.log[person.race]; // returns 'undefined'

0

Để thêm các phương thức bên trong các lớp, bạn có thể thêm chúng sau hàm

person.name = "Smith Doe";
console.log[person.name]; // returns "Smith Doe"

3

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

6

Đoạn mã trên định nghĩa một lớp Xe với các thuộc tính

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

3,

console.log[job[role]]; // returns 'Software Engineer'

6,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

5 và

console.log[job[role]]; // returns 'Software Engineer'

5, cũng như các phương thức

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

7,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

8,

// adding a new `race` property
person.race = "Asian";
console.log[person.race]; // returns "Asian"

9 và

delete person.race;
console.log[person.race]; // returns 'undefined'

0

Để chạy các phương thức trên đối tượng, bạn có thể sử dụng ký hiệu dấu chấm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

7

Đoạn mã trên tạo ra hai loại phương tiện sử dụng lớp

console.log[job[role]]; // returns 'Software Engineer'

0 và chạy các phương thức của lớp trên chúng

Hãy xem xét các thuộc tính được tính toán trong phần tiếp theo

Thuộc tính được tính toán

Lập trình phần lớn phụ thuộc vào việc thay đổi giá trị, vì vậy tương tự như cách bạn không muốn mã hóa cứng hầu hết các giá trị của thuộc tính lớp, bạn có thể có một số tên thuộc tính động thay đổi dựa trên một số giá trị. Bạn có thể sử dụng các thuộc tính được tính toán để làm điều đó;

Ví dụ: khi tạo API danh sách việc làm, bạn có thể muốn nhà phát triển có thể thay đổi tên hàm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

01 thành một từ khác, chẳng hạn như

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

02 hoặc

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

03, tùy thuộc vào nền tảng của họ. Để sử dụng các thuộc tính được tính toán, bạn cần đặt tên thuộc tính trong dấu ngoặc vuông

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

8

Đoạn mã trên khai báo biến

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

01 với giá trị chuỗi là

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

05 và một phương thức tính toán

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

06 có thể được gọi là

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

07

Các thuộc tính được tính toán giúp các nhà phát triển khác tùy chỉnh mã của họ dễ dàng hơn

Getters và Setters

Khi viết mã trong một nhóm, bạn muốn giới hạn những người có thể thay đổi một số phần nhất định của cơ sở mã để tránh lỗi. Nên ẩn một số biến và thuộc tính nhất định trong OOP khi cần thiết

Tiếp theo, hãy tìm hiểu cách thức hoạt động của các từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

08 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09

Getters

Khi xây dựng ứng dụng quan tâm đến việc đảm bảo quyền riêng tư của người dùng, chẳng hạn như ứng dụng quản lý các vấn đề pháp lý, bạn muốn kiểm soát ai có thể truy cập dữ liệu của người dùng như tên, email và địa chỉ. Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

08 giúp bạn đạt được điều này. Bạn có thể giới hạn những người có thể truy cập thông tin

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

9

Đoạn mã trên khai báo một lớp Client với các thuộc tính

console.log[job[role]]; // returns 'Software Engineer'

4 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

12 và một getter chỉ trả về tên nếu người dùng là Luật sư. Nếu cố truy cập vào tên đó với tư cách Trợ lý, bạn sẽ gặp lỗi

console.log[country.name]; // returns 'Spain'

0

Ghi chú.

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

13 được đổi thành

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

14 để tránh xung đột đặt tên

Hãy tìm hiểu về setters tiếp theo

người định cư

Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09 ngược lại với từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

08. Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

08 được sử dụng để kiểm soát ai có thể truy cập thuộc tính, trong khi từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09 kiểm soát ai có thể thay đổi giá trị của thuộc tính

Để tìm hiểu cách thức hoạt động của từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09, hãy mở rộng ví dụ trước bằng cách thêm một setter

console.log[country.name]; // returns 'Spain'

1

Đoạn mã trên khai báo một phương thức

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09 chỉ cho phép thay đổi tên nếu người dùng là Luật sư và các tài liệu đã được xác minh

console.log[country.name]; // returns 'Spain'

2

Ghi chú. Các phương thức có tiền tố là các phương thức

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

08 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

09 được gọi lần lượt là các hàm getter và setter

Tiếp theo, chúng ta hãy xem các thuộc tính và phương thức tĩnh

Giá trị tĩnh

Đôi khi bạn muốn tạo các thuộc tính và phương thức được liên kết với các lớp chứ không phải các thể hiện của lớp. Ví dụ: bạn có thể muốn một thuộc tính đếm số lượng máy khách trong cơ sở dữ liệu, nhưng bạn không muốn giá trị đó bị ràng buộc với các thể hiện của lớp

Hãy xem xét các thuộc tính tĩnh tiếp theo

Thuộc tính tĩnh

Để theo dõi số lượng khách hàng trong cơ sở dữ liệu, bạn có thể sử dụng từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

23

console.log[country.name]; // returns 'Spain'

3

Đoạn mã trên khai báo một thuộc tính tĩnh

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

24 với giá trị là

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

25. Bạn có thể truy cập các thuộc tính tĩnh như thế này

console.log[country.name]; // returns 'Spain'

4

Ghi chú. Cố gắng truy cập các thuộc tính tĩnh bằng cách sử dụng

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

26 sẽ trả về không xác định vì các thuộc tính tĩnh được liên kết với lớp chứ không phải đối tượng

Tiếp theo, hãy xem xét các phương thức tĩnh

Phương thức tĩnh

Tạo các phương thức tĩnh rất giống với việc tạo các thuộc tính tĩnh vì bạn chỉ cần thêm tiền tố vào tên phương thức bằng từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

23

console.log[country.name]; // returns 'Spain'

5

Đoạn mã trên khai báo một phương thức tĩnh

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

28 làm tăng giá trị

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

24 mỗi khi nó được gọi

Các phương thức và thuộc tính tĩnh giúp dễ dàng tạo các hàm trợ giúp và tiện ích có thể được sử dụng trực tiếp trên lớp chứ không phải các phiên bản

Giá trị riêng tư

Bản cập nhật được cung cấp với sự hỗ trợ cho các giá trị riêng tư bên trong các lớp JavaScript

Các trường và phương thức riêng đưa tính đóng gói trong các lớp lên cấp độ tiếp theo vì giờ đây bạn có thể tạo các thuộc tính và phương thức chỉ có thể được sử dụng bên trong dấu ngoặc nhọn khai báo lớp và bất kỳ mã nào bên ngoài các dấu ngoặc nhọn đó sẽ không thể truy cập chúng

Tiếp theo hãy xem xét các thuộc tính riêng tư

Thuộc tính riêng tư

Bạn có thể khai báo các thuộc tính riêng tư bên trong một lớp bằng cách đặt trước biến bằng dấu

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

30. Hãy cải thiện lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

31 trong các phần bằng cách thêm một id duy nhất cho mọi khách hàng

console.log[country.name]; // returns 'Spain'

6

Đoạn mã trên đã khai báo một biến

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

32 riêng chỉ có thể được sử dụng và truy cập bên trong khai báo lớp. Cố gắng truy cập nó bên ngoài lớp sẽ trả về lỗi

console.log[country.name]; // returns 'Spain'

7

Hãy xem xét các phương pháp riêng tư tiếp theo

Phương pháp riêng tư

Như đã đề cập trước đó, các phương thức riêng tư chỉ có thể truy cập được bên trong khai báo lớp. Để tìm hiểu cách thức hoạt động của các phương thức riêng tư, chúng tôi sẽ thêm một phương thức riêng tư để tìm nạp tài liệu tệp trường hợp khách hàng từ cơ sở dữ liệu

console.log[country.name]; // returns 'Spain'

8

Mã ở trên hiện có thể được sử dụng bên trong chức năng công khai mà người dùng sẽ gọi để lấy tài liệu khách hàng. Bản chất của chức năng riêng tư là ẩn tất cả các xác thực cơ bản và các lệnh gọi tới cơ sở dữ liệu khỏi người dùng hoặc nhà phát triển sử dụng mã

Ghi chú. Bạn cũng có thể tạo các hàm tĩnh, getter và setter riêng tư

Tiếp theo, chúng ta hãy tìm hiểu cách xâu chuỗi các phương thức của lớp trong phần tiếp theo

Chuỗi phương pháp

Là một nhà phát triển, một trong những điều bạn có thể thích làm nhất là triển khai một tính năng sử dụng càng ít mã càng tốt. Bạn có thể làm điều này trong JavaScript bằng các phương thức xâu chuỗi. Ví dụ: khi người dùng đăng nhập vào ứng dụng của bạn, bạn muốn thay đổi trạng thái của người dùng thành 'trực tuyến' và khi họ đăng xuất, bạn thay đổi lại thành 'ngoại tuyến'

console.log[country.name]; // returns 'Spain'

9

Đoạn mã trên khai báo một lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

33 với các thuộc tính

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

34 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

35 và các phương thức

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

36,

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

37,

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

38 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

39. Để xâu chuỗi các phương thức, bạn có thể sử dụng ký hiệu dấu chấm

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

0

Đoạn mã trên sẽ chạy tuần tự tất cả các chức năng trên đối tượng

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

40 và trả về một phản hồi

Hình ảnh hiển thị kết quả của chuỗi phương thức

Ghi chú. Bạn cần trả về đối tượng hiện tại bằng cách trả về

const person = {
  name: "John",
  age: 30,
  job: "Software Developer",
  country: "Nigeria",
  car: "Ford",
  description: function [] {
    return `${this.name} - ${this.age} - ${this.job.role} - ${this.country.name} - ${this.car.name}`;
  },
};

9 ở cuối mỗi chức năng

Tiếp theo, hãy xem cách xây dựng trên các lớp hiện có thông qua kế thừa

Kế thừa lớp

Khi làm việc với các đối tượng, rất có thể bạn sẽ gặp phải các tình huống cần tạo một đối tượng thực sự giống với một đối tượng đã tồn tại trong mã của bạn, nhưng bạn biết rằng chúng không thể giống nhau. Ví dụ: khi xây dựng một ứng dụng thương mại điện tử, bạn sẽ có một lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

42 với các thuộc tính như

console.log[job[role]]; // returns 'Software Engineer'

4,

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

44,

console.log[job[role]]; // returns 'Software Engineer'

7, và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

46 và các phương thức như

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

47 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

48

Tuy nhiên, nếu bạn có nhiều loại sản phẩm với các thông số kỹ thuật khác nhau thì sao?

• Sách có tác giả, trọng lượng và chi tiết trang
• Nội thất với các chi tiết chiều dài, chiều rộng, chiều cao và loại gỗ
• Phim CD với kích thước, thời lượng và chi tiết nội dung

Trong trường hợp này, việc tạo một lớp cho mỗi sản phẩm sẽ dẫn đến nhiều mã trùng lặp, đây là một trong những quy tắc chính của OOP và lập trình nói chung - không lặp lại chính mình [DRY]

Kế thừa lớp cho phép bạn tạo các đối tượng dựa trên các đối tượng khác. Ví dụ: bạn có thể giải quyết vấn đề được đề cập ở trên bằng cách tạo một lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

42

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

1

Sau đó, tạo một phân lớp cho từng loại sản phẩm bằng cách sử dụng từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

50

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

2

Đoạn mã trên tuyên bố các loại sản phẩm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

51,

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

52 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

53 bằng cách mở rộng lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

42

Có hai từ khóa mới trong đoạn mã trên.

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

50 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56. Hãy xem xét chúng trong các phần tiếp theo

Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

50

Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

50 là tự giải thích; . Trong trường hợp của chúng tôi, chúng tôi đã sử dụng nó để tạo các lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

51,

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

52 và

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

53 bằng cách mở rộng lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

42

Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56

Từ khóa

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56 loại bỏ nhiều khai báo mà nếu không bạn sẽ cần phải lặp lại cho mỗi lớp con mới. Ví dụ: hàm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56 được gọi trong đoạn mã trên đã thay thế đoạn mã sau

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

3

Nhớ KHÔ?

Có thể bỏ qua hàm

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56 nếu lớp con không cần hàm tạo

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

4

Đoạn mã trên khai báo một lớp cha mẹ

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

68 và một lớp con

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

69 không cần hàm tạo để hoạt động vì nó không khai báo bất kỳ biến mới nào bên trong hàm tạo. Do đó, đoạn mã sau sẽ hoạt động

const job = {
  role: "Software Engineer",
  'salary': 200000,
  applicationLink: "meta.com/careers/SWE-role/apply",
  isRemote: true,
};

5

Đoạn mã trên sẽ hoạt động ngay cả khi không có gì giống như

console.log[job[role]]; // returns 'Software Engineer'

4,

console.log[job[role]]; // returns 'Software Engineer'

6 hoặc

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

72 bên trong lớp

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

69

Bạn không cần gọi

const country = {
    name: 'Spain',
    population: 4000000,
    description: function [] {
    return `${this.name} - ${this.population}`;
    }
}

56 hoặc lặp lại hàm tạo tương tự nếu bạn chỉ thêm các phương thức vào lớp con

Phần kết luận

Trong hướng dẫn này, bạn đã học về lập trình hướng đối tượng và các lớp trong JavaScript và cách nó giúp giữ cho mã của bạn sạch sẽ, KHÔ và có thể tái sử dụng. Chúng tôi đã đề cập đến bốn khái niệm cốt lõi của lập trình hướng đối tượng, bao gồm tính trừu tượng, tính đóng gói, tính kế thừa và tính đa hình

Bạn cũng đã học được rằng việc sử dụng các mô hình và lớp lập trình hướng đối tượng trong mã của bạn có rất nhiều lợi thế, từ việc cải thiện cấu trúc ứng dụng và khả năng sử dụng lại mã để giảm độ phức tạp của mã