ES6与模块化、Promise详解以及this的用法

最新推荐文章于 2025-06-19 15:11:45 发布

原创最新推荐文章于 2025-06-19 15:11:45 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#okhttp

call/apply/bind显示指定this

新的变量声明方式const/let

具备了块级作用域，且不会再有变量提升

原理：

var变量声明：经历两个步骤：首先给变量赋值一个undefined，并将整个操作提升到作用域前面

例如 var a=1等同于 var a=undefind a=1

而let/const 提升操作仍然存在，但不会给其定义undefind
用法：声明一个引用可以被改变的变量时用let，不能被改变用const

箭头函数

箭头函数中的this，就是声明函数时所处上下文中的this，它不会被其他方式所改变

箭头函数中没有argument对象（类数组对象）

模版字符串

用法：`${}`

结构解析

对象的结构解析

const {a,b,c}=json数据等价于

const {a:a , b:b, c:c}=json数据

给变量设定默认值

const {a='123',b="12"}=json
//数据中若找不到a 则使用变量值

给变量重新命名

//重命名后a将无法访问 只能通过新变量名aa来访问对应数据
const {a：aa}=json

利用解析结构获取嵌套数据中值

数组的结构解析

数组变量和值的关系与顺序一一对应,而对象的解析是无序的

const [a,b,c]=arr
//等价于
const a=arr[0]
const b=arr[1]
const c=arr[2]

结构解析中的默认值

展开运算符

可以展开对象或数组

const arr2=[...arr1,1,2,3]

const object2={
...object1,
d:1,
c:2}

与结构中使用
运用在函数中：只能放置与最后一个参数，表示不定参

promise详解

同步与异步

同步：指发起请求后未得到请求结果会等待，直到结果出来才会执行后面代码

异步：指发起请求后，不会等待请求结果，直接执行后面代码

作用

解决原生ajax的回调地狱
使得代码更具可读性和可维护性，把数据请求和数据处理分开来模块化

回调函数封装

作用：利用队列机制确保我们的代码压后执行

用法实例

then方法可以接受两个参数，第一个用来处理resolved，第二个用来处理rejected状态逻辑
then方法因为返回的仍是一个promise实例对象，因此then方法可以嵌套使用

封装

现在所有的库基本都利用promise对ajax请求进行了封装，使得代码更加简洁和优雅

promise.all

使用场景

当有一个ajax请求需要多个请求都有返回结果才能确定时

用法

promise.all接受一个promise对象组成的数组作为参数，当所有的promise状态都是resolved或rejected时，才会调用then方法

Promise.race

相似的，只是其中一个Promise状态变为resolved或rejected即可

async/await

async其实是Promise的一个语法糖

await

await指代码需要等待await后面的函数运行完且有返回结果后才执行后续代码，这正是同步效果
await关键字只能在async中使用，并且await后面函数运行后必须返回一个Promise对象才能实现同步效果
await返回值是Promise中resolve传递出来的值
与使用.then方法同样效果

异常处理

在async中通过try/catch来捕获异常

事件循环机制

任务队列：宏任务和微任务

宏任务：script（整体代码）、setTimeout/setInterval、I/O、UI renderingdeng
微任务：Promise

第一次循环：执行宏任务中script，执行函数调用栈，然后执行所有的微任务。当所有的可执行微任务执行完毕后，第一次循环结束

第二次循环：选择其中一个宏任务队列，将该队列中所有任务执行完毕，再执行此过程中可能产生的微任务，然后继续执行其他宏任务队列中的人物，直到宏任务队列都被执行一遍并清空微任务。第二次循环结束

例子

答案：

新增语法简化的写法

属性和变量名同名时
对象中的方法
使用变量作为对象属性，用中括号包裹

const name='xiao'
const person={
[name]:1
}

class

继承

语法糖：extend关键字和supper方法

模块化

import

export

export向外提供接口

模块中只允许出现一次export default

this

当前函数的this是在函数调用执行时才被确定的

全局对象中的this

this指向它本身

函数中的this

在一个函数的上下文执行过程中，this由函数的调用者提供，由函数的调用方式来决定其指向

内部this指向调用者绑定的对象，若是独立调用内部this指向undefined时，会自动指向全局对象（非严格模式）

call/apply/bind显示指定this

JavaScript内部提供了一种可以手动设置this指向的方式

当call/apply调用时，函数内部的this指向第一个参数

call/apply不同之处在于参数的传递形式

bind方法