Gọi hàm JavaScript

Mã trong hàm JavaScript sẽ được thực thi khi 'một vật' gọi nó.

Gọi hàm JavaScript

Khi hàm đượcĐịnh nghĩathì mã trong hàm sẽ không được thực thi.

Khi hàm đượcGọithì mã trong hàm sẽ được thực thi.

Gọi hàm thường cũng có thể nói là 'khởi động hàm' hoặc 'thực hiện hàm'.

Trong hướng dẫn này, chúng ta sử dụng “Gọi”。

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

thực thể

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

Thử nghiệm trực tiếp

Các 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à trang HTML本身, tất cả các hàm trên đều 'thuộc về' trang HTML.

Trong trình duyệt, đối tượng trang này chính là cửa sổ trình duyệt. Hàm trên tự động trở thành hàm cửa sổ.

myFunction() và window.myFunction() là cùng một hàm:

thực thể

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

Thử nghiệm trực tiếp

Đây là phương pháp gọi hàm phổ biến nhưng không phải là thói quen tốt.

Giá trị toàn cục, phương thức hoặc hàm rất dễ gây ra xung đột tên và lỗ hổng trong đối tượng toàn cục.

this từ khóa

Trong JavaScript, được gọi là this vật thể đó, có nghĩa là đối tượng "nắm giữ" đoạn mã hiện tại.

this giá trị, khi sử dụng trong hàm, là đối tượng "nắm giữ" hàm đó.

Lưu ý this không phải là biến. Nó thuộc về từ khóa. Bạn không thể thay đổi this giá trị.

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

Khi gọi đối tượng không có đối tượng sở hữuthis giá trị trở thành đối tượng toàn cục.

Trong trình duyệt web, đối tượng toàn cục là đối tượng trình duyệt.

Ví dụ này sử dụng this giá trị trả về đối tượng này:

thực thể

var x = myFunction();            // x sẽ trở thành đối tượng window
function myFunction() {
   return this;
}

Thử nghiệm trực tiếp

Gọi một hàm như là hàm toàn cục sẽ dẫn đến this giá trị trở thành đối tượng toàn cục.

Sử dụng đối tượng window như là biến rất dễ làm chương trình sụp đổ.

Gọi hàm như là phương thức

Trong JavaScript, bạn có thể định nghĩa hàm như là phương thức của đối tượng.

Ví dụ dưới đây tạo ra một đối tượng (myObject), có hai thuộc tính (firstName và lastName), và một phương thức (fullName):

thực thể

var myObject = {
    firstName: "Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Sẽ trả về "Bill Gates"

Thử nghiệm trực tiếp

phương thức fullName là một hàm. Hàm này thuộc về đối tượng. myObject là đối tượng sở hữu của hàm.

được gọi là this vật thể đó, là đối tượng "nắm giữ" đoạn mã JavaScript này. Trong ví dụ này,this giá trị là myObject.

kiểm tra xem! Thay đổi phương thức fullName để trả về this giá trị:

thực thể

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

Thử nghiệm trực tiếp

Gọi hàm thông qua phương pháp đối tượng sẽ dẫn đến this giá trị trở thành đối tượng chính nó.

Gọi hàm thông qua hàm xây dựng

Nếu trước hàm gọi là new Nếu trước hàm gọi là từ khóa

Nó trông giống như bạn tạo một hàm mới, nhưng do hàm JavaScript là đối tượng, bạn thực tế tạo ra một đối tượng mới:

thực thể

// Đây là hàm xây dựng:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
// Tạo ra một đối tượng mới:
var x = new myFunction("Bill", "Gates");
x.firstName;                             // sẽ trả về "Bill"

Thử nghiệm trực tiếp

Gọi hàm xây dựng sẽ tạo ra đối tượng mới. Đối tượng mới sẽ kế thừa thuộc tính và phương pháp từ hàm xây dựng.

Trong hàm xây dựng this Từ khóa không có giá trị.

this giá trị sẽ trở thành đối tượng mới được tạo khi gọi hàm.