JS知识点总结与梳理

104 阅读4分钟

一、基础知识点

1、模板字面量

image2022-9-14_14-10-12.png

模板字面量中,变量或表达式叫做插值

其中第三点标签函数:第一个参数接收的是这个插值${}左右两边的字符,并存入数组。后边的参数则是有多少个插值就有多少个参数。可以替换为function foo(string,..arg){}

image2022-9-14_14-10-45.png image2022-9-14_14-10-50.png

对应的应用有:过滤HTML字符串,防止用户输入恶意内容

(其中sender表示为用户输入的内容),经过SafeHTML处理,特殊字符都会被转义。

image2022-9-14_14-11-11.png

其中第四点原始字符串

image2022-9-14_15-27-17.png image2022-9-14_15-27-29.png

2、Symbol

image2022-9-14_15-27-55.png

除此之外,还有一些方法,比如Symbol.asyncIterator, Symbol.hasInstance,Symbol.search

3、for in 和for of的区别

for in用于迭代对象的所有可枚举属性,可以 与数组字符串或普通对象一起使用,但是不能与Map/Set对象一起使用

image2022-9-14_15-29-5.png

for of用于迭代可迭代对象,迭代他们的值而不是属性,可于数组、字符串Map/Set对象,但不能用于普通对象

image2022-9-14_15-29-28.png

forEach()是Array原型的方法,遍历数组的元素,只迭代数组,在迭代时访问每个元素的值和索引

image2022-9-14_15-30-13.png

4、 RegExp类型

  • 创建正则表达式的方法有两种:
image2022-9-14_15-31-46.png
  • 可以结合exec()方法配合捕获组使用

image2022-9-14_15-32-12.png

5、String类型

String类型.png

6、执行上下文

执行上下文.png

例子:

image2022-9-14_15-36-57.png

先从third开始到second最后first

每一次函数被调用,一个新的函数执行上下文就被创建,并放置在当前执行上下文的上方。

(但执行到try/catch中的catch或者是with语句时,会在作用域前端临时增加一个上下文,即作用域链增强)

二、集合引用类型

1. Array类型

image2022-8-31_20-12-59.png

Array类型.png

2. Map和Set区别

区别
Map以[key,value]的形式存储
Set以[value,value]形式存储,集合的成员唯一,内部元素没有重复的值
WeakMap键是弱引用对象,值任意;键名所指向的对象可以被垃圾回收;键不可枚举
WeakSet只能存储对象引用,不能存放值;垃圾回收机制不考虑对该对象的引用;该对象无法被遍历;可以用于保存DOM节点

3. Map类型

Map类型.png

4. Set类型

Set类型.png

三、对象、类

1、原型模式

所有引用类型都是继承于Object的。

含义与用法
instanceof检测构造函数的prototype属性是否出现在某个实例对象的原型链上 ( person instanceof Person  ) //true
isPrototypeOf检测一个对象是否存在于另一个对象的原型链上 ( Person isPrototypeOf(person) )//true
Object.getPrototypeOf返回对象原型  ( Object.getPrototypeOf(person)===Person.prototype)//true

A1137178-364F-4BCB-B708-E0FB2308FB33.jpeg

通过对象访问属性或方法时,搜索会先从对象实例本身开始,如果在实例中找到给定的名称则返回,若没找到,搜索将会沿着指针进入原型对象,沿着原型链向上对原型的原型进行查找,一直找到null。

2、继承

2.1 原型链

[定义]

通过原型链继承多个引用类型的属性和方法

[举例]

8D51D248-8F4B-4751-B45D-1BF3421D905D.jpeg DD01B921-477A-4AA1-8E4B-5BE00BA02707.jpeg

[问题]

1、原型中包含的属性和方法会在所有实例间共享,无法做到实例私有。Son的所有实例将会共享同一个property属性,修改也会同步到property

2、子类型在实例化时不能给父类型的构造函数传参

2.2 盗用构造函数

[定义]

1、在子类构造函数中调用父类构造函数,通过调用apply()或call()方法,相当于在新的子类对象上运行了父类函数中所有初始化代码

2、解决了上述的问题,每个实例都会拥有自己的name属性;除此之外还可以向父类构造函数传参;子类也可以拥有自己额外的属性age

[举例]

C7E68D5E-04DD-44DE-AB84-7FE24A1D78BB.png

[问题]

1、必须在构造函数中定义方法,导致了函数不能重用

2、子类也不能访问父类原型上定义的方法

2.3 组合继承

[定义]

1、结合原型链+盗用构造函数,使用原型链继承了原型上的属性和方法,通过盗用构造函数继承了实例属性

2、方法在原型上实现重用,每个实例也可以拥有自己的属性

[举例]

23043D06-ADB7-4453-99C3-3F9081B5F1CF.jpeg

[问题]

父类构造函数始终会被调用两次:一次在创建子类原型时,另一次在子类构造函数中

2.4 原型式继承

[定义]

适用于:你拥有一个对象,想在它的基础上再创建一个新对象,你需要把这个对象传给object(),然后对返回的对象进行适当修改(本质上,object()是对传入的对象执行了一次浅复制)

[举例]

1BCB4B0A-99D8-45D8-83F7-74EDDC78C8BE.jpeg

[问题]

属性中包含的引用值始终会在相关对象间共享

2.5 寄生式继承

[定义]

创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象

[举例]

B6DCF0A6-8807-4030-BECD-74EF748DB93A.jpeg

2.6 寄生式组合继承

[定义]

1、通过盗用构造函数继承属性,使用混合式原型链继承方法

2、使用寄生式继承父类原型,然后将返回的新对象赋值给子类原型

[举例]

7D9B318E-0827-40AB-B4C7-AD813B44CDDA_4_5005_c.jpeg

E3FCD585-8F82-4CA8-9003-C8F5ECE8FDC2.jpeg

3、类

用于创建对象的模板

类.png