likes
comments
collection
share

前端三剑客之JavaScript——预解析、对象数据类型、数据存储

作者站长头像
站长
· 阅读数 4

一、预解析（重点）

  • 预解析其实就是js代码的编译与执行
  • js是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后再执行代码
  • js代码在运行的时候，会经历解释代码和执行代码
  • JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字var和function开头的语句块提前进行处理，function声明具有更高的优先级。
  • 处理过程：当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。

1、解释代码

  • 因为是在所有代码之前进行解释，所以叫做预解析（预解释）
  • 需要解释的内容有两个
    • 声明式函数
      • 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数
      • 也就是会把函数名进行提前声明, 并且赋值为一个函数
    • var关键字
      • 在内存中先声明有一个变量名
      • 会把 var 关键字声明的变量进行提前说明, 但是不进行赋值
  • 注意点
    • 赋值式函数var fn = function( ){ }按照var的规则进行解析
    • 在预解析阶段如果变量名和函数名重名了，最终的解析结果是函数为准，也就是函数的优先级高于变量名
    • 在if语句中，不管条件是否成立，里面的代码都会进行预解析
    • return后面的代码虽然不执行，但是会进行预解析
  • 结论：通过预解析，我们知道函数名不要和变量名重名/声明式函数可以先调用，尽量不要先调用/尽量使用赋值式函数来定义

2、解析var关键字

//解析var关键字 
console.log(num)//undefined 
var num = 100 
console.log(num)//100

代码分析

//预解析代码如下 
var num 
//代码执行过程如下 
console.log(num) 
num = 100 console.log(num)

3、解析声明式函数

//解析声明式函数 
fn()//console.log('fn函数') 
function fn(){console.log('fn函数')} 
fn()//console.log('fn函数')

代码分析：

//预解析 
function fn(){
    console.log('fn函数')
} 
//代码执行 
fn() 
fn()

4、注意点

4-1、赋值式函数var fn = function(){} 按照var的规则进行解析

fn()// Uncaught TypeError: fn is not a function 
var fn=function(){
    console.log('啦啦啦')
}
fn()

代码分析：

//预解析
var fn 
//代码执行 
fn() 
fn=function(){ 
    console.log('啦啦啦')
} 
fn()

4-2、预解析中重名的问题

1、当你使用var定义变量的和声明式函数重名的时候，以函数为主

2、只限于在预解析阶段，以函数为准

num()//我是 num 函数 
function num() { console.log('我是 num 函数') } 
num()//我是 num 函数
var num = 100 
num()//报错

代码分析：

//预解析 
function num() { console.log('我是 num 函数') } 
var num
//代码执行 
num() 
num()
num=100 
num()

4-3、预解析中特殊情况

在代码中，不管if条件是否为true，if语句代码里面的内容依旧会进行预解析

//预解析的特殊情况 
// 1. if语句 
console.log(num) // undefined 
if (true) { 
    // 第一件事: var num 
    // 第二件事: num = 100 
    var num = 100 
} 
console.log(num)

函数体内，return后面的代码虽然不执行，但是会进行预解析

//预解析的特殊情况 
// 2.return后面
function fn() {
    console.log('我是 fn 内的代码')
    console.log(num) // undefined 
    return 
    // 第一件事: var num 
    // 第二件事: num = 100 
    var num = 100 
    console.log(num) 
} 
fn()

二、对象数据类型

1、了解对象

  • 对象是一个复杂的数据类型，存储了一些基本数据类型的一个集合
var obj = { 
    num: 100,
    str: 'hello world',
    boo: true 
}
  • 这里的{ }和函数中的{ }不一样
  • 函数里面的是写代码的，而对象里面是写一些数据的
  • 对象就是一个键值对的集合
  • { }里面的每一个键都是成员
  • 也就是说，我们可以把一些数据放在一个对象里面，那么他们就互不干扰了
  • 简单的来说就是我们准备了一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据

2、创建一个对象

字面量的方式创建一个对象

//创建一个空对象 
var obj = {} 
//向对象里面添加成员 
obj.name = 'gege' 
obj.age = 18 
//可以手动添加 
var a1 = {键1：值1，键2：值2} 
//键的命名规则遵循之前的变量的命名规则，可以用纯数字给到的键名 
//多种类型命名的时候，数字不能开头

内置构造函数的方式创建对象

//创建一个空对象
var obj = new Object() 
//向对象中添加新成员 
obj.name = 'gege'
obj.age = 20

3、对象操作

  • 对象的操作就是操作里面的数据，分为增、删、改、查
  • 操作对象上的数据有两种语法：点语法和数组关联语法
  • 点语法：
    • 增：对象名.键名 = 值
    • 删：delete 对象名.键名
    • 改：对象名.键名 = 值
    • 查：对象名.键名
