Bạn đang xem : hàm javascript trong lớp

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 đố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  JavaScript không xác định - những gì không được xác định trong js

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  Nối vào chuỗi Python + Ví dụ - python in chuỗi nối thê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  Các loại giá trị Boolean trong Java với các ví dụ - boolean java true false

Đ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ủ đề hàm javascript trong lớp

JavaScript Functions

  • Tác giả: Programming with Mosh
  • Ngày đăng: 2018-05-15
  • Đánh giá: 4 ⭐ ( 1683 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Functions

    🔥Get the COMPLETE course (83% OFF - LIMITED TIME ONLY): http://bit.ly/2M1sp4B

    Subscribe for more videos:
    https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1

    Want to learn more from me? Check out my blog and courses:

    http://programmingwithmosh.com
    https://www.facebook.com/programmingwithmosh/
    https://twitter.com/moshhamedani

Mọi Thứ Bạn Cần Biết Về Function - Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 1478 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các hàm (Function) là một trong những nền tảng cơ bản trong Javascript. Vậy bạn đã nắm hết những kiến thức về Function trong Javascript chưa?

Cơ bản về HTML, JAVASCRIPT, CSS và ASP: Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học.

  • Tác giả: www.voer.edu.vn
  • Đánh giá: 3 ⭐ ( 9270 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: - (giáo trình - tài liệu - học liệu từ VOER)

Các hàm Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 8045 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp các hàm Javascript, đây là chuyên mục hướng dẫn sử dụng các hàm trong ngôn ngữ lập trình javascript, mỗi hàm sẽ có cấu trúc - cú pháp - và ví dụ

Hàm trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 2778 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm 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ập trình hướng đối tượng trong javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 4 ⭐ ( 5258 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lập trình hướng đối tượng trong javascript hướng dẫn bạn các cách tạo đối tượng trong javavascript và các vấn đề trong OPP.

Hàm trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 4062 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm trong JavaScript là một khối lệnh (bao gồm nhiều câu lệnh) được sử dụng để thực hiện một công việc nhất định. Chẳng hạn,

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