Mất 8 phút đọc

Lời Mời Hàm JavaScript

1.Lời mời hàm JavaScript

  • Mã bên trong JavaScript functionsẽ thực thi khi “cái gì đó” gọi nó.

Gọi một hàm JavaScript

  • Mã bên trong một hàm không được thực thi khi hàm được xác định.
  • Mã bên trong một hàm được thực thi khi hàm được gọi.
  • Người ta thường sử dụng thuật ngữ “gọi một hàm ” thay vì “gọi một hàm “.
  • Người ta cũng thường nói “gọi một hàm”, “bắt đầu một hàm” hoặc “thực thi một hàm”.
  • Trong hướng dẫn này, chúng tôi sẽ sử dụng lệnh gọi, vì một hàm JavaScript có thể được gọi mà không được gọi.

Gọi một hàm dưới dạng một hàm

  • Hàm trên không thuộc đối tượng nào. Nhưng trong JavaScript luôn có một đối tượng toàn cục mặc định.
  • Trong HTML, đối tượng toàn cục mặc định là chính trang HTML, vì vậy chức năng trên “thuộc về” trang HTML.
  • Trong trình duyệt, đối tượng trang là cửa sổ trình duyệt. Hàm trên tự động trở thành hàm cửa sổ.
  • Đây là một cách phổ biến để gọi một hàm JavaScript, nhưng không phải là một cách thực hành tốt. Các biến, phương thức hoặc hàm toàn cục có thể dễ dàng tạo ra xung đột tên và lỗi trong đối tượng toàn cục.
  • myFunction () và window.myFunction () là cùng một chức năng

Đối tượng toàn cầu

  • Khi một hàm được gọi mà không có đối tượng chủ sở hữu, giá trị của this sẽ trở thành đối tượng toàn cục.
  • Trong trình duyệt web, đối tượng chung là cửa sổ trình duyệt.
  • Ví dụ này trả về đối tượng window dưới dạng giá trị của this:

  • Gọi một hàm dưới dạng một hàm toàn cục, làm cho giá trị của hàm this là đối tượng toàn cục. Việc sử dụng đối tượng window như một biến có thể dễ dàng làm hỏng chương trình của bạn.

Gọi một hàm dưới dạng một phương thức

  • Trong JavaScript, bạn có thể định nghĩa các hàm dưới dạng các phương thức đối tượng.
  • Ví dụ sau tạo một đối tượng (myObject), với hai thuộc tính (firstName và lastName) và một phương thức (fullName):

  • Phương thức fullName là một hàm. Chức năng thuộc về đối tượng. myObject là chủ sở hữu của hàm.
  • Thứ được gọi thislà đối tượng “sở hữu” mã JavaScript. Trong trường hợp này, giá trị của this là myObject .
  • Kiểm tra nó! Thay đổi phương thức fullName để trả về giá trị của this:

Gọi một hàm với một hàm tạo hàm

  • Nếu một lời gọi hàm đứng trước từ khóa new, nó là một lời gọi hàm tạo.
  • Có vẻ như bạn tạo một hàm mới, nhưng vì các hàm JavaScript là các đối tượng nên bạn thực sự tạo một đối tượng mới:

  • Một lệnh gọi phương thức khởi tạo sẽ tạo ra một đối tượng mới. Đối tượng mới kế thừa các thuộc tính và phương thức từ phương thức khởi tạo của nó.
  • Từ khóa this trong hàm tạo không có giá trị. Giá trị của thiswill là đối tượng mới được tạo khi hàm được gọi.

2.Lệnh gọi hàm JavaScript ()

  • Sử dụng lại phương pháp với phương thức call(), bạn có thể viết một phương thức có thể được sử dụng trên các đối tượng khác nhau.

Tất cả các hàm là các phương thức

  • Trong JavaScript tất cả các hàm đều là phương thức đối tượng.
  • Nếu một hàm không phải là một phương thức của một đối tượng JavaScript, nó là một hàm của đối tượng toàn cục
  • Ví dụ dưới đây tạo một đối tượng với 3 thuộc tính là firstName, lastName, fullName.

Trong ví dụ trên, thisđề cập đến đối tượng người. this.firstName có nghĩa là thuộc tính firstName của this. Giống như: this.firstName có nghĩa là thuộc tính FirstName của person.

Phương thức gọi JavaScript ()

  • Phương pháp call() này là một phương pháp JavaScript được xác định trước.
  • Nó có thể được sử dụng để gọi (gọi) một phương thức có đối tượng chủ sở hữu làm đối số (tham số).
  • Với call(), một đối tượng có thể sử dụng một phương thức thuộc về một đối tượng khác.

Ví dụ này gọi phương thức fullName của người, sử dụng nó trên person1 

Phương thức call () với các đối số

  • Phương thức call() có thể chấp nhận các đối số:

3.Áp dụng hàm JavaScript ()

  • Sử dụng lại phương pháp với phương thức apply(), bạn có thể viết một phương thức có thể được sử dụng trên các đối tượng khác nhau.

Phương thức JavaScript apply ()

  • Cách apply() tương tự như phương pháp call().
  • Trong ví dụ này, phương thức fullName của người được áp dụng trên person1:

