Bạn đang xem : tạo một lớp trong javascript

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

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

Như chúng ta đã biết từ chương Khối mã lệnh, toán tử “mới” , hàm mới có thể trợ giúp điều đó.

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 {
  // các phương thức của lớp
  người xây dựng() { ... }
  method1 () {...}
  method2 () {...}
  method3 () {...}
  ...
}  

Sau đó, sử dụng new MyClass () để 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 constructor () được gọi tự động bởi new , vì vậy chúng tôi có thể khởi tạo đối tượng ở đó.

Ví dụ:


  class Người dùng {

  hàm tạo (tên) {
    this.name = tên;
  }

  nói xin chào đi() {
    alert (this.name);
  }

}

// Cách sử dụng:
let user = new User ("John");
user.sayHi ();  

Khi Người dùng mới ("John") được gọi:

  1. Một đối tượng mới được tạo.
  2. Hàm tạo chạy với đối số đã cho và gán nó cho this.name .

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

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

Một lỗi phổ biến đối với các nhà phát triển mới 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 bị nhầm lẫn với các ký tự đối tượng. Trong lớp, không cần có dấu phẩy.

Vậy, chính xác thì class là gì? Đó không phải là một thực thể cấp độ ngôn ngữ hoàn toàn mới như người ta vẫn nghĩ.

Hãy cùng khám phá bất kỳ điều kỳ diệu nào và xem thực sự của một lớp học là như thế nào. Điều đó sẽ giúp bạn hiểu nhiều khía cạnh phức tạp.

Trong JavaScript, một lớp là một loại hàm.

Đây, hãy xem:


  class Người dùng {
  hàm tạo (tên) {this.name = name; }
  sayHi () {alert (this.name); }
}

// bằng chứng: Người dùng là một hàm
cảnh báo (typeof Người dùng); // hàm  

Cấu trúc class User {...} thực sự làm gì:

  1. Tạo một hàm có tên Người dùng , hàm này trở thành kết quả của khai báo lớp. Mã hàm được lấy từ phương thức constructor (giả sử là trống nếu chúng ta không viết phương thức như vậy).
  2. Lưu trữ các phương thức của lớp, chẳng hạn như sayHi , trong User.prototype .

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

Chúng tôi có thể minh họa kết quả của khai báo class User là:

Đây là mã để tìm hiểu nội dung:


  class Người dùng {
  hàm tạo (tên) {this.name = name; }
  sayHi () {alert (this.name); }
}

// lớp là một hàm
cảnh báo (typeof Người dùng); // hàm số

// ... hay chính xác hơn là phương thức khởi tạo
cảnh báo (Người dùng === User.prototype.constructor); // thật

// Các phương thức nằm trong User.prototype, ví dụ:
cảnh báo (User.prototype.sayHi); // mã của phương thức sayHi

// có đúng hai phương thức trong nguyên mẫu
cảnh báo (Object.getOwnPropertyNames (User.prototype)); // hàm tạo, sayHi  

Đôi khi, người ta nói rằng class là một “cú pháp đường” (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 kỳ điều gì mới), bởi vì chúng tôi thực sự có thể khai báo cùng một thứ hoàn toàn không sử dụng từ khóa class :

  // lớp viết lại Người dùng trong các hàm thuần túy

// 1. Tạo hàm khởi tạo
function Người dùng (tên) {
  this.name = tên;
}
// một nguyên mẫu hàm có thuộc tính "constructor" theo mặc định,
// nên chúng ta không cần tạo nó

// 2. Thêm phương thức vào nguyên mẫu
User.prototype.sayHi = function () {
  alert (this.name);
};

// Cách sử dụng:
let user = new User ("John");
user.sayHi ();  

Kết quả của định nghĩa này giống nhau. Vì vậy, thực sự có những lý do tại sao class có thể được coi là một đường cú pháp để xác định một phương thức khởi tạo cùng với các phương thức nguyên mẫu của nó.

