Cách gọi hàm như một hàm và phương thức trong JavaScript

Gọi hàm như hàm (Function Invocation) và gọi như phương thức (Method Invocation)

Trong JavaScript, một hàm có thể được gọi theo hai cách chính: như một hàm độc lập (function invocation) hoặc như một phương thức của đối tượng (method invocation). Sự khác biệt cốt lõi nằm ở giá trị của từ khóa this bên trong hàm.

Ví dụ minh họa

Dưới đây là ví dụ hoàn chỉnh cho thấy sự khác biệt giữa hai cách gọi này:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gọi hàm như hàm và phương thức</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 20px; font-weight: 500; color: green; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Gọi hàm như hàm và phương thức</h1>
    <div class="result"></div>
    <button class="btn-demo">THỰC HIỆN</button>
    <h3>Nhấn nút trên để xem kết quả gọi hàm và phương thức</h3>

    <script>
        const resEle = document.querySelector(".result");
        const btn = document.querySelector(".btn-demo");

        // Hàm thông thường
        function add(a, b) {
            return a + b;
        }

        // Đối tượng có phương thức
        const obj = {
            firstName: 'Rohan',
            lastName: 'Sharma',
            welcome() {
                // 'this' tham chiếu đến obj
                return 'Chào mừng ' + this.firstName + ' ' + this.lastName;
            }
        };

        btn.addEventListener("click", () => {
            // Gọi như hàm: this là undefined (strict mode) hoặc window
            resEle.innerHTML = 'Gọi hàm add(2,3) : ' + add(2, 3) + '<br>';
            // Gọi như phương thức: this tham chiếu đến obj
            resEle.innerHTML += 'Gọi phương thức obj.welcome() : ' + obj.welcome() + '<br>';
        });
    </script>
</body>
</html>

Giải thích chi tiết

• Function Invocation: add(2, 3) - Hàm được gọi độc lập. Bên trong add, this không tham chiếu đến bất kỳ đối tượng nào (là undefined trong strict mode).
• Method Invocation: obj.welcome() - Hàm được gọi như một thuộc tính của obj. Bên trong welcome, this tham chiếu đến obj, cho phép truy cập this.firstName và this.lastName.

Đầu ra mong đợi

Khi nhấn nút "THỰC HIỆN", kết quả hiển thị:

Gọi hàm add(2,3) : 5
Gọi phương thức obj.welcome() : Chào mừng Rohan Sharma

Lưu ý quan trọng

Nếu bạn gán phương thức cho một biến và gọi biến đó: const fn = obj.welcome; fn(), thì nó trở thành function invocation và this sẽ mất đi ngữ cảnh đối tượng gốc. Để bảo toàn this, hãy dùng bind(), call(), apply() hoặc arrow function.