Learn more about es6 scope

Recently re-learned the knowledge of es6. I made some notes of my own understanding based on the video and some information. I hope it can help everyone.

Scope?

One of the most basic models of almost all programming languages ​​is the ability to store values ​​in variables and retrieve and modify these values. In fact, storing values ​​in variables and retrieving values The ability gives status to the program. Without such concepts, while a program can perform some tasks, they will be extremely limited and not very interesting. But where should these variables be stored, and how to read them? In order to achieve this goal, some rules need to be formulated, which are: scope;

[Related course recommendations: JavaScript video tutorial]

## What are the main types of scopes?

作用域主要分为全局作用域、函数作用域、动态作用域、块级作用域；

ObjectTypewindowGlobal scopefnFunction scope{} Block-level scopethisDynamic scope

Scope lookup rules?

1. The execution environment is divided into global scope and function scope;

2. Every time you enter a new execution environment, a scope for searching variables and functions will be created. Chain;
3. The local environment of a function can not only access variables within the function scope, but also the parent environment and even the global environment;
4. The global environment can only access globally declared variables and functions, while You cannot directly access any data in the local environment.

Global scope

Variables defined outside the function are global variables.

Global variables have global scope: all scripts and functions in the web page can be used.
If the variable is not declared within the function (without using the var keyword), the variable is a global variable.

// 以下实例中 carName 在函数内，但是为全局变量。
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

Variables that are not defined inside a function or in a code block exist as attributes of window/global. Variables that are not defined using var can be deleted, but global variables cannot.

Function scope

The variables declared inside the function are called function scope. Variables inside the function cannot be

directly accessed from the outside and can be accessed through retun or closure.

// 此处不能调用 carName 变量
function myFunction() {
    let carName = "Volvo";
    // 函数内可调用 carName 变量
}
<!--rerurn-->
function myFunction() {
    let carName = "Volvo";
    rerurn carName;
    // 函数内可调用 carName 变量
}
let fn=myFunction()//Volvo;

<!--闭包-->
function myFunction() {
    let carName = "Volvo";
    function getName(){
        console.log(carName)
    }
    return getName();
    // 函数内可调用 carName 变量
}
myFunction() //Volvo

Block-level scope

After es6 appeared, use the let command to add a new block-level scope. The outer scope cannot obtain the inner scope. Very safe and clear. Even if the outer layer and the inner layer use the same variable name, they will not interfere with each other.

关于暂时性死区
* 在使用let命令声明变量之前，该变量都是不可用的。如果去调用这种情况被称为暂时性死区。
let 特性
*  let不存在变量提升
*  let不允许重复声明
*  拥有块级作用域
*  不可以使用window去调用
const 特性
*  定义常量
*  不允许修改常量的值
*  不允许先声明后赋值
*  同上
if(1){
  let a = 1
  console.log(a)
}

Dynamic scope

Dynamic scope does not care how and where the functions and scopes are declared, only where they are called from. The mechanism is very similar to this;

In fact, there is a lexical scope (static scope) that extends out of js. The opposite of the lexical scope is the dynamic scope. The scope of the function is when the function is called. Just decided

let name='youzi';
function getName(){
    let name="tuzi";
    function getAge(){
        console.log(name)
    }
    return getAge();
}
getName() //tuzi

Lexical scope

JavaScript uses lexical scope, and the scope of the function is determined when the function is defined.

<!--  这段代码执行就是按照词法作用域去执行的。在函数定义时已经被决定了 -->
let name='youzi';

function getName(){
   console.log(name)
}
function getAge(){
    let name='tuzi';
    getName()
}
getAge() //youzi

This article comes from the

js tutorial column, welcome to learn!

The above is the detailed content of Learn more about es6 scope. For more information, please follow other related articles on the PHP Chinese website!