Cách gọi lớp javascript trong html

Trong lập trình hướng đối tượng, một lớp là một mẫu mã chương trình có thể mở rộng để tạo các đối tượng, cung cấp các giá trị ban đầu cho trạng thái [các biến thành viên] và triển khai hành vi [các hàm hoặc phương thức thành viên]

Wikipedia

Trong thực tế, chúng ta thường cần tạo nhiều đối tượng cùng loại, chẳng hạn như người dùng, hàng hóa hoặc bất cứ thứ gì

Như chúng ta đã biết từ chương Trình xây dựng, toán tử "mới",

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

8 có thể giúp ích cho việc đó

Nhưng trong JavaScript hiện đại, có một cấu trúc “lớp” nâng cao hơn, giới thiệu các tính năng mới tuyệt vời hữu ích cho lập trình hướng đối tượng

Cú pháp cơ bản là

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

Sau đó sử dụng

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

9 để tạo một đối tượng mới với tất cả các phương thức được liệt kê

Phương thức

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

0 được gọi tự động bởi

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

1, vì vậy chúng ta có thể khởi tạo đối tượng ở đó

Ví dụ

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

Khi

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

2 được gọi

1. Một đối tượng mới được tạo

2. class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   3 chạy với đối số đã cho và gán nó cho

   class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   4

…Sau đó, chúng ta có thể gọi các phương thức đối tượng, chẳng hạn như

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

5

Không có dấu phẩy giữa các phương thức lớp

Một cạm bẫy phổ biến đối với các nhà phát triển mới làm quen là đặt dấu phẩy giữa các phương thức của lớp, điều này sẽ dẫn đến lỗi cú pháp

Ký hiệu ở đây không được nhầm lẫn với nghĩa đen của đối tượng. Trong lớp, không cần dấu phẩy

Vì vậy, chính xác thì

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6 là gì?

Hãy tiết lộ bất kỳ phép thuật nào và xem lớp học thực sự là gì. Điều đó sẽ giúp hiểu được nhiều khía cạnh phức tạp

Trong JavaScript, một lớp là một loại chức năng

Đây, hãy xem

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

Những gì cấu trúc

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

7 thực sự làm là

1. Tạo một hàm có tên là

   class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   8, trở thành kết quả của khai báo lớp. Mã chức năng được lấy từ phương thức

   class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   3 [giả sử trống nếu chúng ta không viết phương thức đó]
2. Lưu trữ các phương thức của lớp, chẳng hạn như

   class MyClass {
     // class methods
     constructor[] { .. }
     method1[] { .. }
     method2[] { .. }
     method3[] { .. }
     ...
   }

   50, trong

   class MyClass {
     // class methods
     constructor[] { .. }
     method1[] { .. }
     method2[] { .. }
     method3[] { .. }
     ...
   }

   51

Sau khi đối tượng

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

52 được tạo, khi chúng ta gọi phương thức của nó, nó được lấy từ nguyên mẫu, giống như được mô tả trong chương F. nguyên mẫu. Vì vậy, đối tượng có quyền truy cập vào các phương thức lớp

Chúng ta có thể minh họa kết quả của khai báo

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

53 như

Đây là mã để hướng nội nó

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

5

Đôi khi người ta nói rằng

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6 là một "đường cú pháp" [cú pháp được thiết kế để làm cho mọi thứ dễ đọc hơn, nhưng không giới thiệu bất cứ điều gì mới], bởi vì chúng tôi thực sự có thể khai báo cùng một điều mà không cần sử dụng từ khóa

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

2

Kết quả của định nghĩa này gần giống. Vì vậy, thực sự có những lý do tại sao

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6 có thể được coi là một đường cú pháp để định nghĩa một hàm tạo cùng với các phương thức nguyên mẫu của nó

Tuy nhiên, vẫn có những khác biệt quan trọng

1. Đầu tiên, một chức năng được tạo bởi

   class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   6 được gắn nhãn bởi một thuộc tính nội bộ đặc biệt

   class MyClass {
     // class methods
     constructor[] { .. }
     method1[] { .. }
     method2[] { .. }
     method3[] { .. }
     ...
   }

   58. Vì vậy, nó không hoàn toàn giống như tạo thủ công

   Ngôn ngữ kiểm tra thuộc tính đó ở nhiều nơi. Ví dụ, không giống như một chức năng thông thường, nó phải được gọi bằng

   class User {
     constructor[name] { this.name = name; }
     sayHi[] { alert[this.name]; }
   }
   
   // proof: User is a function
   alert[typeof User]; // function

   1

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   7

   Ngoài ra, một biểu diễn chuỗi của hàm tạo lớp trong hầu hết các công cụ JavaScript bắt đầu bằng “lớp…”

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   8

   Có những khác biệt khác, chúng ta sẽ sớm thấy chúng

