JavaScript - Gọi Hàm

Xin chào, các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ lặn vào thế giới kỳ diệu của việc gọi hàm. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này. Cuối bài học này, bạn sẽ gọi hàm như một chuyên gia!

JavaScript - Function Invocation

Gọi Hàm

Hãy bắt đầu từ cơ bản. Vậy chính xác thì gọi hàm là gì? Đó chỉ là một cách nói sang trọng để nói "gọi một hàm" hoặc "chạy một hàm". Hãy tưởng tượng bạn có một robot (đó là hàm của bạn) và bạn đang đưa ra lệnh để nó làm điều gì đó. Đó chính là gọi hàm!

Dưới đây là một ví dụ đơn giản:

function sayHello() {
console.log("Hello, world!");
}

sayHello(); // Đây là việc gọi hàm

Trong ví dụ này, chúng ta định nghĩa một hàm叫做 sayHello, sau đó gọi nó bằng cách viết tên của nó theo sau là dấu ngoặc đơn. Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, world!" được in ra trong console.

Hãy thử một điều gì đó tương tác hơn:

function greetUser(name) {
console.log("Hello, " + name + "!");
}

greetUser("Alice"); // Output: Hello, Alice!
greetUser("Bob");   // Output: Hello, Bob!

Ở đây, hàm greetUser của chúng ta nhận một tham số name. Khi chúng ta gọi hàm, chúng ta truyền một đối số trong ngoặc đơn. Hàm sau đó sử dụng đối số này để tạo ra một lời chào cá nhân hóa.

Gọi Hàm Constructor

Bây giờ, hãy nói về một điều gì đó nâng cao hơn: hàm constructor. Đây là những hàm đặc biệt được sử dụng để tạo đối tượng. Đừng lo lắng nếu điều này听起来 phức tạp - tôi sẽ giải thích rõ cho bạn!

function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hi, I'm " + this.name + " and I'm " + this.age + " years old.");
};
}

var alice = new Person("Alice", 25);
alice.greet(); // Output: Hi, I'm Alice and I'm 25 years old.

Trong ví dụ này, Person là hàm constructor của chúng ta. Chúng ta sử dụng từ khóa new để tạo một đối tượng Person mới. Từ khóa this bên trong constructor tham chiếu đến đối tượng mới được tạo.

Gọi Phương Thức Đối Tượng

Đối tượng trong JavaScript có thể có hàm như là thuộc tính. Những hàm này được gọi là phương thức. Hãy xem chúng ta gọi chúng như thế nào:

var car = {
brand: "Toyota",
model: "Corolla",
startEngine: function() {
console.log("Vroom! The " + this.brand + " " + this.model + " is starting.");
}
};

car.startEngine(); // Output: Vroom! The Toyota Corolla is starting.

Ở đây, startEngine là phương thức của đối tượng car. Chúng ta gọi nó bằng cách sử dụng ký hiệu chấm: car.startEngine().

Hàm Tự Gọi

Đôi khi, chúng ta muốn một hàm chạy ngay lập tức khi nó được định nghĩa. Những hàm này được gọi là hàm tự gọi hoặc Immediately Invoked Function Expressions (IIFE). Chúng giống như những robot bắt đầu làm việc ngay khi được tạo ra!

(function() {
console.log("I'm running immediately!");
})();
// Output: I'm running immediately!

Hàm này được định nghĩa và sau đó được gọi ngay lập tức. Những dấu ngoặc đơn xung quanh hàm và ở cuối là những gì làm cho nó tự gọi.

Các Cách Khác Để Gọi Hàm

Có một vài cách khác để gọi hàm trong JavaScript. Hãy nhìn chúng trong bảng:

Phương Thức Mô Tả Ví Dụ
call() Gọi một hàm với một this giá trị được chỉ định và các đối số được cung cấp từng cái một func.call(thisArg, arg1, arg2, ...)
apply() Tương tự call(), nhưng các đối số được truyền dưới dạng một mảng func.apply(thisArg, [arg1, arg2, ...])
bind() Tạo một hàm mới với một this giá trị cố định var boundFunc = func.bind(thisArg)

Hãy nhìn chúng trong hành động:

var person = {
fullName: function(city, country) {
console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
}
}

var john = {
firstName: "John",
lastName: "Doe"
}

// Sử dụng call()
person.fullName.call(john, "New York", "USA");
// Output: John Doe lives in New York, USA

// Sử dụng apply()
person.fullName.apply(john, ["London", "UK"]);
// Output: John Doe lives in London, UK

// Sử dụng bind()
var johnInfo = person.fullName.bind(john);
johnInfo("Paris", "France");
// Output: John Doe lives in Paris, France

Trong những ví dụ này, chúng ta sử dụng call(), apply(), và bind() để gọi hàm fullName với các giá trị this và đối số khác nhau.

Và đó là tất cả! Bạn đã học về các cách khác nhau để gọi hàm trong JavaScript. Nhớ rằng, thực hành là chìa khóa, vì vậy đừng ngại thử nghiệm với những khái niệm này. Trước khi bạn biết, bạn sẽ viết và gọi hàm như một nhà lập trình có kinh nghiệm!

Chúc may mắn với việc lập trình, và mong rằng các hàm của bạn luôn gọi thành công! ??

Credits: Image by storyset