几年之后再看JavaScript--变量的诞生到结束

最新推荐文章于 2024-07-19 21:45:00 发布

简cere

最新推荐文章于 2024-07-19 21:45:00 发布

阅读量192

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_28004379/article/details/106003369

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 数据类型

JS的数据类型分

基本类型（String、Number、Boolean、Null、Undefined、Symbol【ES6中新加入类型】）
引用类型

属性	基本类型	引用类型
定义	简单的数据段	可能有多个值构成的对象
值	可以操作保存在内存中的实际值	保存在内存中的对象，按引用访问
动态属性	undefined	可以添加属性/方法(people.name)

2. 变量的创建

变量：将值赋给某个东西，这个东西就叫~

静态类型(强制类型)：声明一个变量存放指定类型的值。eg:java
动态类型(弱类型)：允许一个变量在任何时刻修改成任何类型的值。eg:javascript

TypeScript 相对于 JavaScript ，提供了静态类型，提高程序正确性。(但笔者认为，如果不出现类型错误的情况下，动态类型在任何时刻反而更加灵活)

大概说说JS引擎进行编译的步骤

分词/词法分析（eg:var a =1会分解成var、a、=、2，这些代码块称词法单元）
解析/语法分析（将词法单元流【数组】转换成一个由元素逐级嵌套所组成的代表了程序语法的结构树即 “抽象语法树”【AST】）
代码生成（将AST转换成可执行代码的过程）
a. 引擎每一次遇到声明，它就把声明传到作用域创建一个绑定。并且对每个声明的变量进行分配内存，默认值为undefined。

  // 声明一个名字a,值为1
  let a = 1

创建变量过程

创建了一个名字a,用来保存后面的值
设置变量a的作用范围（作用域）
在预处理阶段会被提到函数顶部，此时a为undefined【声明提升–变量都是undefined，函数则是该方法，其他会报错XX is not defined】
最后区分不同数据类型进行赋值：
a. 基本类型把值直接保存在变量中
b. 引用类型把对象保存在计算机内存中，同时创建访问内存的地址即引用，把引用保存到变量中

总结：变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对它赋值。

3. 不同类型变量复制原理

基本类型变量复制原理

对于 基本类型的变量来说，两个变量之间可以 参与任何操作而不相互影响。
存在栈中。

  let a = 6
  let b = a
  b = 8 
  console.log(b) // 8
  console.log(a) // 6

在这里插入图片描述

引用类型变量复制原理

对于引用类型变量，复制实际上是指针指向存储在堆中的一个对象，改变其中一个变量，就会影响另一个变量。

  let person1 = {
    name: '小明'
  }
  let person2 = person1
  person2.name = '小红'
  console.log(person1.name) // 小红
  console.log(person2.name) // 小红

在这里插入图片描述

ECMAScript中所有函数的参数都是按值传递的。【参数会复制给一个局部变量(arguments对象的一个元素)，在参数传递引用类型的时候，会把这个值在内存中的地方复制给这个局部变量，因此这个局部变量的改变也会影响函数外部】

4. 检测变量类型

typeof 操作符是检测类型最佳的操作，但是对Object对象不友善。
采用 instanceof 操作符可以区分检测object类型。

两者结合才是最好验证类型的方法

 // typeof
  let genre;
  console.log(typeof genre) // undefined
  genre = 'haha'
  console.log(typeof genre) // string
  genre = 33
  console.log(typeof genre) // number
  genre = NaN
  console.log(typeof genre) // number
  genre = true
  console.log(typeof genre) // boolean
  genre = undefined
  console.log(typeof genre) // undefined
  genre = null
  console.log(typeof genre) // object
  genre = { name: 'cere', gender: 'man' }
  console.log(typeof genre) // object
  genre = [1, 2, 3]
  console.log(typeof genre) // object
  genre = function () { console.log(1) }
  console.log(typeof genre) // function

  // instanceof
  genre = null
  console.log(genre instanceof Object) // false
  genre = { name: 'cere', gender: 'man' }
  console.log(genre instanceof Object) // true
  genre = [1, 2, 3]
  console.log(genre instanceof Array) // true

注意几点

typeof null返回的是object，这个应该算JS的bug，但似乎不会修改(太多代码依赖这个bug，修改导致大量问题)

使用符合条件检测null值的类型
var a = null;
if (!a && typeof a === ‘object’)
NAN 是number类型

null与undefined区别可以参考链接：阮一峰谈undefined与null的区别