Sự khác biệt giữa call () và apply ()

  • Phương thức call() này nhận các đối số một cách riêng biệt.
  • Phương thức apply() nhận các đối số dưới dạng một mảng.
  • Phương thức apply () rất tiện dụng nếu bạn muốn sử dụng một mảng thay vì một danh sách đối số.

Phương thức apply () với các đối số

  • Phương thức apply() chấp nhận các đối số trong một mảng:

Mô phỏng một phương pháp tối đa trên mảng

  • Có thể tìm số lớn nhất (trong danh sách các số) bằng phương pháp Math.max():
  • Vì các mảng JavaScript không có phương thức max () nên bạn có thể áp dụng phương thức Math.max() này để thay thế.
  • Đối số đầu tiên (null) không quan trọng.

Chế độ nghiêm ngặt của JavaScript

  • Trong chế độ nghiêm ngặt JavaScript, nếu đối số đầu tiên của phương thức apply() không phải là một đối tượng, nó sẽ trở thành chủ sở hữu (đối tượng) của hàm được gọi. Trong chế độ “không nghiêm ngặt”, nó trở thành đối tượng toàn cục.

4.Hàm JavaScript bind () 

Chức năng vay (Function Borrowing)

  • Với phương thức bind(), một đối tượng có thể mượn một phương thức từ một đối tượng khác.
  • Đối tượng thành viên mượn phương thức tên đầy đủ từ đối tượng person:

Bảo quản this

  • Đôi khi bind()phải sử dụng phương pháp này để ngăn chặn việc làm mất this .
  • Trong phương thức hiển thị, this đề cập đến đối tượng người
  • Khi một hàm được sử dụng làm lệnh gọi lại, hàm this sẽ bị mất.

5.Chức năng đóng cửa (JavaScript Closures)

  • Các biến JavaScript có thể thuộc phạm vi cục bộ hoặc toàn cầu .
  • Các biến toàn cục có thể được tạo cục bộ (riêng tư) với các bao đóng .

Biến toàn cục

  • functioncó thể truy cập tất cả các biến được định nghĩa bên trong hàm, như sau:

  • Nhưng a functioncũng có thể truy cập các biến được định nghĩa bên ngoài hàm
  • Các biến được tạo without từ khóa khai báo ( varlethoặc const) luôn là toàn cục, ngay cả khi chúng được tạo bên trong một hàm.

Thời gian tồn tại có thể thay đổi

  • Các biến toàn cục tồn tại cho đến khi trang bị hủy, như khi bạn điều hướng đến một trang khác hoặc đóng cửa sổ.
  • Các biến cục bộ có tuổi thọ ngắn. Chúng được tạo khi hàm được gọi và bị xóa khi hàm kết thúc.

Một tình thế tiến thoái lưỡng nan

  • Giả sử bạn muốn sử dụng một biến để đếm thứ gì đó và bạn muốn bộ đếm này có sẵn cho tất cả các hàm.
  • Bạn có thể sử dụng một biến toàn cục và một functionđể tăng bộ đếm:

Các hàm lồng nhau trong JavaScript

  • Tất cả các chức năng đều có quyền truy cập vào phạm vi toàn cầu.  
  • Trên thực tế, trong JavaScript, tất cả các hàm đều có quyền truy cập vào phạm vi “bên trên” chúng.
  • JavaScript hỗ trợ các hàm lồng nhau. Các hàm lồng nhau có quyền truy cập vào phạm vi “phía trên” chúng.
  • Trong ví dụ này, hàm bên trong plus()có quyền truy cập vào biến counter trong hàm mẹ

  • Điều này có thể đã giải quyết được tình thế tiến thoái lưỡng nan, nếu chúng ta có thể tiếp cận chức năng plus()  từ bên ngoài.
  • Chúng ta cũng cần tìm cách thực thi counter = 0một lần duy nhất. We need a closure.

Ví dụ:

Biến addđược gán cho giá trị trả về của một hàm tự gọi.

Chức năng tự gọi chỉ chạy một lần. Nó đặt bộ đếm thành không (0) và trả về một biểu thức hàm.

Bằng cách này, add trở thành một hàm. Phần “tuyệt vời” là nó có thể truy cập bộ đếm trong phạm vi cha.

Đây được gọi là một JavaScript closure. Nó làm cho một hàm có thể có các biến ” riêng tư “.

Bộ đếm được bảo vệ bởi phạm vi của chức năng ẩn danh và chỉ có thể được thay đổi bằng cách sử dụng chức năng thêm

Đóng là một hàm có quyền truy cập vào phạm vi cha, ngay cả sau khi hàm cha đã đóng.

KẾT LUẬN: Trong bài viết này, chúng ta đã tìm hiểu các hàm trong JavaScript. Tôi hy vọng bài viết này hữu ích cho bạn. Cảm ơn các bạn đã theo dõi bài viết!

5/5 - (1 Bình chọn)
769 lượt xem

19/10/2022 Blog Tin Học

Bài viết liên quan

Block "5_tab_footer" not found