// 准备一个空对象 
var obj = {} 
console.log(obj) 
// 1. 增加 
obj['name'] = '安安' 
obj['age'] = 18 
obj['gender'] = '男' 
console.log(obj) // { age: 18, name: '安安', gender: '男' } 
// 2. 删除 
delete obj['gender'] 
console.log(obj) // { age: 18, name: '安安' } 
// 3. 修改 
obj['name'] = '小安' 
console.log(obj) // { age: 18, name: '小安' } 
// 4. 查询 
console.log(obj['name']) // '小安' 
console.log(obj['age']) // 18 
console.log(obj['gender']) // undefined

4、对象操作的区别

对于名字的操作：

  • 如果是符合变量命名规则和规范的键名, 两种语法都可以
  • 纯数字只能使用数组关联语法, 不能使用点语法
  • 带有特殊符号的, 只能使用数组关联语法, 不能使用点语法
// 准备一个对象 
var obj = { 
    a1: 100,
    $5: 200,
    _346: 400, 
    1: true, 
    2: 'hello world',
    '#abc': 33, 
    'font-size': '50px' 
} 
// 访问 
console.log(obj.a1) 
console.log(obj['a1']) 

console.log(obj.$5) 
console.log(obj['$5']) 

console.log(obj._346) 
console.log(obj['_346']) 

console.log(obj[1]) 
console.log(obj.1) // 会报错 

console.log(obj.#abc);//会报错 
console.log(obj['#abc']);

console.log(obj['font-size'])
console.log(obj.font - size) // 不行, 变成了 obj.font 和 size 进行减法运算

和变量相关的时候：

  • 点语法, 不管如何, 都不能和变量产生联系。始终都是访问的对象内某一个准确的键名
  • 数组关联语法, 当你的 [ ] 内书写的是一个变量的时候，会把变量解析出来填充在 [ ] 内
// 和变量相关的访问 
var obj = { name: '唐僧', age: 100, 1: true }
var a = 'name' 
// 使用点语法的时候 
console.log(obj.name) // 访问 obj 内一个叫做 name 的键 
console.log(obj.a) // 访问 obj 内一个叫做 a 的键, 和 a 变量没有任何关系 
console.log(obj['a']) // 访问 obj 内一个叫做 a 的键, 和 a 变量没有任何关系 
console.log(obj[a]) // 访问 obj 内一个叫做 name 键

5、对象遍历

  • 对象没有办法使用for循环来进行遍历
    • 因为 for 循环能提供的是一组有规律的数字
    • 但是对象内存放的是键值对，键名是没有规律的
  • 使用 for in 来循环遍历
    • for in 的主要作用就是用来遍历对象数据类型的
    • 语法：
for（var 变量名 in 对象名）{ 
    //重复执行的代码，对象内有多少个成员，就执行多少回 
    //对象名[键名] 就是对象中的每一个成员的值 
}

示例：

var obj = { name: 'gege', age: 18, gender:'男' } 
for(var aa in obj){
    //拿到所有的键名 
    console.log(aa); 
    //拿到所有的键值 
    console.log(obj[aa])
}

三、数据存储

  • 通过前面的学习我们知道，数据类型分为基本数据类型（简单数据类型）和引用数据类型（复杂数据类型）
  • 基本数据类型和复杂数据类型最大的区别就是存储上的区别
  • 我们的存储空间分为栈和堆
    • 栈：主要存放基本数据类型的内容
    • 堆：主要存放复杂数据类型的内容
  • 复杂数据类型存放在堆内存中，无序排列，根据地址来查找（堆空间地址）

1、基本数据类型存储

  • 直接在栈空间内存储一个数据
  • 栈空间：按序排列，先来的在栈底，后来的在栈顶。

2、复杂数据类型存储

  • 在堆空间里面开辟一个存储空间
  • 把数据存储到存储空间内
  • 把存储空间的地址赋值给栈里面的变量

前端三剑客之JavaScript——预解析、对象数据类型、数据存储

3、数据类型赋值

3-1、基本数据类型赋值

  • 赋值的时候，就是直接值的赋值
  • 赋值以后，两个变量互相之间没有任何关系
  • 改变一个变量，另一个不会发生变化
var n = 10 
//把 n 存储的值赋值给了 m 变量 
var m = n 
console.log(m) 
console.log(n) 
m = 20 
console.log(m) 
console.log(n)

3-2、复杂数据类型赋值

  • 复杂数据类型赋值的时候，是把变量内存储的地址进行赋值
  • 赋值以后，两个变量操作的是一个存储空间
  • 任意一个变量去改变存储空间内的数据，另一个变量看到的一样是改变以后的
var obj = {name:'武松'} 
//把obj存储的值赋值了一份给obj2 
var obj2 = obj 
console.log(obj) 
console.log(obj2) 
obj2.name = '宋江' 
console.log(obj) 
console.log(obj2)

4、数据类型比较

  • 基本数据类型，就是值和值之间的比较
  • 复杂数据类型，是地址和地址之间的比较
    • 假设我们创建了两个对象，那么就会在 堆空间 里面开辟两个存储空间存储数据（两个地址）
    • 虽然存储的内容是一样的，那么也是两个存储空间，两个地址
    • 复杂数据类型之间就是地址的比较，所以两个变量的地址是不一样的
    • 所以两个复杂数据类型比较，最终的结果就是false