返回

JS函数基础全解，从匿名到构造函数，读完融会贯通！

前端

匿名函数

匿名函数是指没有名称的函数，通常使用函数表达式来定义。匿名函数可以作为参数传递给其他函数，也可以作为立即执行函数来使用。

创建匿名函数

匿名函数可以通过以下两种方式创建：

  • 使用函数表达式：
const fn1 = function () {
  // 函数体
};
  • 使用箭头函数：
const fn2 = () => {
  // 函数体
};

调用匿名函数

匿名函数可以通过以下两种方式调用：

  • 直接调用：
fn1();
  • 作为参数传递给其他函数：
function callFunction(fn) {
  fn();
}

callFunction(fn1);

匿名函数的优点

  • 匿名函数可以提高代码的可读性和可维护性。
  • 匿名函数可以减少变量的污染。
  • 匿名函数可以方便地作为参数传递给其他函数。

构造函数

构造函数是指用于创建对象的函数。构造函数的名称必须与类名相同，并且首字母必须大写。

创建构造函数

构造函数可以通过以下方式创建：

class MyClass {
  constructor() {
    // 构造函数体
  }
}

调用构造函数

构造函数可以通过以下方式调用：

const myObject = new MyClass();

构造函数的优点

  • 构造函数可以方便地创建对象。
  • 构造函数可以初始化对象的属性和方法。
  • 构造函数可以实现类的继承。

函数参数

函数参数是指函数接收的输入值。函数参数可以在函数定义时指定，也可以在函数调用时传递。

指定函数参数

函数参数可以在函数定义时指定，参数类型和名称之间使用冒号分隔，多个参数之间使用逗号分隔。

function myFunction(param1, param2) {
  // 函数体
}

传递函数参数

函数参数可以在函数调用时传递，参数值和参数名称之间使用冒号分隔，多个参数之间使用逗号分隔。

myFunction(value1, value2);

函数参数的默认值

函数参数可以指定默认值，如果函数调用时没有传递参数值，则使用默认值。

function myFunction(param1 = "default value") {
  // 函数体
}

函数调用

函数调用是指执行函数的过程。函数可以通过以下方式调用：

  • 直接调用：
myFunction();
  • 作为参数传递给其他函数：
function callFunction(fn) {
  fn();
}

callFunction(myFunction);
  • 使用事件监听器：
document.addEventListener("click", myFunction);

函数作用域

函数作用域是指函数可以访问的变量和函数的集合。函数作用域包括局部作用域和全局作用域。

局部作用域

局部作用域是指函数内部的变量和函数的集合。局部作用域只在函数执行期间存在，函数执行结束后，局部作用域中的变量和函数将被销毁。

function myFunction() {
  // 局部作用域
  let localVariable = "local value";

  function innerFunction() {
    // 局部作用域
    let innerVariable = "inner value";

    console.log(localVariable); // "local value"
    console.log(innerVariable); // "inner value"
  }

  innerFunction();
}

myFunction();

// 全局作用域
console.log(localVariable); // ReferenceError: localVariable is not defined
console.log(innerVariable); // ReferenceError: innerVariable is not defined

全局作用域

全局作用域是指脚本中的变量和函数的集合。全局作用域在脚本执行期间一直存在，脚本执行结束后，全局作用域中的变量和函数将被销毁。

// 全局作用域
let globalVariable = "global value";

function myFunction() {
  // 局部作用域
  let localVariable = "local value";

  console.log(globalVariable); // "global value"
  console.log(localVariable); // "local value"
}

myFunction();

// 全局作用域
console.log(globalVariable); // "global value"
console.log(localVariable); // ReferenceError: localVariable is not defined

闭包

闭包是指可以访问其他函数作用域中的变量和函数的函数。闭包通常用于保存状态或实现私有变量。

function outerFunction() {
  // 局部作用域
  let outerVariable = "outer value";

  function innerFunction() {
    // 局部作用域
    let innerVariable = "inner value";

    console.log(outerVariable); // "outer value"
    console.log(innerVariable); // "inner value"
  }

  return innerFunction;
}

const innerFunction = outerFunction();

// 全局作用域
innerFunction(); // "outer value" "inner value"