带你读书之“红宝书”:第三章 语法基础(上)之 var关键词

简介: 带你读书之“红宝书”:第三章 语法基础(上)之 var关键词

写在前头

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


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


思维导图

微信截图_20221111180104.png


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

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


3.3. 变量

微信截图_20221111180117.png


3.3.1var

  1. 定义变量类型不固定

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

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


  1. 函数作用域

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

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

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


  1. 声明提升

就是说可以先上车后补票, 先用这个变量,后面在声明也可以。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。

  1. 重复声明

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

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

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


  1. 省略var关键词,声明。

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

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



目录
相关文章
|
4月前
|
Python
Python 控制结构:开启震撼编程之旅,犹如舞台上的精彩戏剧,让你的代码活起来!
【8月更文挑战第22天】Python的控制结构是编程的核心,包括条件判断(if-elif-else)和循环(for、while)。例如,可以用if-elif-else判断学生成绩等级,for循环计算1至10的总和,while循环实现猜数字游戏。此外,列表推导式等高级特性让操作更简洁高效。掌握这些结构能显著提升编程效率和代码质量。
60 1
|
5月前
|
存储 Python
逆天改命?Python元类:从菜鸟到大师,一键升级你的编程认知
【7月更文挑战第6天】Python的元类是类的构造器,允许控制类的创建。元类`Meta`通过`__new__`方法动态添加属性,如示例所示,创建`MyClass`时添加`new_attr`。元类还能实现高级功能,如单例模式,`SingletonMeta`元类确保同一类的所有实例相等。元类是进阶技术,能提升代码的灵活性和创造力。
41 0
|
Java C++ Python
PYTHON知识点学习-函数(上)[你还记得奥特曼的口号吗?]
PYTHON知识点学习-函数(上)[你还记得奥特曼的口号吗?]
61 0
|
前端开发
带你读书之“红宝书”:第三章 语法基础(上)之 关键词后续
带你读书之“红宝书”:第三章 语法基础(上)之 关键词后续
102 0
带你读书之“红宝书”:第三章 语法基础(上)之 关键词后续
|
前端开发 JavaScript
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型前部分
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型前部分
88 0
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型前部分
|
前端开发 JavaScript C语言
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型中部分
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型中部分
77 0
带你读书之“红宝书”:第三章 语法基础(中)之 数据类型中部分
|
JavaScript 前端开发 Python
带你读书之“红宝书”:第三章 语法基础(上)
带你读书之“红宝书”:第三章 语法基础(上)
87 0
带你读书之“红宝书”:第三章 语法基础(上)
|
前端开发
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符③
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符③
77 0
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符③
|
前端开发 JavaScript C语言
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符④
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符④
97 0
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符④
|
前端开发 C语言
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符①
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符①
74 0
带你读书之“红宝书”:第三章 语法基础(中)之 3.5操作符①