带你读书之“红宝书”：第三章 语法基础（上）之 var关键词

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

写在前头

大多数小伙伴看技术书籍都会用“啃”来描述读书的直观感受，当然我也是一个前端小白，白的透明那种，但是我在读技术书籍感觉到“啃”的时候，我希望把我啃红宝书第四版的过程的想法，总结带给大家，以供后来者能够更快上手。

注： 本文由于作者水平原因，如有错误之处，恳请大家指正,另外随着学习的深入，体会的加深，我会不断回来更新，修改这类文章。

思维导图

image.png

脉络 （本篇只包含3.3. 变量之3.3.1var关键词）

这小节其实核心就是介绍了var，let，const 这3个变量的关键字，以及平时的声明风格，实践。
本篇先写var关键词

3.3. 变量

image.png

3.3.1var

1. 定义变量类型不固定

简单来说就是使用var关键词声明的变量可以存任何类型的值，就是一个盒子而已。

var name = '张三';
name = 1; // 依然是合法的，但是不推荐这么做

2. 函数作用域

作用域在后面章节会介绍到，这里就简单理解为一个函数{}里面的所有内容。

简单来说就是使用var声明的变量，只有在包含这个变量的函数作用域里面有效。其他地方使用会报错。

 function sayHi() {
            var say = 'hi';
            console.log(say);
        }
 sayHi(); // 调用函数 输出hi。
console.log(say); // 报错

3. 声明提升

就是说可以先上车后补票， 先用这个变量，后面在声明也可以。var声明的关键词，他会自动把声明的变量提升到函数作用域的顶部。

  function sayHi() {
            console.log(say);
            var say = 'hi';
        }
 sayHi(); // 调用函数 输出undefined。

为什么不输出hi？因为var声明的变量只会提升声明，并不会把赋值也提升了。上面的代码和下面的代码等价。

  function sayHi() {
          var say
          console.log(say); 
          say = 'hi';
        }
 sayHi(); // 调用函数 输出undefined。这个时候say还没有被赋值，自然就是undefined

补充：已经声明的变量且为赋值，那么他的值默认是undefined。

4. 重复声明

多次使用var关键词声明同一个变量，都会合并为一次声明这个变量，赋值以最后一次为准确。

  function say() {
         var say = 'hi';
         var say = 'Hi';
         var say = 'Hello';
          console.log(say); 
        }
 say(); // 调用函数输出 Hello 

三次var声明合并，最后是 var say = 'Hello';

5. 省略var关键词，声明。

当省略var 关键词直接书写一个变量名 会被视为是全局变量。并且在严格模式（另外一直JavaScript解析和执行模型）这样会报错。

  function say() {
         say = 'hi'; // say 是全局变量，在函数作业域外依旧起作用
         console.log(say);  
        }
 say(); // 调用函数输出 hi
  console.log(say); // 输出hi