类(ES6)
类本质上依然是前面所讲的构造函数、原型链的语法糖而已
类的构造函数
如果我们希望在创建对象的时候给类传递一些参数,这个时候应该如何做呢?
- 每个类都可以有一个自己的构造函数(方法),这个方法的名称是固定的constructor;
- 当我们通过new操作符,操作一个类的时候会调用这个类的构造函数constructor;
- 每个类只能有一个构造函数,如果包含多个构造函数,那么会抛出异常;
类的实例方法
前面我们说到的实例方法,我们是希望放到原型上的,这样可以被多个创建出来的实例共享,这个时候可以直接在类中定义实例方法。
实例方法只能通过创建出来的实例才能调用
类的静态方法(类方法)
ES6类的继承 – extends
super关键字
- 执行 super,method(…)来调用一个父类方法
- 执行 supe(…)来调用一个父类 constructor
注意:在子类的构造函数中使用this 或者返回默认值之前,必须先通过 super 关键字调用父类的构造函数。
JavaScript中的多态
总结:不同的数据类型进行同一个操作,表现出不同的行为,就是多态的体现
同一种东西表现出不同的形态
对象字面量的增强
1.属性简写
2.方法的简写
3.计算属性名
let 和 const
- let和var都是用于声明一个变量
- const 表示常量、衡量的意思(常变量)表示保存的数据一旦被赋值,就不能被修改
注意:let 和 const 不允许重复声明变量
let 和 const 的作用域提升
let、const和var的另一个重要区别是作用域提升:
- var声明的变量是会进行作用域提升的(在声明之前被访问);
- 但是如果我们使用let声明的变量,在声明之前访问会报错;
- 在let、const定义的标识符真正执行到声明的代码之前,是不能被访问的
总结:let、const没有进行作用域提升,但是会在解析阶段被创建出来
let 和 const 的块级作用域
在ES6中新增了块级作用域,并且通过let、const、function、class声明的标识符是具备块级作用域的限制的。
注意:引擎会对函数的声明进行特殊的处理,允许像var那样进行提升,所以这里外面依然可以访问。
字符串模板的基本使用
ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接:
- 首先,我们会使用 `` 符号来编写字符串,称之为模板字符串;
- 其次,在模板字符串中,我们可以通过==${expression}==来嵌入动态的内容;
函数的默认参数
注意:通常函数参数的默认值我们会将其放到最后
函数的剩余参数
如果最后一个参数是 … 为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组。
剩余参数和arguments有什么区别呢?
- 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参;
- arguments对象不是一个真正的数组,而rest参数是一个真正的数组,可以进行数组的所有操作;
- arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构,而rest参数是ES6中提供并且希望以此 来替代arguments的;
- 剩余参数必须放到最后一个位置,否则会报错
Symbol 的基本使用
Symbol是什么呢?Symbol是ES6中新增的一个基本数据类型,翻译为符号。
是在ES6中,对象的属性名可以使用字符串,也可以使用Symbol值。使用Symbol在对象中表示唯一的属性名
注意:Symbol即使多次创建值,它们也是不同的,Symbol函数执行后每次创建出来的值都是独一无二的
浅拷贝和深拷贝
Set 和 Map
Set的基本使用
- Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组的区别是元素不能重复
- 创建Set我们需要通过Set构造函数 const set = new Set()
- Set中存放的元素是不会重复的,那么Set有一个非常常用的功能就是给数组去重
Set常见的属性:
- size:返回Set中元素的个数;
Set常用的方法:
- add(value):添加某个元素,返回Set对象本身;
- delete(value):从set中删除和这个值相等的元素,返回boolean类型;
- has(value):判断set中是否存在某个元素,返回boolean类型;
- clear():清空set中所有的元素,没有返回值; forEach(callback, [, thisArg]):通过forEach遍历set;
另外Set是支持for of的遍历的。
Set 与 WeakSet
区别:
- 区别一:WeakSet中只能存放对象类型,不能存放基本数据类型;
- 区别二:WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收;
注意:WeakSet 是不能遍历的,存储到WeakSet中的对象是没办法获取
Map的基本使用
Map 用于存储映射关系,我们可以使用对象来存储映射关系,他们有什么区别:
- 事实上我们对象存储映射关系只能用字符串(ES6新增了Symbol)作为属性名(key);
- 某些情况下我们可能希望通过其他类型作为key,比如对象,这个时候会自动将对象转成字符串来作为key;
这种时候就可以使用Map
Map常见的属性:
- size:返回Map中元素的个数;
Map常见的方法:
- set(key, value):在Map中添加key、value,并且返回整个Map对象;
- get(key):根据key获取Map中的value;
- has(key):判断是否包括某一个key,返回Boolean类型;
- delete(key):根据key删除一个键值对,返回Boolean类型;
- clear():清空所有的元素; forEach(callback, [, thisArg]):通过forEach遍历Map;
Map也可以通过for of进行遍历。
Map 与 WeakMap
区别:
- 区别一:WeakMap的key只能使用对象,不接受其他的类型作为key;
- 区别二:WeakMap的key对对象想的引用是弱引用,如果没有其他引用引用这个对象,那么GC可以回收该对象;
Proxy 和 Reflect
Proxy类,是用于帮助我们创建一个代理的。
如果我们希望监听一个对象的相关操作,那么我们可以先创建一个代理对象(Proxy对象),之后对该对象的所有操作,都通过代理对象来完成,代理对象可以监听我们想要对原对象进行哪些操作
Proxy 的基本使用
步骤:
Proxy 的 get 和 set 捕捉器
作用:监听某些具体的操作
set函数有四个参数:
- target:目标对象(侦听的对象);
- property:将被设置的属性key;
- value:新属性值;
- receiver:调用的代理对象;
get函数有三个参数:
- target:目标对象(侦听的对象);
- property:被获取的属性key;
- receiver:调用的代理对象;
更多 Proxy
Reflect 的基本使用
Reflect也是ES6新增的一个API,它是一个对象,字面的意思是反射
[reflect 和 object](比较 Reflect 和 Object 方法 - JavaScript | MDN (mozilla.org))
注意:如果我们的源对象(obj)有setter、getter的访问器属性,那么可以通过receiver来改变里面的this
Proxy 和 Reflect 共同完成代理
好处:
- 代理对象的目的: 不再直接操作原对象
- Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功
- receiver就是外层Proxy对象
- Reflect.set/get最后一个参数, 可以决定对象访问器setter/getter的this指向
Promise
promise 是一个类
在通过new创建Promise对象时,我们需要传入一个回调函数,我们称之为executor
- 这个回调函数会被立即执行,并且给传入另外两个回调函数resolve、reject;
- 当我们调用resolve回调函数时,会执行Promise对象的then方法传入的回调函数;
- 当我们调用reject回调函数时,会执行Promise对象的catch方法传入的回调函数;
Executor中确定我们的Promise状态:
- 通过resolve,可以兑现(fulfilled)Promise的状态,我们也可以称之为已决议(resolved);
- 通过reject,可以拒绝(reject)Promise的状态;
注意:一旦状态被确定下来,Promise的状态会被 锁死,该Promise的状态是不可更改的
resolve不同值的区别
- 情况一:如果resolve传入一个普通的值或者对象,那么这个值会作为then回调的参数;
- 情况二:如果resolve中传入的是另外一个Promise,那么这个新Promise会决定原Promise的状态:
- 情况三:如果resolve中传入的是一个对象,并且这个对象有实现then方法,那么会执行该then方法,并且根据then方法的结 果来决定Promise的状态
then 方法
then方法接受两个参数:
- fulfilled的回调函数:当状态变成fulfilled时会回调的函数;
- reject的回调函数:当状态变成reject时会回调的函数;
注意:Promise 的 then 方法是可以被多次调用的
then方法本身是有返回值的,它的返回值是一个Promise,我们可以进行链式调用。我们知道
Promise是有三种状态的。那么 then 方法返回的 Promise 到底处于什么样的状态?
- 当then方法中的回调函数本身在执行的时候,那么它处于pending状态;
- 当then方法中的回调函数返回一个结果时,那么它处于fulfilled状态,并且会将结果作为resolve的参数; (上方解释)
情况一:返回一个普通的值;
情况二:返回一个Promise;
情况三:返回一个thenable值;
- 当then方法抛出一个异常时,那么它处于reject状态;
catch方法
事实上catch方法也是会返回一个Promise对象的,所以catch方法后面我们可以继续调用then方法或者catch方法
finally 方法
ES新增特性:finally表示无论Promise对象无论变成fulfilled还是rejected状态,最终都会被执行 的代码。 finally方法是不接收参数的,因为无论前面是fulfilled状态,还是rejected状态,它都会执行。
resolve 方法
resolve是Promise 的类方法。
场景:我们已经有一个现成的内容了,希望将其转成Promise来使用。例如下面的 studentList 数组。
resolve参数状态:
- 参数是一个普通的值或者对象
- 参数本身是Promise
- 参数是一个thenable
reject 方法
rejecy 也是Promise 的类方法。只是会直接将Promise 的状态设置为reject 状态。Promise.reject的用法相当于new Promise,只是会调用reject.
无论Promise.reject 传入的参数是什么状态,都会直接作为reject状态的参数传递到 catch
all 方法 与 allSettled 方法
all方法作用:将多个Promise包裹在一起形成一个新的Promise
新的 Promise 状态是由所有包裹的Promise 共同决定的:
- 当所有的Promise状态变成fulfilled状态时,新的Promise状态为fulfilled,并且会将所有Promise的返回值组成一个数组;
- 当有一个Promise状态为reject时,新的Promise状态为reject,并且会将第一个reject的返回值作为参数;
缺陷:对于resolved的,以及依然处于pending状态的Promise,我们是获取不到对应的结果的
allSettled 方法作用:会将所有的 Promise 都有结果的时候,无论是fulfilled 还是rejected 时候,才会有最终的状态。并且这个 Promise 的结果一定是fulfilled 的。其返回的结果是一个数组,数组中存放着每一个Promise的结果,并且是对应一个对象的。 这个对象包含status状态,以及对应的value值。
race 方法与 any 方法
race方法作用:如果有一个Promise有结果,race方法可以决定最终的结果。即谁先有结果,就使用谁的结果。
any方法的作用:用法与race相似,但是any方法会等到一个fulfilled状态才决定Promise的状态。如果所有的状态都是reject ,那么最终会报一个AggregateError错误。