Hướng dẫn what are objects and classes in javascript? - đối tượng và lớp trong javascript là gì?

Các lớp và nhà xây dựng

Bạn có thể khai báo một lớp bằng từ khóa class. Đây là một tuyên bố lớp cho Person của chúng tôi từ bài viết trước:

class Person {

  name;

  constructor(name) {
    this.name = name;
  }

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}`);
  }

}

Điều này tuyên bố một lớp gọi là Person, với:

• một tài sản

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  1.
• một hàm tạo có tham số

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  1 được sử dụng để khởi tạo thuộc tính

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  1 của đối tượng mới
• Một phương thức

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  4 có thể tham khảo các thuộc tính của đối tượng bằng cách sử dụng

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  5.

Tuyên bố

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

Bạn cũng có thể khởi tạo thuộc tính thành giá trị mặc định khi bạn khai báo nó, với một dòng như

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

Hàm tạo được xác định bằng cách sử dụng từ khóa

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

• Tạo một đối tượng mới
• Liên kết

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  5 với đối tượng mới, vì vậy bạn có thể tham khảo

  const giles = new Person('Giles');
  
  giles.introduceSelf(); // Hi! I'm Giles
  

  5 trong mã constructor của mình
• Chạy mã trong hàm tạo
• Trả về đối tượng mới.

Đưa ra mã khai báo lớp ở trên, bạn có thể tạo và sử dụng một thể hiện mới như thế này:

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

Lưu ý rằng chúng tôi gọi hàm tạo bằng tên của lớp, Person trong ví dụ này.

Bỏ qua các nhà xây dựng

Nếu bạn không cần thực hiện bất kỳ khởi tạo đặc biệt nào, bạn có thể bỏ qua hàm tạo và hàm tạo mặc định sẽ được tạo cho bạn:

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

Di sản

Với lớp Person của chúng tôi ở trên, hãy xác định lớp con

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

class Professor extends Person {

  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

Chúng tôi sử dụng từ khóa

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

Lớp

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

Vì chúng tôi muốn đặt

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

class Professor extends Person {

  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

class Animal {

  sleep() {
    console.log('zzzzzzz');
  }

}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

Lưu ý: Nếu một lớp con có bất kỳ khởi tạo riêng nào của mình, trước tiên nó phải gọi hàm tạo siêu lớp bằng cách sử dụng

class Professor extends Person {

  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

class Professor extends Person {

  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

Chúng tôi cũng đã ghi đè phương thức

const giles = new Person('Giles');

giles.introduceSelf(); // Hi! I'm Giles

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

Với tuyên bố này, bây giờ chúng tôi có thể tạo và sử dụng các giáo sư:

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

Đóng gói

Cuối cùng, chúng ta hãy xem cách thực hiện đóng gói trong JavaScript. Trong bài viết cuối cùng, chúng tôi đã thảo luận về cách chúng tôi muốn tạo thuộc tính

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

Đây là một tuyên bố của lớp

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

class Student extends Person {

  #year;

  constructor(name, year) {
    super(name);
    this.#year = year;
  }


  introduceSelf() {
    console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
  }

  canStudyArchery() {
    return this.#year > 1;
  }

}

Trong khai báo lớp này,

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const walsh = new Professor('Walsh', 'Psychology');
walsh.introduceSelf();  // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade('my paper'); // some random grade

const summers = new Student('Summers', 2);

summers.introduceSelf(); // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery(); // true

summers.#year; // SyntaxError

Thuộc tính dữ liệu riêng tư phải được khai báo trong khai báo lớp và tên của chúng bắt đầu bằng

class Student extends Person {

  #year;

  constructor(name, year) {
    super(name);
    this.#year = year;
  }


  introduceSelf() {
    console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
  }

  canStudyArchery() {
    return this.#year > 1;
  }

}

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

Bạn có thể có các phương thức riêng tư cũng như các thuộc tính dữ liệu riêng tư. Giống như các thuộc tính dữ liệu riêng tư, tên của chúng bắt đầu bằng

class Student extends Person {

  #year;

  constructor(name, year) {
    super(name);
    this.#year = year;
  }


  introduceSelf() {
    console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
  }

  canStudyArchery() {
    return this.#year > 1;
  }

}

class Example {
  somePublicMethod() {
    this.#somePrivateMethod();
  }

  #somePrivateMethod() {
    console.log('You called me?');
  }
}

const myExample = new Example();

myExample.somePublicMethod(); // 'You called me?'

myExample.#somePrivateMethod(); // SyntaxError

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục-xem Kiểm tra kỹ năng của bạn: JavaScript hướng đối tượng.

Bản tóm tắt

Trong bài viết này, chúng tôi đã trải qua các công cụ chính có sẵn trong JavaScript để viết các chương trình hướng đối tượng. Chúng tôi đã không bao gồm tất cả mọi thứ ở đây, nhưng điều này là đủ để bạn bắt đầu. Bài viết của chúng tôi về các lớp học là một nơi tốt để tìm hiểu thêm.

• Trước
• Tổng quan: Đối tượng
• Tiếp theo

Trong mô -đun này