1、介绍
先介绍一下函数的调用模式有哪四种：
函数调用模式，
方法调用模式，
构造函数调用模式，
上下文调用模式；
在这里对于函数的调用模式，主要介绍每种调用模式的this的指向和返回值。
2、代码分析
①、函数调用模式
下面的调用模式就是大家最熟悉的函数调用模式，而函数调用模式的this指向和返回值是什么呢？
function fn1 () {
console.log(this);
};
fn1(); // 在调用函数fn1时，输出的this的结果是Window
在上述代码中，fn1也就是函数调用模式中的this是指向Window的，而返回值是由return决定。
JavaScript函数的调用模式是理解和使用JavaScript中的this关键字的关键。函数可以有四种不同的调用方式，每种方式中this的指向和返回值都有所不同。接下来我们将深入探讨这些模式。
1. **函数调用模式**
在这种模式下，函数像普通函数那样被调用，不作为任何对象的方法。例如：
```javascript
function fn1() {
console.log(this);
}
fn1(); // 输出全局对象，在浏览器环境中通常是Window
```
在函数调用模式中：
- `this`通常指向全局对象（在浏览器环境下是`Window`，在Node.js环境中是`global`）。
- 返回值取决于函数内部的`return`语句。如果无`return`语句，则默认返回`undefined`。
2. **方法调用模式**
当函数作为对象的一个属性被调用时，它被称为方法。例如：
```javascript
var obj = {
name: "wade",
fn1: function() {
console.log(this.name);
}
};
obj.fn1(); // 输出"wade"
```
在方法调用模式中：
- `this`指向调用该方法的对象，即`obj`。
- 返回值依然由`return`语句决定，若无`return`则返回`undefined`。
3. **构造函数调用模式**
使用`new`关键字调用函数时，它将作为构造函数运行。例如：
```javascript
function Fn() {
this.name = "james";
this.age = 32;
console.log(this);
}
var fn1 = new Fn();
```
在构造函数调用模式中：
- `this`指向新创建的实例，即`fn1`。
- 如果没有`return`语句，或者返回的值是基本类型（Number, String, Boolean等），则默认返回`this`，即新创建的实例。但如果返回了一个复杂类型（如对象、数组等），则返回该复杂类型，而不再返回`this`。
4. **上下文调用模式**
通过`call`、`apply`或`bind`方法，可以显式地设置函数执行时的上下文，即`this`的值。例如：
```javascript
function f1() {
console.log(this);
}
f1.call(null); // 输出全局对象
f1.call(undefined); // 输出全局对象
f1.call(123); // 输出Number的实例
```
在上下文调用模式中：
- `this`的值由调用时传入的第一个参数决定，它可以是任何值，包括`null`、`undefined`、原始值或对象引用。
- 返回值同样由`return`语句决定，无`return`则返回`undefined`。
了解这些调用模式有助于编写更准确的JavaScript代码，特别是处理`this`关键字时。在实际编程中，正确理解和运用这些模式可以避免许多常见的错误和困惑。
