JS一次前端面试经历记录

JS一次前端面试经历记录完整攻略

前言

在前端开发领域，面试是很重要的环节，经常有人抱怨自己掌握了很多技能却面试不过关。在这篇文章中，我将分享自己的一次前端面试经历，包括面试过程、面试题及回答，以及分析其中的问题，并给出相应的解决方案和建议。

面试过程

面试公司：ABC公司

面试环节：技术面试

面试时间：2021年6月

面试官：张经理

面试内容：主要围绕前端基础知识和JavaScript相关技术进行考察。

面试题

1. 请介绍一下JS闭包，并且用代码举例说明。

2. 如何实现一个手写的promise？

3. 谈谈你对Vue的理解？

4. 请推荐一些你常用的前端框架及相关库？

面试回答

1. 请介绍一下JS闭包，并且用代码举例说明。

JavaScript闭包是指一个函数可以访问和修改它所在的父级作用域的变量，即使父级函数已经被执行完毕，闭包依然会保存这些变量的引用。我们可以通过创建函数内部函数，将内部函数返回，从而创建一个闭包。

比如下面的例子，我们定义了一个counter函数，该函数内部定义了一个计数器count，又返回了一个内部函数，该内部函数可以访问并修改count变量。在外部每次调用counter函数时，可以返回一个新的内部函数实例，从而形成不同的计数器。

function counter() {
  let count = 0
  return function() {
    count++
    console.log(count)
  }
}

const c1 = counter()
c1() // 输出1
c1() // 输出2

const c2 = counter()
c2() // 输出1

2. 如何实现一个手写的Promise？

Promise是JavaScript中一种非常重要的异步编程模型，在ES6中被正式引入。我们可以通过手写代码来掌握Promise的内部实现原理。

我们需要实现的是一个Promise类，其中主要包含以下几个方法：then、catch、finally。另外我们还需要处理Promise的状态，该状态分为三种：pending、fulfilled、rejected。

下面是一种简单的Promise实现代码：

class MyPromise {
  constructor(executor) {
    this.state = 'pending'
    this.value = undefined
    this.reason = undefined

    this.onFulfilledCallbacks = []
    this.onRejectedCallbacks = []

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value

        this.onFulfilledCallbacks.forEach((callback) => callback())
      }
    }

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason

        this.onRejectedCallbacks.forEach((callback) => callback())
      }
    }

    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
    } else if (this.state === 'rejected') {
      onRejected(this.reason)
    } else if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        onFulfilled(this.value)
      })
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason)
      })
    }

    return this
  }

  catch(onRejected) {
    return this.then(null, onRejected)
  }

  finally(onFinally) {
    return this.then(
      (value) => {
        onFinally()
        return value
      },
      (reason) => {
        onFinally()
        throw reason
      }
    )
  }
}

// 测试代码
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})

promise
  .then((value) => console.log(value)) // success
  .finally(() => console.log('finally'))

3. 谈谈你对Vue的理解？

Vue是一款面向数据驱动的渐进式前端框架，它的核心在于数据绑定和组件化，使得开发者可以更加方便地构建和维护大型单页面应用。

Vue的核心概念包括：

• Vue实例：一个Vue实例是一个响应式的数据对象，其中包含了Vue的选项和实例方法。
• 模板：Vue使用基于HTML的模板语法来声明式地将DOM和Vue实例中的数据绑定在一起（双向绑定）。
• 组件：Vue是一种组件化的框架，它将UI拆分成了独立的可重用组件，并管理组件之间的通信和状态。

Vue还提供了以下特性和工具：

• 数据驱动：Vue基于响应式原理，通过对数据进行侦听和追踪，将模板和数据相关联。
• 组件系统：引入组件系统，拥有独立的作用域和生命周期，并且可以进行组合和复用。
• 指令系统：自定义指令来丰富模板语法，提高开发效率。
• Vuex：数据管理解决方案，让数据在组件间共享和操作更加方便。
• Vue Router：前端路由解决方案。
• Vue CLI：官方提供的构建工具。

4. 请推荐一些你常用的前端框架及相关库？

对于前端框架及相关库我有以下几个推荐：

• Vue：我熟悉的前端框架之一，使用组件化开发，可以方便地维护大型应用。
• React：另一个非常流行的前端框架，使用基于JavaScript的JSX语法，可以快速构建复杂的用户界面。
• jQuery：简化繁琐的DOM操作，提高开发效率。
• Axios：为HTTP请求提供封装和工具函数，使得网络请求更加容易管理。
• lodash：一个快捷实用的JavaScript库，提供了对JavaScript中大量常见问题的解决方案。

总结

以上就是我在一次前端面试中遇到的问题和解答，希望能够对大家有所帮助。要想在前端领域获得成功，不仅是掌握技能的重点，也需要及时了解面试相关技巧，提高自己的表达和思考能力，才能在面试中有所斩获。