一道让人失眠的 Promise 试题深入分析

while (this.onRejectedCallbacks.length) {

this.onRejectedCallbacks.shift()(reason)

}

}

}

再来运行一下，看看结果???

1

resolve success

2

resolve success

3

resolve success

??? 完美，继续

四、实现 then 方法的链式调用

then 方法要链式调用那么就需要返回一个 Promise 对象

then 方法里面 return 一个返回值作为下一个 then 方法的参数，如果是 return 一个 Promise 对象，那么就需要判断它的状态

举个栗子 ???

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

// 目前这里只处理同步的问题

resolve( success )

})

function other () {

return new MyPromise((resolve, reject) =>{

resolve( other )

})

}

promise.then(value => {

console.log(1)

console.log( resolve , value)

return other()

}).then(value => {

console.log(2)

console.log( resolve , value)

})

用目前的手写代码运行的时候会报错 ??? 无法链式调用

}).then(value => {

^

TypeError: Cannot read property  then  of undefined

接着改 ???

// MyPromise.js

class MyPromise {

…

then(onFulfilled, onRejected) {

// ==== 新增 ====

// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去

const promise2 = new MyPromise((resolve, reject) => {

// 这里的内容在执行器中，会立即执行

if (this.status === FULFILLED) {

// 获取成功回调函数的执行结果

const x = onFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(x, resolve, reject);

} else if (this.status === REJECTED) {

onRejected(this.reason);

} else if (this.status === PENDING) {

this.onFulfilledCallbacks.push(onFulfilled);

this.onRejectedCallbacks.push(onRejected);

}

})

return promise2;

}

}

function resolvePromise(x, resolve, reject) {

// 判断x是不是 MyPromise 实例对象

if(x instanceof MyPromise) {

// 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected

// x.then(value => resolve(value), reason => reject(reason))

// 简化之后

x.then(resolve, reject)

} else{

// 普通值

resolve(x)

}

}

执行一下，结果???

1

resolve success

2

resolve other

em… 符合预期 ???

五、then 方法链式调用识别 Promise 是否返回自己

如果 then 方法返回的是自己的 Promise 对象，则会发生循环调用，这个时候程序会报错

例如下面这种情况???

// test.js

const promise = new Promise((resolve, reject) => {

resolve(100)

})

const p1 = promise.then(value => {

console.log(value)

return p1

})

使用原生 Promise 执行这个代码，会报类型错误

100

Uncaught (in promise) TypeError: Chaining cycle detected for promise #

我们在 MyPromise 实现一下

// MyPromise.js

class MyPromise {

…

then(onFulfilled, onRejected) {

const promise2 = new MyPromise((resolve, reject) => {

if (this.status === FULFILLED) {

const x = onFulfilled(this.value);

// resolvePromise 集中处理，将 promise2 传入

resolvePromise(promise2, x, resolve, reject);

} else if (this.status === REJECTED) {

onRejected(this.reason);

} else if (this.status === PENDING) {

this.onFulfilledCallbacks.push(onFulfilled);

this.onRejectedCallbacks.push(onRejected);

}

})

return promise2;

}

}

function resolvePromise(promise2, x, resolve, reject) {

// 如果相等了，说明return的是自己，抛出类型错误并返回

if (promise2 === x) {

return reject(new TypeError( Chaining cycle detected for promise # ))

}

if(x instanceof MyPromise) {

x.then(resolve, reject)

} else{

resolve(x)

}

}

执行一下，竟然报错了 ???

resolvePromise(promise2, x, resolve, reject);

^

ReferenceError: Cannot access  promise2  before initialization

为啥会报错呢？从错误提示可以看出，我们必须要等 promise2 完成初始化。这个时候我们就要用上宏微任务和事件循环的知识了，这里就需要创建一个异步函数去等待 promise2 完成初始化，前面我们已经确认了创建微任务的技术方案 --> queueMicrotask

// MyPromise.js

class MyPromise {

…

then(onFulfilled, onRejected) {

const promise2 = new MyPromise((resolve, reject) => {

if (this.status === FULFILLED) {

// ==== 新增 ====

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

// 获取成功回调函数的执行结果

const x = onFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

})

} else if (this.status === REJECTED) {

…

})

return promise2;

}

}

执行一下

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

resolve( success )

})

// 这个时候将promise定义一个p1，然后返回的时候返回p1这个promise

const p1 = promise.then(value => {

console.log(1)

console.log( resolve , value)

return p1

})

// 运行的时候会走reject

p1.then(value => {

console.log(2)

console.log( resolve , value)

}, reason => {

console.log(3)

console.log(reason.message)

})

这里得到我们的结果 ???

1

resolve success

3

Chaining cycle detected for promise #

哈哈，搞定 ??? 开始下一步

六、捕获错误及 then 链式调用其他状态代码补充

目前还缺少重要的一个环节，就是我们的错误捕获还没有处理

1. 捕获执行器错误

捕获执行器中的代码，如果执行器中有代码错误，那么 Promise 的状态要变为失败

// MyPromise.js

constructor(executor){

// ==== 新增 ====

// executor 是一个执行器，进入会立即执行

// 并传入resolve和reject方法

try {

executor(this.resolve, this.reject)

} catch (error) {

// 如果有错误，就直接执行 reject

this.reject(error)

}

}

验证一下：

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

// resolve( success )

throw new Error( 执行器错误 )

})

