首页  思维导图  详情

Javascript知识框架笔记

2021-05-14 17:04:01   10  举报





AI智能生成

Javascript知识点汇总（更新中）

javascript

javascript知识框架

读书笔记

学习笔记

知识管理

作者其他创作

大纲/内容

进阶

Promise

Generator

await&async

Set & Map

call&apply&bind

执行机制

事件循环

分支主题

防抖和节流

模块化

DOM

跨域

闭包

深拷贝

基础

基本概念

数据类型

Undefined

undefined全局对象的一个属性。

全局作用域中的一个变量，初始值就是原始数据类型 undefined。

用 undefined 值表示任何变量在未赋值前的初始值。

undefined 是一个变量，为了防止篡改，使用 void 0 获取 undefined 值。

Null

值 null 特指对象的值未设置，定义了但是为空。

null 是 JS 关键字，放心使用 null 关键字获取 null 值。

Boolean

两个值 false 和 true，表示逻辑意义上的真和假。

String

基本字符串：字符串字面量（单/双引号定义）和直接调用 String 方法（没有通过 new)。

ES6模板字符串：使用反引号表示。

字符串对象：通过 new 生成对象实例。

字符串长度，不是字符的个数，而是 UTF16编码单元的个数。

Number

数字：JS不区分整数和浮点数值，所有的数字均用浮点数值表示。

Infinity无穷大，-Infinity负无穷大。JS中有 +0 和 -0 的区别，在除法中可以得到无穷大和负无穷大。

0.1 + 0.2 = 0.3 ？

Symbol

ES6 引入，用于表示独一无二的值。

使用 Symbol 函数创建（不需要 new）。

对象的属性名有两种类型：一种是普通字符串，另一种就是 Symbol 类型。

Symbol 做对象属性时，不需要担心属性名冲突问题。

Object

对象可以看做是属性的集合：数据属性和访问器属性，结构相同key-value，其中key可以是字符串或者Symbol类型。

类型转换

《重学前端》PS：装箱转换是把基本类型转为对应的对象。拆箱转换是对象类型都基本类型的转换。

进行显示类型转换后，使用 ‘===’ 进行比较。

String 和 Number 转换都遵循“先拆箱再转换” 的规则。拆箱转为基本类型，再从基本类型转为对应的 String 或者 Number。

变量

ES5

JS 没有块级作用域，函数中的 var 声明，其作用域是函数体的全部。

var 会导致 “变量提升” 现象，变量可以在声明之前使用，值为 undefined。

循环内变量过读共享问题。一个经典问题，如图：

ES6

let 重定义变量会报错。

必须在声明后使用变量，否定报错。不可访问是因为在临时死区中。

let 优化了变量提升的特性；let 声明的全局变量不是全局对象的属性。

let 提供了块级作用域。解决 var 引入的问题，每次迭代时都为 i 创建新的绑定。

const: 用于声明不可变变量，变量声明后必须赋值，否则语法错误。

思考

var 为什么会提升而 let 不会，能说说其原理吗？

作用域

什么是作用域？

作用域是一套规则，用于确定在何处如何查找变量。作用域解决的是变量存储在哪里以及如何程序如何找到变量的问题。

遍历嵌套作用域规则：在查找时会形成一个作用域链，从当前作用域开始查找，
找不到，就向上一级继续查找，直到全局作用域。找不到抛出 ReferenceError。

两种变量查找方式：LHS 和 RHS。赋值操作的左侧进行LHS查询，右侧进行RHS查询。

RHS查询：查找某个变量的值。LHS查询：找到变量本身，对其赋值；未找到创建一个并赋值。
ES5 引入严格模式，禁止自动或者隐式创建全局变量。LHS查询找到变量全局本身对其赋值。找不到抛出 ReferenceError。

变量作用域

全局变量：全局作用域

局部变量：局部作用域。

函数中声明的变量是局部变量，作用域是局部的。函数参数也是局部变量。

局部变量的优先级高于全局变量

编译原理

分词/词法分析：将代码分解成词法单元。

