深入理解JS | 青训营笔记
JS的基本概念
1、数据类型
- 对象：数组、函数
- 基本类型：字符串、undefined、数字、null、symbol、bigInt、布尔
2、作用域：变量的可访问性和可见性
静态作用域：通过它就能够预测代码在执行过程中如何查找标识符
var company = 'byteDance'
function showCompany() {
company = 'douyin'
console.log(company)
}
shouCompany() // douyin
3、变量提升
- var 定义 有变量提升 在定义之前使用 会默认 var 变量 = undefined
- let const 没有变量提升，提前访问会报错
- function 函数可以先调用后定义
- 赋值给变量的函数无法提前调用，因为默认var func = undefined
console.log(company) // error
console.log(dep) // error
console.log(name) // undefined
const company = 'byteDance'
let dep = 'douyin'
var name = 'fpy'
func() // error
var func = showName
showName()
function showName() {
console.log('zq')
}
4、JS是怎么执行的
词法分析、语法分析 编译执行（优化代码）
源代码 ——> AST ——> 字节码 ——> 机器码
逐行解释执行
-
全局执行上下文：代码开始执行时就会创建，将它压执行栈的栈底，每个生命周期内只有一份
-
函数执行上下文：当执行一个函数时，这个函数内的代码会被编译，生成变量环境、词法环境等，当函数执行结束的时候执行环境从栈顶弹出
-
绑定This
-
创建词法环境
-
创建变量环境
- 词法环境：定义标识符和具体变量和函数的关联
- 变量环境：词法环境中被用来存储函数声明和变量绑定的
5、this
-
普通函数的this指向是window
-
对象调用的时候this指向当前对象
- 先赋值再调用，看调用的地方
改变对象的this指向：apply、call、bind
const obj = {
name: '111',
showName() {
console.log(this.name)
}
}
const obj1 = {
name: '222'
}
obj.showName.apply(obj1) // 222
-
在构造函数中
- 创建临时对象
- 将this指向临时对象
- 执行构造函数
- 返回临时对象
6、JS事件循环
console.log('同步代码1')
setTimeout(() => {
console.log('setTimeOut')
}, 0)
new Promise((resolve) => {
console.log('同步代码2')
resolve()
}).then(() => {
console.log('Promise.then')
})
console.log('同步代码3')
// setTimeout是异步 Promise.then是一个微任务 setTimeout中是宏任务 微任务先于宏任务执行
// 同步代码1 同步代码2 同步代码3 Promise.then setTimeout