promise.then(value => {

console.log(1)

console.log( resolve , value)

}, reason => {

console.log(2)

console.log(reason.message)

})

执行结果 ???

2

执行器错误

OK，通过 ???

2. then 执行的时错误捕获

// MyPromise.js

then(onFulfilled, onRejected) {

// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去

const promise2 = new MyPromise((resolve, reject) => {

// 判断状态

if (this.status === FULFILLED) {

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

// ==== 新增 ====

try {

// 获取成功回调函数的执行结果

const x = onFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

} else if (this.status === REJECTED) {

// 调用失败回调，并且把原因返回

onRejected(this.reason);

} else if (this.status === PENDING) {

// 等待

// 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来

// 等到执行成功失败函数的时候再传递

this.onFulfilledCallbacks.push(onFulfilled);

this.onRejectedCallbacks.push(onRejected);

}

})

return promise2;

}

验证一下：

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

resolve( success )

// throw new Error( 执行器错误 )

})

// 第一个then方法中的错误要在第二个then方法中捕获到

promise.then(value => {

console.log(1)

console.log( resolve , value)

throw new Error( then error )

}, reason => {

console.log(2)

console.log(reason.message)

}).then(value => {

console.log(3)

console.log(value);

}, reason => {

console.log(4)

console.log(reason.message)

})

执行结果 ???

1

resolve success

4

then error

这里成功打印了1中抛出的错误 then error

七、参考 fulfilled 状态下的处理方式，对 rejected 和 pending 状态进行改造

改造内容包括：

1. 增加异步状态下的链式调用

2. 增加回调函数执行结果的判断

3. 增加识别 Promise 是否返回自己

4. 增加错误捕获

// MyPromise.js

