深入理解 JS 课堂笔记 | 青训营笔记

252 阅读3分钟

深入理解 JS 课堂笔记

感觉讲得蛮接地气的,还有实际跑代码的环节。

JS的基本概念

JS的历史

诞生于1995年,由 Brendan Eich 开发,开发周期大概只有10天。

  1. 借鉴C语言的基本语法
  2. 借鉴Java语言的数据类型和内存管理
  3. 借鉴Scheme语言,将函数提升到“第一等公民”(first class)的地位
  4. 借鉴Self语言,使用基于原型(prototype)的继承机制

其实JS创建出来的时候,是有一点粗糙的。

发展

  1. Mocha →1995.9 LiveScript > 1995.12 JavaScript
  2. 1997年6月,第一版ECMAScript发布
  3. 1999年12月,第三版ECMAScript发布
  4. 2009年12月,第五版ECMAScript发布
  5. 2009年,Ryan创建了Node.js
  6. 2010年,Isaac基于node.js写出了npm
  7. 2015年6月,第六版ECMAScript发布

具体的JavaScript的历史可以在这儿看:wohugb.gitbooks.io/javascript/…

各种进程

Browser进程

GPU进程

渲染进程

  1. GUI线程
  2. JS线程
  3. 事件触发线程
  4. 定时器触发线程
  5. 网络线程

插件进程、网络进程等等

JS特性

  1. 单线程
  2. 动态、弱类型
  3. 面向对象、函数式
  4. 解释类语言、JIT
  5. 安全、性能差

单线程

GUI线程和JS线程是互斥的

动态、弱类型

动态语言(弱类型语言)是运行时才确定数据类型的语言,变量在使用之前无需申明类型

 const company = 'Bytedance'

静态语言(强类型语言)是编译时变量的数据类型就需要确定的语言

 String company = 'Bytedance'

面向对象、函数式

JS并不是一门纯面向对象的语言,开发时用得顺手就好。

面向对象涉及到的特性有:原型、继承、封装。

解释类语言、JIT

JS并不是纯的解释型语言,也是会有编译过程的(如变量提升的特性)。

安全、性能差

解释型语言嘛

数据类型

JS的数据类型分为基础数据类型和复杂数据类型两种

基础数据类型

现在有七种

字符串,undefined,数字,null,symbol,biglnt,布尔。

复杂数据类型

复杂数据类型一般是个对象,比如数组、函数等等。

那么复杂的数据类型和基础的数据类型有什么区别呢?

上代码!

 const a = {
     name:'bz'
 }
 const b = a
 b.name = '111'
 console.log(a, b)

运行结果:

 { name: '111' } { name: '111' }

可以看到 b 的修改也作用到了 a 上,这是因为复杂类型一般是一个地址值,是指向实际数据的引用,当把 b 赋值给 a 的时候,实际上是将 a 指向的实际数据的地址值赋值给了 b,修改 b 的 name 字段的时候,实际修改的是 b 指向的数据的值。

为了做个对比,用基础数据类型试试

 const str = '11'
 let newStr = str
 newStr = '22'
 console.log(str, newStr)

运行结果:

 11 22
 const arr=[1,2]
 arr.push(3)
 ​
 const str = 'strstrstr'
 str.slice(0, 2)
 ​
 console.log(arr,str)

运行结果:

 [ 1, 2, 3 ] strstrstr

记住一个结论就好:复杂数据类型的值可以被改变,基础数据类型的值不能被改变。

作用域

变量的可访问性和可见性。

静态作用域,通过它就能够预测代码在执行过程中如何查找标识符。

全局作用域、函数作用域、块级作用域(ES6新增)。

变量提升

  1. var有变量提升
  2. let、const没有变量提升,提前访问会报错
  3. function函数可以先调用再定义
  4. 赋值给变量的函数无法提前调用

示例代码:

 console.log(company)
 var company = "Bytedance";

结果:

 undefined

这是由于 var 变量存在变量提升,如果在声明变量之前就使用了变量,则会将变量的声明提升到使用之前。

提升之后的代码:

 var company = undefined
 console.log(company)
 company = "Bytedance";

这个提升仅对 var 有效,使用 const 和 let 都会直接报错。