• 技术文章 >web前端 >js教程

    思维脑图+代码示例让作用域到作用域链的知识点一目了然!

    coldplay.xixicoldplay.xixi2021-03-18 10:19:28转载406

    作用域

    作用域的篇幅不会太长,作为自己对Js总结的第三篇文章,主要是承上启下。
    之后会涉及到执行上下文,闭包等相关专题,为了避免内容过多,作用域这一部分单独总结。

    目录

    (免费学习推荐:javascript视频教程

    前言

    在这里插入图片描述

    JavaScript内功系列:

    1. this指向详解,思维脑图与代码的结合,让你一篇搞懂this、call、apply。系列(一)
    2. 从原型到原型链,修炼JavaScript内功这篇文章真的不能错过!系列(二)
    3. 本文

    一、作用域的定义

    一张导图概括本节内容

    在这里插入图片描述

    注意:除了作用域,在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/Node等实战视频教程,点击此处免费获取,小白勿进哦

    1.1 常见的解释

    1. 一段程序代码中所用到的名字并不总是有效,而限定它的可用性的范围就是这个名字的作用域;
    2. 作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限;
    3. 通俗的讲作用域就是一套规则,用于确定在何处以及如何查找某个变量的规则
    function func(){
    	var a = 100;
    	console.log(a); // 100}console.log(a) // a is not defined a变量并不是任何地方都可以被找到的

    1.2 JavaScript中作用域工作模型

    JavaScript 采用是词法作用域(lexical scoping),也就是静态作用域:

    与之对应的还有一个动态作用域:

    1.3 全局变量和局部变量

    根据定义变量的方式又可以分为:

    局部变量:只能在函数中访问,该函数外不可访问;

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

    全局:任何地方都能访问到的对象拥有全局作用域。

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

    注意:在ES6之后又提出了块级作用域,它们之间的区别我们之后再来讨论。

    在这里插入图片描述

    二、理解作用域

    根据第一节的描述,我们一一验证一下

    2.1 理解词法作用域

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

    我们结合定义去分析:

    如果是动态作用域的话:结果就是2,不知道你是否想明白了?

    2.2 全局变量

    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

    2.3 局部作用域

    局部作用域一般只在固定的代码片段内可访问到,最常见的就是以函数为单位的:

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

    三、作用域链

    3.1 当查找变量的时候都发生了什么?

    这样由多个执行上下文的变量对象构成的链表就叫做作用域链,从某种意义上很类似原型和原型链。

    3.2 作用域链和原型继承查找时的区别:

    3.3 作用域嵌套

    既然每一个函数就可以形成一个作用域(词法作用域 || 块级作用域),那么当然也会存在多个作用域嵌套的情况,他们遵循这样的查询规则:

    在《你不知道的Js》中,希望读者可以将作用域的嵌套和作用域链想象成这样:

    在这里插入图片描述

    四、思考与总结

    4.1 总结

    在这里插入图片描述

    4.2 思考

    最后,让我们看一个《JavaScript权威指南》中的两段代码:

    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()();

    两段代码的结果都是"local scope",书中的回答是:JavaScript 函数的执行用到了作用域链,这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里,其中的变量 scope 一定是局部变量,不管何时何地执行函数 f(),这种绑定在执行 f() 时依然有效。

    但是它们内部经历的事情是一样的吗?

    相关免费学习推荐:javascript视频教程

    以上就是思维脑图+代码示例让作用域到作用域链的知识点一目了然!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:作用域 作用域链
    上一篇:Nodejs如何操作数据库(增删改查)? 下一篇:js数组怎么转为字符串
    线上培训班

    相关文章推荐

    • javascript 怎么调用php方法• JavaScript专题之五:深浅拷贝• javascript字符串怎么截取前四位• JavaScript专题之七:类型转换• JavaScript 专题之九:数组中查找指定元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网