markdown JavaScript中的执行上下文，提升，范围和闭包

Posted 2021-05-05

# Advanced Javascript

## Execution Contexts, Hoisting, Scopes, and Closures in JavaScript

## Global Execution Context

```
Phase: Creation
window: global object
this: window
```

**Note:** Even if your program doesnt have code inside of it, the JavaScript engine is still going to create a Global Execution Context.

`window` will point to `global object`

`this` will point to `window`

Let us see how the Global Execution Context will change when we add code in it

```js
var name = 'Junmin';
var handle = '@junmindereal';

//function declaration
function getUser () { 
  return {
    name: name,
    handle: handle
  }
};
```

```
Phase: Creation
window: global object
this: window
name: undefined
handle: undefined
getUser: fn()


Phase: Execution
window: global object
this: window
name: "Junmin"
handle: "@junmindereal"
getUser: fn()
```

Can you spot the differences between those two codes above? The key take away is that each Execution Context has two separate phases, a `Creation` phase, and an `Execution` phase and each phase has its own unique responsibilities.

In the Global `Creation` phase, the JavaScript engine will

1. Create a global object.
1. Create an object called “this”.
1. Set up memory space for variables and functions.
1. Assign variable declarations a default value of “undefined” while placing any function declarations in memory.

It’s not until the `Execution` phase where the JavaScript engine starts running your code line by line and executing it.

During the `Creation` phase `window` and `this` are created, variable declarations (`name` and `handle`) are assigned a default value of `undefined`, and any function declarations (`getUser`) are placed entirely into memory. Then once we enter the `Execution` phase, the JavaScript engine starts executing the code line by line and assigns the real values to the variables already living in memory.

To really cement this idea of `Creation` phase vs `Execution` phase, let’s log some values after the Creation phase and before the `Execution` phase.

```js
console.log('name: ', name)
console.log('handle: ', handle)
console.log('getUser :', getUser)

var name = 'Tyler'
var handle = '@tylermcginnis'

function getUser () {
  return {
    name: name,
    handle: handle
  }
}
```

In the code above, what do you expect to be logged to the console? By the time the JavaScript engine starts executing our code line by line and invoking our console.logs, the `Creation` phase has already happened. What that means is that, as we saw earlier, the variable declarations should have been assigned a value of `undefined` while the function declaration should be fully in memory already. So just as we should expect, `name` and `handle` are `undefined` and `getUser` is a reference to the function in memory.

```js
console.log('name: ', name) // name: undefined
console.log('handle: ', handle) // handle: undefined
console.log('getUser :', getUser) // getUser: ƒ getUser () {}

var name = 'Tyler'
var handle = '@tylermcginnis'

function getUser () {
  return {
    name: name,
    handle: handle
  }
}
```

> **Note:** This process of assigning variable declarations a default value of undefined during the creation phase is called **Hoisting**.

Hopefully, you just had an 'Aha!" moment. You may have had “hoisting” explained to you previously without much success. The thing that’s confusing about “hoisting” is that nothing is actually “hoisted” or moved around. Now that you understand Execution Contexts and that variable declarations are assigned a default value of `undefined` during the `Creation` phase, you understanding “hoisting” because that’s literally all it is.

---

At this point, you should be fairly comfortable with the Global Execution Context and its two phases, `Creation` and `Execution`. The good news is there’s only one other Execution Context you need to learn and its almost exactly identical to the Global Execution Context. It’s called the **Function Execution Context** and it’s created whenever a function is **invoked**.