重新了解 javascript

最新推荐文章于 2024-04-28 11:43:36 发布

dongceha

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量147

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/dongcehao/article/details/105570451

版权

前端专栏收录该内容

77 篇文章 3 订阅

订阅专栏

最近学了很多东西，发现 js 的很多内容只是凭借着我的主观意识，或者说感觉。所以这需要系统地学习以及整理一下

1、变量提升

首先要明确的一点是，在 es6 出现以前，js 只有四种作用域，

全局作用域
函数作用域
eval 作用域
with 作用域 (在 vue 模板语法的编译之中，就广泛地使用到了这个)，也正是通过这个，在模板语法中才能不适用 this 直接读取到对应的数据

后面三种不谈，就谈谈前面两个

console.log(name)  // function name
console.log(age)   // undefined

function name() {}
var name = 'dong'
var age = 24

可以看到，在这种情况下，就出现了变量提升

在很多文章中，都提到了变量提升是为了解决函数调用的问题，但是 var 又是怎么回事呢？
首先 js 在执行之前，会先进行一遍编译
编译的过程中，并不会执行代码
像上面的代码所示，会解析到 name ，那么会将 name 保存的环境变量中，但是当前是一个函数，有较高的优先级，会覆盖掉 var 的undefined 定义，函数体也被放到了环境变量中
第二个 var name 就如第四点提到的，优先级比函数低，所以内部的存储依旧是 function
到了 age ，则是将 age 放到环境变量中，并且默认赋值为 undefined
然后开始执行，输入如代码中所示
但是有一点是需要注意的，那就是 function 定义不能穿透 if 等语句，如下代码所示，就是类似于 var ，变量提升了，但是却不能对其进行赋值

console.log(f) // undefined
if (true) {
  function f () {}
}

2、let 和 const

正是因为 var 的变量提升以及缺少作用域，所以出现了 let 和const

let 和 const 在 { } 中是存在作用域的，哪怕那只是一个空的 { }
在上一点提到的编译过程之中，其实 let 和 const 在执行之前也被编译到了，那么这个是如何做到暂时性死区和作用域的呢？
在编译到 let 和 const 之后，对应的值就会被放入词法环境(相当于单独的环境变量)中，而不是通常所说的环境变量中，然后引擎在执行的过程之中，会特别注意这一点，禁止代码在定义之前进行访问
所以下面代码的执行结果就很清晰了
当为 var 的时候，由于没有作用域的影响，var 变量提升了，变成了全局作用域，5 个 i 指向了同一个
当为 let 的时候，由于作用域的影响，每一个 {} 都是一个单独的作用域，所以出现了 5 个不同的 i
但是在 for 循环中，实际上出现了两种作用域，一种似 for 循环本身的作用域，还有一种是 { } 包裹的作用域
很多文章都说 let 和 const 没有出现变量提升，但是在我看来，其实已经做了提升，但是禁止你使用，这个就称作暂时性死区，究其原因，就是我第四大点提到的，js 先进行了一遍解析，之后再执行

for (let i = 0; i < 3; i ++) {
  let i = 'hhh'
  console.log(i)
}
// hhh
// hhh
// hhh

3、作用域链

讲作用域链，就肯定会谈到闭包，以及闭包的原理了

闭包的定义，只和词法作用域有关，而和在哪里执行无关
也就是说，一个函数的闭包，只和你在哪里定义了这个函数有关系
然后引用第二大点的 let 和 const，一个作用域会先从词法环境里面找，然后再到环境变量中找，一层一层得找下来，直到匹配或者到全局环境中发现未定义为止
这里又要讲到函数调用栈的概念了，也就是先进后出的关系
在上文中提到的编译阶段，遇到函数的时候，会快速地对这个函数做一次词法扫描，然后将函数中用到的值保存到堆空间中
所以下面输出的是 outer 也是一目了然的事情了

3、this

由于闭包的缺陷(不能手动指定作用域到底是什么 )，js 又引入了 this 的概念

严格模式下，函数调用的时候，内部指向的是 undefined ，而在非严格模式下，指向的是 window
嵌套函数中的 this 不会继承外层函数的 this，这里就引出了 () => {}，就像下图 Vue 中的 mounted 一样，内部定义一个函数，结果 this 指向的是 undefined。。。这里其实就和第一点说的一样，内部调用的时候，是 undefined
各种操作 this 的方法中，this 的指向是有权重的，总的来说，是 obj.fn < fn.bind(obj) / apply / call < new fn()
要注意的是，事件绑定(指向当前 dom)，以及 setTimeout 中的this 指向(指向 window)

4、那么 js 是怎么被解析的呢？

这里面就涉及到了 v8引擎的底层实现，我肯定是不知道的，只讲讲表面

正如上文所讲的，V8引擎在执行之前会编译一遍代码，
编译代码的时候，会将你的代码分成一个又一个的 token，也就是最小的不可分割的部分，例如 var 、 = 、 name 等等
再将 token 转化为 AST 抽象语法树，闭包、变量提升就是在这个阶段完成的(大名鼎鼎的 babel、ESlint 就是基于 AST 语法树来进行编译的)
如果成功便成 AST ，那么自然相安无事，如果变不成，那么就是你写的代码有问题，出现了语法错误，这个时候就会抛出一个错误
但是 AST 依旧处于高层，所以 V8 会将语法树编译成为字节码
事实上字节码依旧不能直接在计算机中运行，而是需要解释器便成机器码才行
那么为什么不直接转为机器码呢？
因为机器码占用的内存实在是太多，在移动端的场景之中，很快就会把内存给吃掉
然后在执行的过程之中，V8 引擎发现有一段代码执行了多次，那么就会把这段代码单独提出来，转化成字节码，保存进内存中
这样你会发现，一段 js 代码会越来越快，浏览器占用的内存也会越来越高

5、把抽象的理论转到可视化

前端就是可视化的直接呈现着，那么有没有办法把上面的那些东西可视化呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function n() {
            var na = 'inner';
            return function () {
                debugger
                console.log(na)
            }
        }
        var fn = n()
        fn()

    </script>
</body>
</html>

dongceha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重新了解 javascript

最近学了很多东西，发现 js 的很多内容只是凭借着我的主观意识，或者说感觉。所以这需要系统地学习以及整理一下1、变量提升首先要明确的一点是，在 es6 出现以前，js 只有五种作用域，全局作用域函数作用域 try/catch 作用域 eval 作用域 with 作用域(在 vue 模板语法的编译之中，就广泛地使用到了这个)后面三种不谈，就谈谈前面两个co...
复制链接

扫一扫