then(onFulfilled, onRejected) {

// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去

const promise2 = new MyPromise((resolve, reject) => {

// 判断状态

if (this.status === FULFILLED) {

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

try {

// 获取成功回调函数的执行结果

const x = onFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

} else if (this.status === REJECTED) {

// ==== 新增 ====

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

try {

// 调用失败回调，并且把原因返回

const x = onRejected(this.reason);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

} else if (this.status === PENDING) {

// 等待

// 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来

// 等到执行成功失败函数的时候再传递

this.onFulfilledCallbacks.push(() => {

// ==== 新增 ====

queueMicrotask(() => {

try {

// 获取成功回调函数的执行结果

const x = onFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

});

this.onRejectedCallbacks.push(() => {

// ==== 新增 ====

queueMicrotask(() => {

try {

// 调用失败回调，并且把原因返回

const x = onRejected(this.reason);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

});

}

})

return promise2;

}

八、then 中的参数变为可选

上面我们处理 then 方法的时候都是默认传入 onFulfilled、onRejected 两个回调函数，但是实际上原生 Promise 是可以选择参数的单传或者不传，都不会影响执行。

例如下面这种 ???

// test.js

const promise = new Promise((resolve, reject) => {

resolve(100)

})

promise

.then()

.then()

.then()

.then(value => console.log(value))

// 输出 100

所以我们需要对 then 方法做一点小小的调整

// MyPromise.js

then(onFulfilled, onRejected) {

// 如果不传，就使用默认函数

onFulfilled = typeof onFulfilled ===  function  ? onFulfilled : value => value;

onRejected = typeof onRejected ===  function  ? onRejected : reason => {throw reason};

// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去

const promise2 = new MyPromise((resolve, reject) => {

…

}

改造完自然是需要验证一下的

先看情况一：resolve 之后

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

resolve( succ )

})

promise.then().then().then(value => console.log(value))

// 打印 succ

先看情况一：reject 之后

// test.js

const MyPromise = require( ./MyPromise )

const promise = new MyPromise((resolve, reject) => {

reject( err )

})

promise.then().then().then(value => console.log(value), reason => console.log(reason))

// 打印 err

写到这里，麻雀版的 Promise 基本完成了，鼓掌 ???

九、实现 resolve 与 reject 的静态调用

就像开头挂的那道面试题使用 return Promise.resolve 来返回一个 Promise 对象，我们用现在的手写代码尝试一下

const MyPromise = require( ./MyPromise )

MyPromise.resolve().then(() => {

console.log(0);

return MyPromise.resolve(4);

}).then((res) => {

console.log(res)

})

结果它报错了 ???

MyPromise.resolve().then(() => {

^

TypeError: MyPromise.resolve is not a function

除了 Promise.resolve 还有 Promise.reject 的用法，我们都要去支持，接下来我们来实现一下

// MyPromise.js

MyPromise {

…

// resolve 静态方法

static resolve (parameter) {

// 如果传入 MyPromise 就直接返回

if (parameter instanceof MyPromise) {

return parameter;

}

// 转成常规方式

return new MyPromise(resolve =>  {

resolve(parameter);

});

}

// reject 静态方法

static reject (reason) {

return new MyPromise((resolve, reject) => {

reject(reason);

});

}

}

这样我们再测试上面的 ??? 就不会有问题啦

执行结果 ???

0

4

到这里手写工作就基本完成了，前面主要为了方便理解，所以有一些冗余代码，我规整一下

// MyPromise.js

// 先定义三个常量表示状态

const PENDING =  pending ;

const FULFILLED =  fulfilled ;

const REJECTED =  rejected ;

// 新建 MyPromise 类

class MyPromise {

constructor(executor){

// executor 是一个执行器，进入会立即执行

// 并传入resolve和reject方法

try {

executor(this.resolve, this.reject)

} catch (error) {

this.reject(error)

}

}

// 储存状态的变量，初始值是 pending

status = PENDING;

// 成功之后的值

value = null;

// 失败之后的原因

reason = null;

// 存储成功回调函数

onFulfilledCallbacks = [];

// 存储失败回调函数

onRejectedCallbacks = [];

// 更改成功后的状态

resolve = (value) => {

// 只有状态是等待，才执行状态修改

if (this.status === PENDING) {

// 状态修改为成功

this.status = FULFILLED;

// 保存成功之后的值

this.value = value;

// resolve里面将所有成功的回调拿出来执行

while (this.onFulfilledCallbacks.length) {

// Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空

this.onFulfilledCallbacks.shift()(value)

}

}

}

// 更改失败后的状态

reject = (reason) => {

// 只有状态是等待，才执行状态修改

if (this.status === PENDING) {

// 状态成功为失败

this.status = REJECTED;

// 保存失败后的原因

this.reason = reason;

// resolve里面将所有失败的回调拿出来执行

while (this.onRejectedCallbacks.length) {

this.onRejectedCallbacks.shift()(reason)

}

}

}

then(onFulfilled, onRejected) {

const realOnFulfilled = typeof onFulfilled ===  function  ? onFulfilled : value => value;

const realOnRejected = typeof onRejected ===  function  ? onRejected : reason => {throw reason};

// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去

const promise2 = new MyPromise((resolve, reject) => {

const fulfilledMicrotask = () =>  {

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

try {

// 获取成功回调函数的执行结果

const x = realOnFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

}

const rejectedMicrotask = () => {

// 创建一个微任务等待 promise2 完成初始化

queueMicrotask(() => {

try {

// 调用失败回调，并且把原因返回

const x = realOnRejected(this.reason);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

} catch (error) {

reject(error)

}

})

}

// 判断状态

if (this.status === FULFILLED) {

fulfilledMicrotask()

} else if (this.status === REJECTED) {

rejectedMicrotask()

} else if (this.status === PENDING) {

// 等待

// 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来

// 等到执行成功失败函数的时候再传递

this.onFulfilledCallbacks.push(fulfilledMicrotask);

this.onRejectedCallbacks.push(rejectedMicrotask);

}

})

return promise2;

}

// resolve 静态方法

static resolve (parameter) {

// 如果传入 MyPromise 就直接返回

if (parameter instanceof MyPromise) {

return parameter;

}

// 转成常规方式

return new MyPromise(resolve =>  {

resolve(parameter);

});

}

// reject 静态方法

static reject (reason) {

return new MyPromise((resolve, reject) => {

reject(reason);

});

}

}

function resolvePromise(promise2, x, resolve, reject) {

// 如果相等了，说明return的是自己，抛出类型错误并返回

if (promise2 === x) {

return reject(new TypeError( Chaining cycle detected for promise # ))

}

// 判断x是不是 MyPromise 实例对象

if(x instanceof MyPromise) {

// 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected

// x.then(value => resolve(value), reason => reject(reason))

// 简化之后

x.then(resolve, reject)

} else{

// 普通值

resolve(x)

}

}

module.exports = MyPromise;

到这一步手写部分基本大功告成 ???

Promise A+ 测试

---

上面介绍了 Promise A+ 规范，当然我们手写的版本也得符合了这个规范才有资格叫 Promise， 不然就只能是伪 Promise 了。

上文讲到了 promises-aplus-tests，现在我们正式开箱使用

1. 安装一下

npm install promises-aplus-tests -D

2. 手写代码中加入 deferred

// MyPromise.js

MyPromise {

…

}

MyPromise.deferred = function () {

var result = {};

result.promise = new MyPromise(function (resolve, reject) {

result.resolve = resolve;

result.reject = reject;

});

return result;

}

module.exports = MyPromise;

3. 配置启动命令

{

“name”: “promise”,

“version”: “1.0.0”,

“description”: “my promise”,

“main”: “MyPromise.js”,

“scripts”: {

“test”: “promises-aplus-tests MyPromise”

},

“author”: “ITEM”,

“license”: “ISC”,

“devDependencies”: {

“promises-aplus-tests”: “^2.1.2”

}

}

开启测试

npm run test

迫不及待了吧 ??? 看看我们的结果如何，走起 ???‍???

fail.gif

虽然功能上没啥问题，但是测试却失败了 ???

针对提示信息，我翻看了一下 Promise A+ 规范，发现我们应该是在 2.3.x 上出现了问题，这里规范使用了不同的方式进行了 then 的返回值判断。

image.png

自红线向下的细节，我们都没有处理，这里要求判断 x 是否为 object 或者 function，满足则接着判断 x.then 是否存在，这里可以理解为判断 x 是否为 promise，这里都功能实际与我们手写版本中 x instanceof MyPromise 功能相似。

我们还是按照规范改造一下 resolvePromise 方法吧

// MyPromise.js

function resolvePromise(promise, x, resolve, reject) {

// 如果相等了，说明return的是自己，抛出类型错误并返回

if (promise === x) {

return reject(new TypeError( The promise and the return value are the same ));

}

if (typeof x ===  object  || typeof x ===  function ) {

// x 为 null 直接返回，走后面的逻辑会报错

if (x === null) {

return resolve(x);

}

let then;

try {

// 把 x.then 赋值给 then

then = x.then;

} catch (error) {

// 如果取 x.then 的值时抛出错误 error ，则以 error 为据因拒绝 promise

return reject(error);

}

// 如果 then 是函数

if (typeof then ===  function ) {

let called = false;

try {

then.call(

x, // this 指向 x

// 如果 resolvePromise 以值 y 为参数被调用，则运行 [Resolve]

y => {

// 如果 resolvePromise 和 rejectPromise 均被调用，

// 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用

// 实现这条需要前面加一个变量 called

if (called) return;

called = true;

resolvePromise(promise, y, resolve, reject);

},

// 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise

r => {

if (called) return;

called = true;

reject®;

});

} catch (error) {

// 如果调用 then 方法抛出了异常 error：

// 如果 resolvePromise 或 rejectPromise 已经被调用，直接返回

if (called) return;

// 否则以 error 为据因拒绝 promise

reject(error);

}

} else {

// 如果 then 不是函数，以 x 为参数执行 promise

resolve(x);

}

} else {

// 如果 x 不为对象或者函数，以 x 为参数执行 promise

resolve(x);

}

}

改造后启动测试

success.gif

完美通过 ???

最终时刻，如何解释那道面试题的执行结果

---

先用我们自己的 Promise 运行一下那道面试题 ???

// test.js

const MyPromise = require( ./MyPromise.js )

MyPromise.resolve().then(() => {

console.log(0);

return MyPromise.resolve(4);

}).then((res) => {

console.log(res)

})

MyPromise.resolve().then(() => {

console.log(1);

}).then(() => {

console.log(2);

}).then(() => {

console.log(3);

}).then(() => {

console.log(5);

}).then(() =>{

console.log(6);

})

执行结果：0、1、2、4、3、5、6 ???

这里我们手写版本的 4 并没有和 原生 Promise 一样在 3 后面，而是在 2 后面

其实从我们的手写代码上看，在判断 then 内部函数执行结果，也就是在这里 ???

// MyPromise.js

// 获取成功回调函数的执行结果

const x = realOnFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

面试题中 x 为 MyPromise.resolve(4) 的时候，在传入 resolvePromise 方法中会对 x 的类型进行判断时，会发现它是一个 Promise，并让其调用 then 方法完成状态转换。再看 resolvePromis 方法中这一块判断逻辑 ???

if (typeof x ===  object  || typeof x ===  function ) {

// x 为 null 直接返回，走后面的逻辑会报错

if (x === null) {

return resolve(x);

}

let then;

try {

// 把 x.then 赋值给 then

then = x.then;

} catch (error) {

// 如果取 x.then 的值时抛出错误 error ，则以 error 为据因拒绝 promise

return reject(error);

}

// 如果 then 是函数

if (typeof then ===  function ) {

let called = false;

try {

then.call(

x, // this 指向 x

// 如果 resolvePromise 以值 y 为参数被调用，则运行 [Resolve]

y => {

// 如果 resolvePromise 和 rejectPromise 均被调用，

// 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用

// 实现这条需要前面加一个变量 called

if (called) return;

called = true;

resolvePromise(promise, y, resolve, reject);

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

mg-blog.csdnimg.cn/img_convert/0495f1693b1f5af09bae196f7cde8b13.gif)

success.gif

完美通过 ???

最终时刻，如何解释那道面试题的执行结果

---

先用我们自己的 Promise 运行一下那道面试题 ???

// test.js

const MyPromise = require( ./MyPromise.js )

MyPromise.resolve().then(() => {

console.log(0);

return MyPromise.resolve(4);

}).then((res) => {

console.log(res)

})

MyPromise.resolve().then(() => {

console.log(1);

}).then(() => {

console.log(2);

}).then(() => {

console.log(3);

}).then(() => {

console.log(5);

}).then(() =>{

console.log(6);

})

执行结果：0、1、2、4、3、5、6 ???

这里我们手写版本的 4 并没有和 原生 Promise 一样在 3 后面，而是在 2 后面

其实从我们的手写代码上看，在判断 then 内部函数执行结果，也就是在这里 ???

// MyPromise.js

// 获取成功回调函数的执行结果

const x = realOnFulfilled(this.value);

// 传入 resolvePromise 集中处理

resolvePromise(promise2, x, resolve, reject);

面试题中 x 为 MyPromise.resolve(4) 的时候，在传入 resolvePromise 方法中会对 x 的类型进行判断时，会发现它是一个 Promise，并让其调用 then 方法完成状态转换。再看 resolvePromis 方法中这一块判断逻辑 ???

if (typeof x ===  object  || typeof x ===  function ) {

// x 为 null 直接返回，走后面的逻辑会报错

if (x === null) {

return resolve(x);

}

let then;

try {

// 把 x.then 赋值给 then

then = x.then;

} catch (error) {

// 如果取 x.then 的值时抛出错误 error ，则以 error 为据因拒绝 promise

return reject(error);

}

// 如果 then 是函数

if (typeof then ===  function ) {

let called = false;

try {

then.call(

x, // this 指向 x

// 如果 resolvePromise 以值 y 为参数被调用，则运行 [Resolve]

y => {

// 如果 resolvePromise 和 rejectPromise 均被调用，

// 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用

// 实现这条需要前面加一个变量 called

if (called) return;

called = true;

resolvePromise(promise, y, resolve, reject);

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】