Xem Thêm  Làm thế nào để tạo video làm nền trong Html? - PeterElSt - hình nền video html

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

  1. Đầu tiên, một hàm được tạo bởi class được gắn nhãn bởi thuộc tính nội bộ đặc biệt [[IsClassConstructor]]: true . Vì vậy, nó không hoàn toàn giống với việc tạo nó theo cách 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 hàm thông thường, nó phải được gọi bằng new :


      class Người dùng {
      người xây dựng() {}
    }
    
    cảnh báo (typeof Người dùng); // hàm số
    Người sử dụng(); // Lỗi: Không thể gọi người dùng xây dựng lớp mà không có 'new'  

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


      class Người dùng {
      người xây dựng() {}
    }
    
    cảnh báo (Người dùng); // lớp người dùng {...}  

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

  2. Các phương thức của lớp không thể liệt kê được.
    Định nghĩa lớp đặt cờ enumerable thành false cho tất cả các phương thức trong "prototype" .

    Điều đó tốt, vì nếu chúng ta for..in 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. Các lớp luôn sử dụng nghiêm ngặt.
    Tất cả mã bên trong cấu trúc lớp đều tự động ở chế độ nghiêm ngặt.

Ngoài ra, cú pháp class mang lại nhiều tính năng khác mà chúng ta sẽ khám phá ở phần 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 truyền xung quanh, trả về, được gán, v.v.

Dưới đây là một ví dụ về biểu thức lớp:

  let User = class {
  nói xin chào đi() {
    alert ("Xin chào");
  }
};  

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 thì tên đó chỉ hiển thị bên trong lớp:


  // "Biểu thức lớp được đặt tên"
// (không có thuật ngữ nào như vậy trong đặc tả, nhưng điều đó tương tự với Biểu thức hàm được đặt tên)
let User = class MyClass {
  nói xin chào đi() {
    cảnh báo (MyClass); // Tên MyClass chỉ hiển thị bên trong lớp
  }
};

Người dùng mới (). sayHi (); // hoạt động, hiển thị định nghĩa MyClass

cảnh báo (MyClass); // error, tên MyClass không hiển thị bên ngoài lớp  

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

Xem Thêm  Làm cách nào để tạo danh sách thả xuống có thể tìm kiếm được trong Excel? - menu thả xuống của thanh tìm kiếm


  function makeClass (cụm từ) {
  // khai báo một lớp và trả về nó
  trở lại lớp học {
    nói xin chào đi() {
      cảnh báo (cụm từ);
    }
  };
}

// Tạo một lớp mới
let User = makeClass ("Xin chào");

Người dùng mới (). sayHi (); // Xin chào  

Cũng 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.

Dưới đây là một ví dụ cho user.name được triển khai bằng cách sử dụng get / set :


  class Người dùng {

  hàm tạo (tên) {
    // gọi setter
    this.name = tên;
  }

  lấy tên () {
    trả lại this._name;
  }

  đặt tên (giá trị) {
    if (value.length & lt; 4) {
      alert ("Tên quá ngắn.");
      trở về;
    }
    this._name = value;
  }

}

let user = new User ("John");
cảnh báo (tên người dùng); // John

user = new Người dùng (""); // Tên quá ngắn.  

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 User.prototype .

Dưới đây là ví dụ về tên phương thức được tính bằng dấu ngoặc nhọn [...] :


  class Người dùng {

  ['say' + 'Xin chào'] () {
    alert ("Xin chào");
  }

}

Người dùng mới (). sayHi ();  

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 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 tôi chỉ có các phương thức.

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

