从执行栈闭包到深入理解this

2023-11-04 16:29:50

<html>
<body>



<center><h1>堆栈执行及闭包</h1></center>

JavaScript是一门解释性语言，其执行环境是一个栈。当JavaScript代码被执行时，它会被压入执行栈中。执行栈是一个先进后出的数据结构，这意味着最近被压入的代码将首先被执行。

当JavaScript代码被压入执行栈时，它会创建一个新的执行上下文。执行上下文包含以下内容：

* 局部变量和参数
* 函数的作用域链
* 当前正在执行的函数
* 对外部变量的引用

执行上下文链是一个指针列表，它指向包含当前执行上下文的执行上下文。如果一个函数在另一个函数中被调用，那么子函数的执行上下文将被添加到执行上下文链的末尾。

this引用当前执行上下文的当前对象。这意味着this的值可以根据当前执行的函数而改变。

闭包是一个函数，它可以访问另一个函数的局部变量和参数，即使该函数已经执行完毕。闭包可以通过以下方式创建：

* 将一个函数作为另一个函数的参数传递
* 将一个函数存储在一个对象中
* 将一个函数返回给另一个函数

闭包可以用来实现许多有用的功能，例如：

* 创建私有变量和方法
* 实现延迟执行
* 创建可复用的组件

堆栈执行、闭包和this是JavaScript中非常重要的概念。理解这些概念对于理解JavaScript的底层工作原理非常重要。

## 栈执行示例

```javascript
function outer() {
  var a = 1;

  function inner() {
    var b = 2;

    console.log(a + b); // 3
  }

  inner();
}

outer();

在这个例子中，当outer函数被调用时，它会创建一个新的执行上下文，其中包含变量a和函数inner。当inner函数被调用时，它又会创建一个新的执行上下文，其中包含变量b。

inner函数可以访问outer函数的变量a，这是因为inner函数的作用域链中包含outer函数的执行上下文。

闭包示例

function outer() {
  var a = 1;

  return function inner() {
    var b = 2;

    console.log(a + b); // 3
  };
}

var inner = outer();

inner();

在这个例子中，outer函数返回inner函数。inner函数被存储在一个变量中，因此它可以在outer函数执行完毕后继续存在。

inner函数可以访问outer函数的变量a，这是因为inner函数的作用域链中包含outer函数的执行上下文。

this关键字示例

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

  this.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

var person = new Person('John');

person.greet(); // Hello, my name is John.