浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

浅谈JS函数三种定义方式

在JavaScript中，函数也是对象。定义函数的方法有三种：函数声明、函数表达式和Function构造函数。它们的语法如下：

函数声明

function fnDeclaration(arg1, arg2, ...) {
  // 函数体
}

函数声明是函数最基本的定义方式。它是在函数执行前就会被解析并创建，所以可以先调用函数再声明函数：

sayHello();

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

函数表达式

const fnExpression = function (arg1, arg2, ...) {
  // 函数体
};

函数表达式实际上是给一个匿名函数一个变量名，这样这个函数就可以像变量一样进行操作。函数表达式的好处是可以延迟函数的创建，只有在执行到该行代码时才会创建和赋值。函数表达式可以是命名函数表达式、自执行函数表达式或匿名函数表达式：

// 命名函数表达式
const fnNamedExpression = function sayHello(name) {
  console.log(`Hello ${name}`);
};

// 自执行函数表达式
const result = (function () {
  // ...
})();

// 匿名函数表达式
const fnAnonymousExpression = function () {
  console.log('Hello world!');
};

Function构造函数

const fnConstructor = new Function('arg1', 'arg2', 'return arg1 + arg2;');

Function构造函数接受一些参数（函数的参数和函数体）作为字符串，并返回一个新创建的函数。使用Function构造函数创建函数的缺点是不能访问当前作用域中的变量，因此不太常用。

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // 3

四种调用方式

在JavaScript中，函数调用有四种方式：函数调用、方法调用、构造函数调用和apply/call调用。

函数调用

直接调用一个函数，这种调用方式是最普通和最简单的调用方式：

function sayHello(name) {
  console.log(`Hello ${name}`);
}

sayHello('John'); // Hello John

方法调用

当一个函数是一个对象的属性时，我们就称它为这个对象的方法。方法调用是在一个对象上调用一个函数，此时函数中的this指向这个对象：

const person = {
  name: 'John',
  sayHello() {
    console.log(`Hello ${this.name}`);
  }
};

person.sayHello(); // Hello John

构造函数调用

构造函数创建一个类的实例。当使用new关键字调用一个函数时，它就成为了一个构造函数：

function Person(name) {
  this.name = name;
}

const john = new Person('John');
console.log(john.name); // John

apply/call调用

apply和call方法可以改变函数执行时的this指向，也可以将一个参数数组传递给函数。

function sayName() {
  console.log(`My name is ${this.name}`);
}

const person1 = {name: 'John'};
const person2 = {name: 'Jane'};

sayName.call(person1); // My name is John
sayName.apply(person2); // My name is Jane

调用顺序

当一个函数被调用时，它会根据其调用方式来确定this的值。下面是调用顺序的规则：

1. 如果函数使用了new关键字，那么this指向新创建的对象。
2. 如果函数是用apply、call或bind调用的，那么this指向被指定的对象。
3. 如果函数是作为一个对象的方法调用的，那么this指向该对象。
4. 如果函数没有使用上述方法中的任何一种调用方式，那么this指向全局对象（在浏览器中是window，在Node.js中是global）。

示例

函数声明和方法调用

function MyClass(name) {
  this.name = name;
}

MyClass.prototype.sayHello = function () {
  console.log(`Hello ${this.name}`);
}

const instance = new MyClass('John');
instance.sayHello(); // Hello John

apply调用

function sayName() {
  console.log(`My name is ${this.name}`);
}

const person = {name: 'John'};

sayName.apply(person); // My name is John

在上面的例子中，我们使用apply将person作为sayName函数的上下文（this指向）来调用sayName。