Ví dụ: hãy thêm thuộc tính name vào class User :


  class Người dùng {
  tên = "John";

  nói xin chào đi() {
    alert (`Xin chào, $ {this.name}! ');
  }
}

Người dùng mới (). sayHi (); // Xin chào, John!  

Vì vậy, chúng tôi 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 User.prototype :


  class Người dùng {
  tên = "John";
}

let user = new User ();
cảnh báo (tên người dùng); // John
cảnh báo (User.prototype.name); // không xác định  

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


  class Người dùng {
  name = prompt ("Tên, làm ơn?", "John");
}

let user = new User ();
cảnh báo (tên người dùng); // John  

Như đã trình bày trong chương Hàm liên kết , các hàm trong JavaScript có this động. Nó phụ thuộc vào ngữ 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 một ngữ cảnh khác, thì this sẽ không còn là một tham chiếu đến đối tượng của nó nữa.

Ví dụ: mã này sẽ hiển thị không xác định :


 Nút  class {
  hàm tạo (giá trị) {
    this.value = giá trị;
  }

  nhấp chuột() {
    alert (this.value);
  }
}

let button = new Button ("xin chào");

setTimeout (button.click, 1000); // không xác định  

Sự cố được gọi là “mất this “.

Có hai cách tiếp cận để sửa lỗi này, như đã thảo luận trong chương Ràng buộc hàm :

  1. Chuyển một hàm wrapper, chẳng hạn như setTimeout (() = & gt; button.click (), 1000) .
  2. Ràng buộc phương thức với đối tượng, ví dụ: trong hàm tạo.

Các trường lớp cung cấp một cú pháp khác, khá đơn giản:


 Nút  class {
  hàm tạo (giá trị) {
    this.value = giá trị;
  }
  bấm vào = () = & gt; {
    alert (this.value);
  }
}

let button = new Button ("xin chào");

setTimeout (button.click, 1000); // xin chào  

Trường lớp click = () = & gt; {...} được tạo trên cơ sở từng đối tượng, có một chức năng riêng biệt cho từng đối tượng Nút , với this bên trong nó tham chiếu đến đối tượng đó. Chúng ta có thể chuyển button.click ở bất cứ đâu và giá trị của this sẽ luôn chính xác.

Xem Thêm  Phông chữ đậm trong HTML - Độ đậm phông chữ cho các chữ cái - mã cho văn bản in đậm

Đ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 giống như sau:

  class MyClass {
  prop = giá trị; // tài sản

  constructor (...) {// hàm tạo
    // ...
  }

  method (...) {} // method

  get something (...) {} // phương thức getter
  set something (...) {} // phương thức setter

  [Symbol.iterator] () {} // phương thức có tên được tính (ký hiệu ở đây)
  // ...
}  

MyClass về mặt kỹ thuật là một hàm (hàm mà chúng tôi cung cấp dưới dạng constructor ), trong khi các phương thức, getters và setters được ghi vào MyClass.prototype .

Trong các chương tiếp theo, chúng ta sẽ tìm hiểu thêm về các lớp, bao gồm kế thừa và các tính năng khác.


Xem thêm những thông tin liên quan đến chủ đề tạo một lớp trong javascript

JavaScript 18: Constructor - Hàm khởi tạo

  • Tác giả: thân triệu
  • Ngày đăng: 2019-05-23
  • Đánh giá: 4 ⭐ ( 3768 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình JavaScript cơ bản. Học lập trình JavaScript đơn giản và miễn phí qua video clip. Hàm khởi tạo dùng để tạo đối tượng trong JavaScript. thân triệu channel-let's grow together!

Học tất tần tật về JavaScript từ đầu

  • Tác giả: hanoi.codegym.vn
  • Đánh giá: 5 ⭐ ( 4984 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Muốn học tất tần tật về javascript từ đầu cần chuẩn bị những gì? Học ở đâu, học như thế nào? Top 5 sai lầm người mới học đều mắc phải.

Đối tượng trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 2154 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Làm cách nào để tạo một lớp cơ sở trừu tượng trong JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7809 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Một cách đơn giản để tạo một lớp trừu tượng là: /** @constructor @abstract */ var…

Cách tạo và khởi tạo một lớp trong Node.js

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 7281 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này cung cấp các mẹo và mẫu mã về cách tạo và khởi tạo một lớp trong Node.js. Xin vui lòng bình luận / đề nghị nếu tôi không đề cập đến một hoặc nhiều điểm quan trọng. Cách tạo một…

Tìm hiểu class trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 8643 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Class là gì? Trong lập trình hướng đối tượng, class hay còn gọi là lớp được sử dụng để tạo đối tượng có thuộc tính (attribute) và phương thức (method). Từ phiên bản ECMAScript 6 thì JavaSript hỗ tr...

Lớp trong Javascript

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 4632 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khai báo và sử dụng lớp trong JavaScript, tạo ra các đối tượng lớp, kế thừa lớp

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php