解析/语法分析：将词法单元流转换为一个语法结构树——抽象语法树AST。

代码生成：将 AST转为可执行代码。

函数作用域

函数作用域：函数的全部变量可以在整个函数的范围内使用和复用。
变量在声明前可以用，这种特性称为声明提前。

ES5 只有全局作用域和函数作用域，没有块级作用域。

问题一：变量提升，声明会被视为存在于整个作用域范围内。

问题二：用于计数循环变量泄露为全局变量。

立即执行函数表达式IIFE。

块级作用域

ES6 块级作用域

let 为 JS 提供类块级作用域的能力。

let 进行的声明不会再块级作用域中进行提升。声明前不可以使用。

解决了 var 在循环中污染全局作用域的问题。

块级作用域中可以声明函数，行为类似 let 。

对象

什么是对象？

JS中对象是基本数据类型，作为属性的容器，用属性名和值的形式表示。

属性名：字符串或者Symbol，不可以重名。
属性值：除了undefined值之外的任何类型。

JS中对象不仅仅是属性和值的映射，除了保持自有属性，还可以从原型中继承属性。
原型式继承是JS的核心特征。后面会详细学习继承。

属性分类

属性分类：数据属性和访问属性。
数据属性特征：

可写：是否可以设置该属性值。
可枚举：是否可以通过for/in循环属性。
可配置：是否可以删除或修改属性。
数据值：属性的数值。

访问属性特征：

可配置：是否可以删除和修改属性。
可枚举：是否可以通过for/in循环属性。
Get: 在读取属性时调用的函数。默认为undefined。
Set：在设置属性时调用的函数，默认为undefined。

修改属性的特征通过：Object.defineProperty()。

对象分类

对象分类：

内置对象：规范中定义的对象。例如：数组，函数，日期等。
宿主对象：宿主环境定义的对象。例如：Web浏览器 HTMLElement 对象。
自定义对象：运行中JS代码创建的对象。

对象操作

创建：字面量、关键字new和Object.create()函数创建。
字面量创建对象是原型默认是 Object.prototype。

访问和设置：点语法和[]语法

第一种：点语法 + 标识符，类似C中访问静态字段。
第二种：[] + 字符串，看起来像访问数组，区别在于通过字符串索引而不数字。这样的数组通常称为关联数组，也称为散列、映射或字典。JS中的对象都是关联数组。

删除：删除属性通过 delete 运算符。

只可以删除自有属性，不能删除继承属性。
不可删除可配置性为 false 的属性。

检测：判断属性是否存在于某个对象。常用方法：in运算符、hasOwnProperty()和propertyIsEnumerable()。

in 运算符：左侧属性名右侧对象。检测对象的自有属性和继承属性，存在返回 true。PS：属性值为undefined时也返回 true。
hasOwnProperty() : 检测属性是否是对象的自有属性。
propertyIsEnumerable(): 检测是对象的自有属性并且可枚举时返回 true。

`!==` 属性不存在或者值为undefined时，返回 false。

Setter&Getter: 与数据属性不同，访问属性使用 getter 和 setter 方法代替属性值。

getter：读取属性的值。只有该方法表示只可以读。
setter: 写入属性的值。只有该方法表示只可以写。

原型

原型：每个函数都会创建一个 prototype属性，一个对象包含实例共享的属性和方法。

通过字面量创建的对象默认连接到Object.prototype，这是JS的标配对象。
通过Object.create创建空对象，就需要将 Object.prototype 作为第一个参数。
在检索值的使用原型连接会被调用，如果本对象没有属性名，回去原型中查找，一级一级向上，直到 Object.prototype，还未找到结果就是 undefined 值。这个过程称为委托。查找形成的链称为原型链。

对象创建

工厂模式

缺点：创建对象公共函数，无法识别对象类型。

构造函数模式

new操作符

通过 new 操作符，创建对象。图片是 New 操作执行逻辑。

缺点：定义的方法在每个实例上都会创建一遍

示例

创建一个 Person 函数，通过 new 操作符调用创建p1对象。

对象

p1的 __proto__属性指向原型。

原型模式