从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：函数 — 今天你学习了吗？（JS：Day8）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
- 前言
- 第九节课：作用域、执行顺序
- - 一、作用域【ES5】
  - 二、解析顺序
  - 三、解析顺序练习
  - 四、练习题

前言

这节课我是非常之懵，希望我总结的过程可以再次学会~

第九节课：作用域、执行顺序

一、作用域【ES5】

作用域：脚本的有效范围、作用范围。
分两大类

全局作用域（script）
局部（function）

全局作用域
直接定义在scipt标签下的变量，称之为全局变量。script标签下的函数，称之为全局函数，直接在全局作用域内定义的变量为全局变量。

        var a = 123;alert(window.a);        //123function abc() { }alert(window.abc);      //function abc(){}

函数（局部）作用域

例子：

        // 全局变量var num = 123;function fn() {// 局部变量var num = 666;}console.log(num);  //123   输出的是挂载到window的全局变量

但是如果注释掉全局变量，只输出num，发现也是拿不到局部变量的值，会报错：

当全局作用域与局部作用域都有定义变量的时候，局部作用域里面的值取就近值。

但是如果当里面先输出再定义时，输出为undefined

变量必须先定义，如果没有通过定义的情况，会出现此变量回挂载到顶层对象window中，对window造成污染。

//  上面图片左边又var，右边没有varfunction fn() {str = 'Coisini'}fn();console.log(str)  //Coisini

执行函数内的函数：

        var num1 = 123; function fn() {var num1 = 2;return function () {console.log(num1)}}var a = fn()a()    //2，相当于执行函数内的函数

二、解析顺序

编译阶段
在作用域内声明的‘变量会被提升到作用域的顶部’且对其赋值‘undefined’，这个过程称之为‘变量提升’，上面代码等同于下面（‘还可以访问父级的参数’）
函数提升
在作用域内的函数定义函数会被提升到作用于的顶部，其值为其函数本身，这个过程称之为函数提升，上面代码等同于下面

解析顺序【编译模式】：
1. 编译阶段：
找变量声明，函数声明；
2. 执行阶段：
赋值，读取值，for，if，delete；

eg：

        console.log(a);var a = 3;var a = 2;console.log(a);

结果：

解析顺序：

            1.编译阶段：var a ;var a ;2.执行阶段：console.log(a);//undefineda = 3;a = 2;console.log(a);//2

三、解析顺序练习

第1题

        console.log(num);  //undefined var num = 123;/*定义：var num;执行：console.log(num) //undefinednum = 123;*/

第2题

        function fn() {console.log(1)}var fn = 2;console.log(fn)    //2/*变量出现重复的情况，函数的优先级比var的优先级高！两个fn，相当于重新定义，重新赋值，所以赋值发生变化定义：function fnvar fn 执行console.log(fn) //2*/

对比于：
变量出现重复的情况，函数的优先级比var的优先级高

        function fn() {console.log(1)}var fn;console.log(fn)  // function fn(){console.log(1)}/*变量出现重复的情况，函数的优先级比var的优先级高！两个fn，相当于重新定义，重新赋值，所以赋值发生变化定义：function fnvar fn 执行console.log(fn) //2*/

