Mind map + code examples make the knowledge points from scope to scope chain clear at a glance!

Scope

The scope will not be too long, as my own summary of Js The third article is mainly a link between the past and the following.
Later, we will cover execution context, closure and other related topics. In order to avoid too much content, the scope part is summarized separately.

Table of contents

• Preface
• 1. Definition of scope
• 2. Understanding scope
• 3. Scope chain
• 4. Thoughts and summary

• 5. Write at the end

(Free learning recommendation: javascript video tutorial)

Preface

JavaScript Internal Skill Series:

1. This points to detailed explanations, and the combination of mental maps and code allows you to understand this, call, and apply in one article. Series (1)
2. From prototype to prototype chain, this article on cultivating JavaScript internal skills is really not to be missed! Series (2)
3. This article

1. Definition of scope

A map summarizes the contents of this section

Note: In addition to the scope, here are the latest enterprise-level Vue3.0/Js/ES6/TS/React/Node and other practical videos in 2020 Tutorial, click here to get it for free, novices please do not enter

1.1 Common explanations

1. ## used in a piece of program code #The name is not always valid, and the scope that limits its availability is the scope of the name;
The scope specifies
2. how to find the variable, that is, determine the current execution Code's access permissions to variables;
In layman terms, a scope is a
3. set of rules used to determine where and how to find a certain variable's rules

function func(){
	var a = 100;
	console.log(a); // 100}console.log(a) // a is not defined a变量并不是任何地方都可以被找到的

Copy after login

1.2 Scope working model in JavaScript

The scope of a function is determined when the function is defined.

The scope of the function is It is decided when the function is called;

1.3 Global variables and local variables

#according to the way variables are defined. ##Local variables: can only be accessed within the function, not accessible outside the function;

• function fn(){
  	var name = '余光';
  	console.log(name);}console.log(name); // ？fn(); // ？

  Copy after login
Global: can be accessed anywhere The object reached has global scope.

• All undefined and directly assigned variables are automatically declared to have global scope

• var a = 100;console.log('a1-',a);function fn(){
  	a = 1000;
  	console.log('a2-',a);}console.log('a3-',a);fn();console.log('a4-',a);

  Copy after login
Note: after ES6 Block-level scope is proposed, and we will discuss the differences between them later.

According to the description in the first section, let’s verify one by one

var value = 1;function foo() {
    console.log(value);}function bar() {
    var value = 2;
    foo();}bar();

bar
• function, and a local scope is formed inside the function ;Declares the value variable and assigns the value 2
• Execute the
foo
• function. There is no value variable in the scope of function foo, and it will be exported Search According to the rules of lexical scope, when the function is defined, the external scope of
foo
• is the global scopeThe result of printing
is 1
If it is a dynamic scope: the result

, I wonder if you have figured it out?

var str = '全局变量';function func(){
	console.log(str+1);
	function childFn(){
		console.log(str+2);
		function fn(){
			console.log(str+3);
		};
		fn();
	};
	childFn();}func();// 全局变量1// 全局变量2// 全局变量3

var a = 100;function fn(){
	a = 1000;
	console.log('a1-',a);}console.log('a2-',a);fn();console.log('a3-',a);// a2- 100 // 在当前作用域下查找变量a => 100// a1- 1000 // 函数执行时，全局变量a已经被重新赋值// a3- 1000 // 全局变量a => 1000

Local scope is generally only accessible within a fixed code fragment. The most common one is in function units:

function fn(){
    var name="余光";
    function childFn(){
        console.log(name);
    }
    childFn(); // 余光}console.log(name); // name is not defined

of the current
• context; If not found, it will search from the parent (parent at the lexical level) Level)
Search in the variable object of the execution context
• ; Always find the variable object of the global context, which is the global object;
• The top of the scope chain is the global object;
• In this way

, which is very similar to prototypes and prototype chains in a sense.

• 查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回undefined
• 查找的属性在作用域链中不存在的话就会抛出ReferenceError。

var scope = "global scope";function checkscope1(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f(); // 注意}checkscope1();var scope = "global scope";function checkscope2(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;}checkscope2()();

The above is the detailed content of Mind map + code examples make the knowledge points from scope to scope chain clear at a glance!. For more information, please follow other related articles on the PHP Chinese website!