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

文章目录
一、JS基础-原理实现
二、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
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实现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)
    }
    
    
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

1
2
3
4
5
6
7
8

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

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

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

function reduceDim(arr, depth){
  let curQueue=[] 
  let nextQueue=[]
  curQueue = curQueue.push(arr)
  let curDepth =0
  let hasNext=true
  while(hasNext) {
    hasNext=false
    while(curQueue.length) {
      let item = curQueue.shift()
      if (item instanceof Array) {
        for (i of item){
          nextQueue.push(i)
          hasNext=true
        }   
      }else {
        nextQueue.push(item)
      }
    }
    curDepth++
    if (curDepth===depth) return nextQueue
    let tmp = curQueue 
    curQueue = nextQueue
    nextQueue = tmp
  }
  return curQueue;
}
Array.prototype.flatFn = function (depth) {
  let result =[]

  if (depth===undefined) depth=1
  if (depth ==0) return this
  const originArray = this;
  const length = originArray.length
  for (let i=0;i<length;i++) {
    let item = originArray[i]
    if (item instanceof Array) {
      let sub = reduceDim(item, depth)
      console.log()
     result=result.concat(sub)
    } else {
      result.push(item)
    }
  }
  return result
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

7、防抖节流区分,手写

// throttle
function throttle(fn, delay) {
  let timer = null
  let busy=false
  return function(){
    if (!busy){
      busy=true
       timer=setTimeout(()=>{
      fn()
      busy=false
    }, delay)
    }  
  }
}
// debounce
function debounce(fn,delay){
  let timer =null
  // let busy=false
  return function () {
    // if (busy) {
      clearTimeout(timer)
    // }
    // busy=true
    timer =setTimeout(()=>{
      fn()
      // busy=false
    }, delay)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

分享一款面试题库