2. Các phương thức lớp không thể đếm được. Một định nghĩa lớp đặt cờ

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   20 thành

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   21 cho tất cả các phương thức trong

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   22

   Điều đó tốt, bởi vì nếu chúng ta

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   23 trên một đối tượng, chúng ta thường không muốn các phương thức lớp của nó

3. Lớp học luôn luôn

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   24. Tất cả mã bên trong cấu trúc lớp sẽ tự động ở chế độ nghiêm ngặt

Ngoài ra, cú pháp

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6 còn mang đến nhiều tính năng khác mà chúng ta sẽ khám phá sau

Cũng giống như các hàm, các lớp có thể được định nghĩa bên trong một biểu thức khác, được chuyển qua, trả về, được gán, v.v.

Đây là một ví dụ về một biểu thức lớp

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

5

Tương tự như Biểu thức hàm được đặt tên, biểu thức lớp có thể có tên

Nếu một biểu thức lớp có tên, nó chỉ hiển thị bên trong lớp

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

6

Chúng tôi thậm chí có thể tạo các lớp động "theo yêu cầu", như thế này

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

7

Giống như các đối tượng theo nghĩa đen, các lớp có thể bao gồm getters/setters, các thuộc tính được tính toán, v.v.

Đây là một ví dụ cho

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

26 được triển khai bằng cách sử dụng

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

27

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

0

Về mặt kỹ thuật, khai báo lớp như vậy hoạt động bằng cách tạo getters và setters trong

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

51

Đây là một ví dụ với tên phương thức được tính toán sử dụng dấu ngoặc đơn

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

29

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

1

Các tính năng như vậy rất dễ nhớ, vì chúng giống với các đối tượng theo nghĩa đen

Các trình duyệt cũ có thể cần một polyfill

Các trường lớp là một bổ sung gần đây cho ngôn ngữ

Trước đây, các lớp của chúng ta chỉ có các phương thức

“Trường lớp” là một cú pháp cho phép thêm bất kỳ thuộc tính nào

Chẳng hạn, hãy thêm thuộc tính

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

70 vào

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

53

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

2

Vì vậy, chúng ta chỉ cần viết "=" trong phần khai báo, thế là xong

Sự khác biệt quan trọng của các trường lớp là chúng được đặt trên các đối tượng riêng lẻ, không phải

class MyClass {
  // class methods
  constructor[] { .. }
  method1[] { .. }
  method2[] { .. }
  method3[] { .. }
  ...
}

51

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

3

Chúng ta cũng có thể gán giá trị bằng cách sử dụng các biểu thức và lệnh gọi hàm phức tạp hơn

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

4

Như đã trình bày trong chương Các hàm liên kết hàm trong JavaScript có một

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

73 động. Nó phụ thuộc vào bối cảnh của cuộc gọi

Vì vậy, nếu một phương thức đối tượng được truyền xung quanh và được gọi trong ngữ cảnh khác, thì

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

73 sẽ không còn là tham chiếu đến đối tượng của nó nữa

Chẳng hạn, mã này sẽ hiển thị

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

75

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

5

Vấn đề được gọi là "mất

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

73"

Có hai cách để khắc phục nó, như đã thảo luận trong chương Ràng buộc chức năng

1. Truyền một hàm bao bọc, chẳng hạn như

   class User {
   
     constructor[name] {
       this.name = name;
     }
   
     sayHi[] {
       alert[this.name];
     }
   
   }
   
   // Usage:
   let user = new User["John"];
   user.sayHi[];

   77
2. Liên kết phương thức với đối tượng, e. g. trong hàm tạo

Các trường lớp cung cấp một cú pháp khác, khá tao nhã

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

6

Trường lớp

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

78 được tạo trên cơ sở từng đối tượng, có một chức năng riêng cho từng đối tượng

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

79, với

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

73 bên trong tham chiếu đối tượng đó. Chúng tôi có thể vượt qua

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

81 ở bất cứ đâu và giá trị của

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

73 sẽ luôn đúng

Điều đó đặc biệt hữu ích trong môi trường trình duyệt, dành cho người nghe sự kiện

Cú pháp lớp cơ bản trông như thế này

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

7

Về mặt kỹ thuật,

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

83 là một hàm [hàm mà chúng tôi cung cấp là

class User {
  constructor[name] { this.name = name; }
  sayHi[] { alert[this.name]; }
}

// proof: User is a function
alert[typeof User]; // function

3], trong khi các phương thức, getters và setters được viết cho

class User {

  constructor[name] {
    this.name = name;
  }

  sayHi[] {
    alert[this.name];
  }

}

// Usage:
let user = new User["John"];
user.sayHi[];

85

Làm cách nào để nhập lớp JavaScript trong HTML?

Làm cách nào để gọi hàm JavaScript ở dạng HTML?

Làm cách nào để gọi một lớp JS?

Làm cách nào để gọi một hàm JavaScript trong nút HTML?