函数、作用域链：剖析JavaScript中的重要概念

2023-11-19 15:25:35

在 JavaScript 中，函数是一等公民，这意味着它们可以像变量一样被赋值、传递和执行。函数不仅是强大的工具，也是理解 JavaScript 的关键。

函数

函数是代码的块，它可以被赋予一个标识符，并可以在程序中被调用。函数可以接收参数，并返回一个值。

function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // 3

作用域

作用域是程序中变量和函数的可见范围。JavaScript 中有两种作用域：全局作用域和局部作用域。

全局作用域：在全局作用域中声明的变量和函数可以在程序的任何地方访问。
局部作用域：在函数内部声明的变量和函数只在该函数内部可见。

闭包

闭包是具有访问权限的函数，使其在函数执行结束时仍然有效。

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
console.log(add5(2)); // 7

变量提升

变量提升是指在 JavaScript 中，变量的声明会被提升到函数或块的顶部。

console.log(a); // undefined
var a = 1;

作用域链

作用域链是一个变量和函数查找顺序的列表。当JavaScript解释器在变量或函数中遇到一个标识符时，它会沿着作用域链向上查找，直到找到该标识符的声明为止。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  inner();
}

outer();

this

在 JavaScript 中，this 指向当前执行函数的上下文。

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person = new Person('John');
person.sayName(); // John

执行上下文

执行上下文是JavaScript解释器在执行代码时创建的环境。执行上下文包含当前执行函数的变量和函数、当前执行函数的参数、以及该函数的局部变量。

栈

栈是 JavaScript 解释器用于管理执行上下文的结构。当一个函数被调用时，一个新的执行上下文被压入栈中。当函数执行完毕时，它的执行上下文被弹出栈。

JavaScript 函数

JavaScript 函数是程序的代码块，它们可以接收参数，并返回一个值。函数可以在程序的任何地方被调用。

function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // 3

匿名函数表达式

匿名函数表达式是JavaScript中没有函数名的函数。

const sum = function(a, b) {
  return a + b;
};

console.log(sum(1, 2)); // 3

arguments 对象

arguments 对象包含了传递给函数的所有参数。

function sum() {
  console.log(arguments);
}

sum(1, 2, 3); // Arguments { '0': 1, '1': 2, '2': 3 }

作用域链解释器

作用域链解释器是 JavaScript 解释器用于查找变量和函数的工具。当 JavaScript 解释器在变量或函数中遇到一个标识符时，它会沿着作用域链向上查找，直到找到该标识符的声明为止。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  inner();
}

outer();

词法作用域

词法作用域是指函数的作用域由函数的定义决定，而与函数的调用无关。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  return inner;
}

const inner = outer();
inner();

动态作用域

动态作用域是指函数的作用域由函数的调用决定，而与函数的定义无关。

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // undefined
  }

  return inner;
}

const a = 2;
const inner = outer();
inner();