初探函数声明、函数表达式、构造函数的三种用法

2023-11-25 11:09:22

函数声明

函数声明是最传统和常用的创建函数的方式。它使用function，后面跟函数名和参数列表，最后是用花括号括起来的一系列语句。函数声明可以出现在任何地方，包括脚本的头部、函数体内、循环体内等等。

// 函数声明
function sum(a, b) {
  return a + b;
}

函数声明的一个特点是，它会在执行上下文创建时提升到该执行上下文的顶部。这意味着，函数声明可以在它被声明之前就被调用。

函数表达式

函数表达式是一种更灵活的方式来创建函数。它使用一个匿名的函数字面量，即用花括号括起来的一系列语句。函数表达式通常被赋给一个变量，以便以后可以引用它。

// 函数表达式
const sum = function(a, b) {
  return a + b;
};

函数表达式不能在它被声明之前就被调用，因为在执行上下文创建时，它不会被提升。

构造函数

构造函数是一种特殊的函数，用于创建对象。它与其他函数的不同之处在于，它必须使用new关键字来调用。当使用new关键字调用构造函数时，会创建一个新的对象，并且该对象的[[Prototype]]内部属性被设置为构造函数的prototype属性。

// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

构造函数通常用于面向对象编程中创建对象。

求和场景比较

为了更直观地理解这三种函数的用法和区别，我们来看一个求和的简单场景。

// 函数声明
function sum(a, b) {
  return a + b;
}

// 函数表达式
const sum = function(a, b) {
  return a + b;
};

// 构造函数
function Sum(a, b) {
  this.a = a;
  this.b = b;
  this.sum = function() {
    return this.a + this.b;
  };
}

// 调用函数
console.log(sum(1, 2)); // 3
console.log(sum(3, 4)); // 7

const s1 = new Sum(1, 2);
const s2 = new Sum(3, 4);
console.log(s1.sum()); // 3
console.log(s2.sum()); // 7