Sự dẫn hàm trong JavaScript

Mã bên trong một hàm JavaScript sẽ được thực hiện khi “cái gì đó” gọi nó.

Dẫn một hàm trong JavaScript

Mã bên trong một hàm không được thực hiện khi hàm được định nghĩa. Mã bên trong một hàm được thực thi khi hàm được dẫn ra.

Thường sử dụng từ “call a function” thay vì “invoke a function”. Cũng thường nói “call on a function”, “start a function”, hay “execute a function”. Ở đây chúng ta sẽ sử dụng lệnh dẫn, bởi vì một hàm JavaScript có thể được dẫn ra mà không cần gọi.

Dẫn ra một hàm như một hàm

function myFunction(a, b) {
return a * b;
}
myFunction(10, 2);           // trả về 20

Hàm trên không thuộc về bất kỳ đố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 hàm ở trên “thuộc về” trang HTML.

Trong một 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 một hàm window. MyFunction() và window.myFunction() là cùng một hàm:

function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2);    // cũng trả về 20

Đây là một cách phổ biến để dẫn một hàm JavaScript, nhưng không phải là một cách thực hành rất tốt. Biến toàn cục, phương thức, hoặc các hàm có thể dễ dàng tạo ra xung đột tên và lỗi trong đối tượng toàn cục.

Từ khóa this

Trong JavaScript, những thứ được gọi là this, là đối tượng “sở hữu” mã hiện tại. Giá trị của this khi được sử dụng trong một hàm là đối tượng “sở hữu” hàm.

Lưu ý rằng this không phải là một biến. Đó là một từ khóa. Bạn không thể thay đổi giá trị của this.

Đối tượng toàn cục

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

function myFunction() {
return this;
}
myFunction();                // sẽ trả về đối tượng window

Dẫn một hàm như một hàm toàn cục, làm cho giá trị của nó trở thành đối tượng toàn cục. Sử dụng đối tượng window như là một biến có thể dễ dàng gây ra lỗi chương trình của bạn.

Dẫn hàm như phương thức

Trong JavaScript, bạn có thể xác định hàm như 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):

var myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function () {
return this.firstName + ” ” + this.lastName;
}
}
myObject.fullName();         // trả về “John Doe”

Phương thức fullName là một hàm. Hàm thuộc về đối tượng. MyObject là chủ sở hữu của hàm. Những thứ được gọi là this, là đối tượng “sở hữu” mã JavaScript. Trong trường hợp này giá trị của đây là myObject.

Thay đổi phương thức fullName để trả về giá trị của this:

var myObject = {
firstName:”John”,
lastName: “Doe”,
fullName: function () {
return this;
}
}
myObject.fullName();          // trả về [object Object] (sở hữu đối tượng)

Dẫn một hàm như một phương thức đối tượng, làm cho giá trị của nó trở thành chính đối tượng.

Dẫn hàm với hàm tạo

Nếu một hàm invocation được đặt trước với từ khóa mới, nó là một hàm dựng. Điều này giống như việc bạn tạo hàm mới:

// Đây là hàm dựng
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction(“John”, “Doe”);
x.firstName;                             // trả về “John”

Một hàm dựng invocation tạo ra một đối tượng mới. Đối tượng mới thừa kế các thuộc tính và phương thức từ trình tạo của nó.

Từ khóa this trong hàm dựng không có giá trị. Giá trị của this sẽ là đối tượng mới được tạo ra khi hàm được dẫn ra.