search
HomeWeb Front-endJS TutorialIntroduction to 'In-depth Understanding of Scope Chains' Javascript Knowledge Points You Must Know_Javascript Skills

Sample code:

Copy code The code is as follows:

var xxxVar1 = 1;
var outer = function(){
var xxxVar2 = 2;

var results = [];

for(var i = 0; i {
var inner = function(){
var xxxVar3 = 3;
return xxxVar3 xxxVar2 xxxVar1 i;
}
results .push(inner);
}

return results;
}

var xxxVar1 = 100;
var xxxVar2 = 200;
var xxxVar3 = 300;
var results = outer();
results[0 ]();
results[1]();
results[2]();

Execution results

What happened? Many people may know the execution result of the above example, but not everyone understands why this is the result, including myself. Noun explanation active object: At the beginning of a function call, the JavaScript interpreter will collect all local variables (variables declared in the form of var) in the function body and store these local variables in an object called an "active object". All variables are initially undefined.
Code example
Copy code The code is as follows:

var fun = function(){
alert(name);
var name = 'Duan Guangwei';
}

When executing this function (fun()), the function body has not been executed yet. The current active object is [{ name: undefined }], so the result of fun() execution is:

  • [scope] attribute of function: Each function is assigned a [scope] attribute when it is defined (when generating a function instance), which points to the current "scope chain". This attribute is not accessible to developers, only javascript can access it.
  • Scope chain: When a function is called, the JavaScript engine will maintain a scope chain for this call. This scope chain is the scope chain pointed to by [scope] of the function plus the active object when the function is called, in the form Such as [active object, scope chain when function is defined].
    Code example
    Copy code The code is as follows:

    var a = 1;
    //Step 1: [ { a: 1, outer: undefined } ]

    var outer = function(){
    //Step 3: [ { b: undefined, inner: undefined } ,{ a: 1, outer: function } ]
    var b = 2;
    var inner = function(){
    //Step 5: [ {}, { b: 2, inner: function } ,{ a: 1, outer: function } ]
                                                                                                                                                                                                                ​]
    return inner();
    }

    //Step 2: [ { a: 1, outer: function } ]
    outer();



    Scope Chain Rule Rule 1

    Javascript generally runs in a certain host. Each host will provide a "global object", or "global active object". This global object is the root node of all scope chains. Rule 2

    The rule for "value operations" (such as: alert(xxxVar)) is to search for variables named "xxxVar" along the scope chain, return the first found value, and throw if not found Exception (ReferenceError: xxxVar is not defined).

    Rule 3

    The rule of "assignment operation" (such as: xxxVar = 'Duan Guangwei') is to search for variables named "xxxVar" along the scope chain and overwrite the first found value. If not found, " xxxVar" is added to the global object. Note: The concept of "closure" is implemented through "scope chain", while C# is implemented through the compiler, and .NET does not support it.
  • Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

    去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

    JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

    原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

    怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

    JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

    JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

    javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

    方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

    整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

    本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

    foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

    foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Repo: How To Revive Teammates
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: How To Get Giant Seeds
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    WebStorm Mac version

    WebStorm Mac version

    Useful JavaScript development tools

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    Atom editor mac version download

    Atom editor mac version download

    The most popular open source editor

    SublimeText3 English version

    SublimeText3 English version

    Recommended: Win version, supports code prompts!