高级前端面试100问（必会）_高级前端面试题

二、Promise
一、JS基础-原理实现
实现new

function newOperator(ctor) {
    if (typeof ctor !== 'function') {
        throw new Error('Constructor not a function')
    }

    const newObj = Object.create(ctor.prototype)
    const args = [].slice.call(arguments, 1)
    const returnObj = ctor.apply(newObj, args)

    const isObj = typeof returnObj==='object' && returnObj !== null;
    const isFunction = typeof returnObj === 'function'
    if (isObj || isFunction) {
        return returnObj
    }
    return newObj
}

实现bind

1. 基本结论： bind是函数原型对象上，每个函数都可以调用 函数使用bind后，被调用对象是传入bind的第一个参数 当new
   被bind后的函数时，this指向了新生成的对象

Function.prototype.bindMock = function(target) {

  const originalFun = this;//this是调用bind的函数
  const args = [].slice.call(arguments,1)
  return function bound() {
    const boundArgs = [].slice.call(arguments)
    const finalArgs = args.concat(boundArgs)
    //this是new生成的对象
    if(this instanceof bound) {
      // new bound这种情况
      // orginalFun要绑定到新生成对象上调用
      const result = orginalFun.apply(this, finalArgs)
      const isObject = typeof result ==='object' && result!==null
      const isFunction = typeof result ==='function'
      if (isObject || isFunction) {
        return result
      }
      return this
    } else {
      return orginalFun.apply(target, finalArgs)
    }
    
    
  }
}

3、实现apply， call

function getGlobalObject() {
  return this
}
Function.prototype.applyFn = function(target, argsArray) {
  //check
  if (typeof this !== 'function') {
    throw new TypeError(this+"is not function")
  }

  if (argsArray === null ||typeof argsArray === 'undefined') {
    argsArray =[]
  }

  if (argsArray !== new Object(argsArray)) {
    throw new TypeError('createListFromArrayLike called on non-object')
  }

  if (typeof target === 'undefined') {
    target = getGlobalObject()
  }

  var original = target['\_fn']
  var hasOriginal = target.hasOwnProperty('\_fn')
  target['\_fn'] = this;
  var result = target['\_fn'](...argsArray)//这一步可以通过生成函数兼容旧浏览器
  if (hasOriginal) {
    target['\_fn'] = original;
  }
  return result;
}

4、实现一下es6的extends

function extends(child, parent) {
  if (typeof child !== 'function' && parent !== null) {
    throw new TypeError("super expression must either be null or a function")
  }

  child.prototype=Object.create(parent.prototype, {
    constructor: {
      value: child,
      writable: true,
      configurable: true
    }
  })
  if (parent) {
    child.__proto_ == parent
  }
}

5、Object.create实现， Object.create传null和{} 有啥区别吗

function createFun(o){
    //错误检查
    function Empty(){}
    Empty.prototype=o
    return new Empty()
}
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/create#polyfill

存在弊端： 所有通过Object.create出来的对象共享原始obj属性

Object.create(null) 会创建一个真正的空对象，并没有继承Object原型链上的方法

6、实现数组扁平化函数flat

function reduceDim(arr, depth){
  let curQueue=[] 


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/e70218b623d4d0153bac6f22e68a5814.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/090b0c62f95f4b1e63b71de8839ae272.webp?x-oss-process=image/format,png)

*

[外链图片转存中...(img-IptVKs8V-1714205013785)]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-TmwMIVOM-1714205013786)]