HoRain云--JavaScript函数调用的4种方式详解-开发者社区

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

(3) 使用构造函数调用（使用new关键字）

(4) 使用call()和apply()方法调用

(3) 使用call/apply改变this指向

5. 最佳实践

JavaScript 函数调用

JavaScript 函数有4种主要调用方式，每种方式的this指向不同。以下是详细说明：

1. 函数的4种调用方式

(1) 作为普通函数调用

function myFunction(a, b) { return a * b; } myFunction(10, 2); // 返回 20

this指向：全局对象（在浏览器中是window对象）
特点：最常用方式，但不是良好编程习惯，容易造成命名冲突
注意：在HTML页面中，函数会自动变为window对象的函数

(2) 作为对象方法调用

var myObject = { firstName: "John", lastName: "Doe", fullName: function() { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"

this指向：调用该方法的对象（myObject）
特点：函数属于对象，this指向对象本身

(3) 使用构造函数调用（使用`new`关键字）

function MyFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new MyFunction("John", "Doe"); x.firstName; // 返回 "John"

this指向：新创建的对象（实例）
特点：创建新对象，继承构造函数的属性和方法

(4) 使用`call()`和`apply()`方法调用

function myFunction(a, b) { return a * b; } // 使用call()方法 myFunction.call(null, 10, 2); // 返回 20 // 使用apply()方法 myFunction.apply(null, [10, 2]); // 返回 20

this指向：第一个参数指定的对象（第一个参数为null时，this指向全局对象）
特点：可以显式指定函数执行时的this值

2. 参数传递机制

基本类型（字符串、数字）：按值传递

function changeValue(x) { x = 10; } let num = 5; changeValue(num); console.log(num); // 输出 5（未改变）

对象和数组：按引用传递（函数内修改会影响原对象）

function changeObject(obj) { obj.name = "Updated"; } let person = { name: "Original" }; changeObject(person); console.log(person.name); // 输出 "Updated"（被修改）

3. 函数调用的注意事项

(1) 参数处理

JavaScript不校验参数个数，少传或多传都不会报错

未传入的参数在函数内为undefined

function add(a, b) { return a + b; } add(5); // 返回 NaN（因为b为undefined）

(3) 函数提升

函数声明会被提升（hoisted），可以在定义前调用

myFunction(); // 正常工作 function myFunction() { /* ... */ }

函数表达式不会提升，必须先定义再调用

myFunction(); // 会报错：myFunction is not a function const myFunction = function() { /* ... */ };

(4) 箭头函数的限制

箭头函数没有自己的this，this指向定义时的上下文
箭头函数没有arguments对象
箭头函数不能用作构造函数（不能使用new）

4. 实际应用示例

(1) 函数作为回调函数

// 函数表达式适合作为回调 setTimeout(function() { console.log("Timeout completed"); }, 1000);

(2) 递归函数

function factorial(n) { if (n === 0) return 1; return n * factorial(n - 1); } console.log(factorial(5)); // 120

(3) 使用call/apply改变this指向

const person = { name: "John", greet: function(greeting) { return greeting + ", " + this.name; } }; const anotherPerson = { name: "Jane" }; console.log(person.greet.call(anotherPerson, "Hello")); // "Hello, Jane"