JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】

零.前言

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客

JavaScript(二)---【js数组、js对象、this指针】-CSDN博客

JavaScript(三)---【this指针，函数定义、Call、Apply、函数绑定、闭包】-CSDN博客

一.执行上下文

1.1简介

“执行上下文”(execution context 简称CE)是指：“当js引擎解析到可执行代码片段的时候，就会做一些执行前的准备工作，这个准备工作就是执行上下文”。

这么说可能难以理解，通俗点来说：“将变量、函数声明提升到全局变量层次，从而可以使所有的代码段都可以使用这些变量、函数”。

1.2执行上下文的类型

• 全局执行上下文：只有一个，就是window对象，this指针指向它
• 函数执行上下文：只有某个函数被调用的时候才会创建，可以有无数个
• eval函数执行上下文：在运行eval函数时创建的，很少使用(且不建议使用eval)

1.3执行上下文栈

这个“栈”用于管理在代码执行期间创建的执行上下文

特点：

1. 单线程、在主线程上进行
2. 同步执行，按从上到下执行
3. 全局上下文只有一个，函数上下文可以有无限个
4. 函数每调用一次，就会产生一个函数执行上下文栈

1.4实际操作

说了这么多，可能有点蒙圈

不过总结就是一句话：“全局执行上下文”的存在，使我们可以先使用某个变量、函数，再定义它。

我们先看一个“正常逻辑”的代码；

    <script>
        function upDownText(x){
            console.log(x);
        }
        upDownText("100");
    </script>

 在上面的例子中：“我们先定义了upDownText函数，再执行它，这当然是没有任何问题的”

那我们再看下面这个例子：

    <script>
        upDownText("100");
        function upDownText(x){
            console.log(x);
        }
    </script>

 我们先调用upDownText函数，之后再创建它，这也是可以的

（不过不推荐这样写，有点反人类）

学过Python、C++的同学可能会疑惑，为啥可以执行？？

在C++中如果“先调用、后创建，需要在文件开头声明这个函数”

那么在JS中也是一个道理，不过JS的“执行上下文”帮我们完成了“开头声明”这个操作，当某个变量和函数被定义时，在JS的编译阶段就会自动“将这些变量、函数记录在全局执行上下文栈中”，因此当我们在文件的任何地方都可以调用这些变量、函数。

二.hositing提升

1.1简介

hositing提升用于将某个（变量、函数）提升到全局变量

注意：

提升只能提升“声明”，不能提升它的初始化，这也意味着：“如果提升一个没有值的变量，那么值会是undefined”

1.2使用方法

那具体什么时候会用到呢？

别急，我们来看一个例子：

    <script>
        x = 100;
        console.log(x);
    </script>

这个例子，我们没有使用：“var、const、let”修饰符来声明这个变量，因此这个变量的数据类型是不确定的，但这并不妨碍我们使用它，我们仍然可以打印它的值：

但如果，我们：“先使用、后声明、最后赋值”会怎么样呢？

    <script>
        console.log(x);
        var x;
        x = 100;
    </script>

结果：

可以看到结果居然是：“undefined”！！

这是为什么？

我们来思考一下：“提升只能提升声明，而无法提升初始化！”

此时虽然x被提升了，但是x的值(初始化)没有被提升，所以它的值就是默认值(undefined)

但如果，我们：“先赋值、后使用、再初始化”

    <script>
        x = 100;
        console.log(x);
        var x;
    </script>

结果：

由此我们可以得到一个通用的结论：“提升只能提升声明，无法提升值。而提升后的变量的值，取决于先前有没有对这个变量赋值”

尽管如此，使用“提升”是非常反人类的！

三.严格模式

3.1简介

严格模式用以定义代码的书写风格，使用严格模式下的代码，不允许使用提升、重复定义等操作

通俗点来说：“禁止一切反人类行为”

3.2使用方法

在“脚本”或者“函数”开头处添加“use strict”;来声明严格模式，一定要加双引号。

例如：

    <script>
        "use strict";
        x = 3.14;
    </script>

效果：

在严格模式下，不允许未声明就使用变量。

如果在函数内使用严格模式，那么父容器(父函数)将不具有严格模式

3.3在严格模式中不允许的事项

1. 不声明变量就使用变量
2. 使用delete关键字删除变量、函数
3. 在函数参数中出现多个相同参数名
4. 转义字符不被允许使用
5. this代指全局对象的地方全部被替换成this代指“undefined”

四.事件

4.1简介

HTML事件是发生在“HTML”元素上的事情

在HTML中发生这些事情时，JS能够对不同的事情做出反应

例如，当用户点击某个HTML元素时、当页面完成加载时、用户鼠标移动时等等事情，都被称为事件

4.2绑定事件的三种方法

将某个事件与某个标签绑定，有三种方法，在本章我们只着重讨论第一种方法：

1. 将事件作为属性嵌入进标签内
2. 将事件作为属性嵌入进DOM内
3. 使用addEventListener方法

将事件作为属性嵌入进标签内，非常简单，只需要在HTML中标签内写入即可：

    <h1 id="sample" onclick="clickH1()">我暂未被修改,点击我文本会被修改</h1>
    <script>
        function clickH1(){
            p = document.getElementById("sample");
            p.innerHTML = "我被修改了";
        }
    </script>

点击前：

点击后：

4.3常见的事件

• onchange：HTML元素被改变时
• onclick：当用户点击HTML元素时
• onmouseover：当用户把鼠标移动到HTML元素上时
• onmouseout：当用户把鼠标从HTML元素上移开时
• onkeydown：当用户按下键盘按键时
• onload：当页面完成加载时