正式练习开始！第3题

        var a = 5;function fn() {console.log(a);   //undefinedvar a = 10;console.log(a)    //10}fn();

执行顺序：

            定义：var afunction fn执行：fn() [此处又开辟了一个作用域]=> 定义：var a 执行：console.log(a) //undefineda = 10;console.log(a)   //10

第4题

        console.log(a)var a = 10;var a = [];function a() {console.log("fn")}console.log(a)

执行顺序：

            定义：var avar afunction a执行：console.log(a)  //function a(){console.log("fn")}a = 10a = []console.log(a)   //[]

第5题

        console.log(a)a();var a = 1;console.log(a)var a = [];function a() {var b = 1;console.log("fn")}a();console.log(a)

执行顺序：

            定义：var avar afunction a执行：console.log(a)  //function a(){var b=1;console.log("fn")}a()   // fna = 1console.log(a) // 1a = []a() => errorconsole.log(a)  //[]

第6题

        fn()console.log(a)var a = 0;console.log(a)function fn() {var a = 1;// a = 1;时，输出1，而不是undefined}

执行顺序：

            定义：var afunction fn()执行：fn() => 定义：var a执行：a = 1console.log(a) //undefineda = 0;console.log(a) //0

第7题

        fn()()var a = 0;function fn() {console.log(a)var a = 3;function b() {console.log(a)}return b;}

执行顺序：

            定义：var afunction fn执行：fn()()fn() => 定义：var afuntion b执行：console.log(a) //undefineda = 3fn()() => b()定义：执行：console.log(a) //3a = 0

第8题

        function fn1() {var num = 10;function fn2() {console.log(num)}return fn2;}console.log(fn1())var b = fn1();b();

执行顺序：

            定义：function fnvar b执行：console.log(fn1())  =>  // function fn2(){console.log(num)}   //看return值fn1()=>定义：var numfunction fn2执行：num = 10;return fn2;fn1()=>定义：var numfunction fn2执行：num = 10;return fn2;b = fn1() = 返回return  = fn2   b() = fn2() =>  10

四、练习题

        a()function a() {var fn = function () {console.log(123)}return fn1()}a()var a = 0;var a = 0;function fn1() {console.log(a)var a = 1return a;}console.log(fn1())console.log(a)fn1()()

解答：

       a()function a() {var fn = function () {console.log(123)}return fn1()}a()var a = 0;function fn1() {console.log(a)    //undefinedvar a = 1         //函数内有定义，就近原则return a;}console.log(fn1())    //---函数执行，即fn1()返回的是return的值：aconsole.log(a)fn1()()               //---即a()/*注意：什么时候就近原则，什么时候用函数优先级比var的优先级高// 变量出现重复的情况，函数的优先级比var的优先级高,所以上面的函数优先// 函数内外均有定义时，执行函数时取的是函数内的定义，即就近原则定义：function avar afunction fn1 执行：a()  =>  函数执行，重复定义，函数优先定义：var fnfunction执行：        fn = function(){console.log(123)}   x函数并不执行，没有fn()，执行括号,所以不执行return fn1()   fn1() =>定义：var a执行：console.log(a)  -- 就近原则：   //undefineda = 1return a;       ---a = 1a() =>   函数执行，不受局部变量的影响定义：var fnfunction执行：fn = function(){console.log(123)}   x函数并不执行，没有fn()，执行括号,所以不执行return fn1()  fn1() =>定义：var a执行：console.log(a)  -- 就近原则：   //undefineda = 1return a;       ---a = 1a = 0console.log(fn1()) =>fn1() => 定义：var a执行：console.log(a)     -- 就近原则：     //undefineda = 1return a            -- a = 1        console.log(fn1()) => console.log(a)        // 1console.log(a)                                  // 0fn1()() =>fn1() =>定义：var a执行：console.log(a)       ---就近原则    //undefined a = 1return a            ---1fn1()() => a() => 即1() =>                  //报错,a不是函数,即fn1()不是函数*/

预习：从零开始学前端：字符串和数组的方法 — 今天你学习了吗？（JS：Day10）

从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day9）相关推荐

从零开始学前端：CSS引入 --- 今天你学习了吗？（CSS：Day07）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：初识JavaScript --- 今天你学习了吗？（JS：Day01）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:jQuery官网 - 今天你学习了吗?(CSS:Day26) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：复习课程 --- 今天你学习了吗？（CSS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS复合选择器 - 今天你学习了吗?(CSS:Day10) 文章目录从零开始学前端:程序猿小白也可以完 ...
从零开始学前端：表格制作 --- 今天你学习了吗？（CSS：Day04）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:链接跳转 - 今天你学习了吗?(CSS:Day03) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识JavaScript - 今天你学习了吗?(JS:Day1) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...

从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day9）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

文章目录

前言

第九节课：作用域、执行顺序

一、作用域【ES5】

二、解析顺序

三、解析顺序练习

四、练习题

从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day9）相关推荐

最新文章

热门文章