掌握Javascript作用域和闭包，提升开发功力

2023-12-28 10:15:31

JavaScript是一门非常灵活的语言，它的作用域和闭包机制也十分复杂。理解作用域和闭包对于编写健壮的JavaScript代码非常重要。

作用域

作用域是指变量和函数可以被访问的范围。在JavaScript中，有两种作用域：全局作用域和局部作用域。

全局作用域是指在整个程序中都可以访问的变量和函数。局部作用域是指在函数内部可以访问的变量和函数。

全局作用域

全局作用域中的变量和函数可以直接被访问，而不需要使用任何限定符。例如：

var globalVariable = 10;

function globalFunction() {
  console.log(globalVariable);
}

globalFunction(); // 输出：10

局部作用域

局部作用域中的变量和函数只能在函数内部访问。要访问局部作用域中的变量和函数，需要使用限定符。限定符可以是var、let或const。例如：

function localFunction() {
  var localVariable = 20;

  console.log(localVariable); // 输出：20
}

localFunction(); // 输出：20

console.log(localVariable); // ReferenceError: localVariable is not defined

闭包

闭包是指可以访问其他函数作用域中变量的函数。闭包可以用来保存数据，也可以用来实现私有变量。

要创建一个闭包，只需要在函数内部定义另一个函数即可。例如：

function outerFunction() {
  var outerVariable = 10;

  function innerFunction() {
    console.log(outerVariable); // 输出：10
  }

  return innerFunction;
}

var innerFunction = outerFunction();

innerFunction(); // 输出：10

在上面的示例中，innerFunction是一个闭包，它可以访问outerFunction作用域中的outerVariable变量。

自由变量

自由变量是指在函数内部被使用的，但没有在函数内部定义的变量。自由变量的值是在函数被调用时确定的。

例如：

function outerFunction() {
  var outerVariable = 10;

  function innerFunction() {
    console.log(outerVariable); // 输出：10
  }

  return innerFunction;
}

var outerVariable = 20;
var innerFunction = outerFunction();

innerFunction(); // 输出：20

在上面的示例中，outerVariable是一个自由变量。它的值是在innerFunction被调用时确定的。

this指向

this是指向当前执行代码的对象。this的指向可以是全局对象、函数对象、DOM元素等。

例如：

var person = {
  name: 'John Doe',
  age: 30,
  sayHello: function() {
    console.log(this.name); // 输出：John Doe
  }
};

person.sayHello(); // 输出：John Doe

在上面的示例中，this指向person对象。因此，this.name的值是"John Doe"。

手写bind

bind()方法可以将一个函数绑定到一个特定的对象，使得该函数在被调用时，this关键字指向特定的对象。

function outerFunction() {
  var outerVariable = 10;

  function innerFunction() {
    console.log(this.outerVariable); // 输出：10
  }

  return innerFunction.bind(this);
}

var outerVariable = 20;
var innerFunction = outerFunction();

innerFunction(); // 输出：10