面试题里的那些各种手写

最近准备初级前端面试，发现有很多手写实现什么的，例如什么手写实现bind，promise。手写ajax，手写一些算法。 翻阅了很多书籍和博客。

这里做一个总结改进，算是对我后面大概为期一个月找工作的准备。

手写实现 bind()

Function.prototype._bind = function (context) {
            var self = this;
            var args = Array.prototype.slice.call(arguments, 1);
            var fBind = function () {
                var bindArgs = Array.prototype.slice.call(arguments);
                return self.apply(this instanceof fBind ? this : context, args.concat(bindArgs));
            }
            fBind.prototype = self.prototype&&Object.create(self.prototype)
            return fBind;
        }
复制代码

简单的说明:

• 这里之所以 传参 的时候需要两个 数组 ，是因为考虑到用 new 以构造函数的形式调用硬绑定函数的情况。
• 这样子就需要继承之前函数的方法， fBind.prototype = self.prototype&&Object.create(self.prototype) ,同时也可以用 Object.setPrototypeOf(fBind.prototype,self.prototype) 。 考虑到存在 undefined 的情况，前面加一个判断 self.prototype&&.....
• 关于 apply 的第一个参数，如果考虑到之前的情况，是不能传入 context 的，这需要做一个判断。 像是下面的情况

function Foo(price){ 
       
          this.price =price
            this.fn = ()=>{
                console.log('hi fn')
            }
             console.log(this.name)
        }

        Foo.prototype.sayMyName = function(){
            console.log(this.name)
        }
      var Obj1 = {
        name:'obj1'
      }
        var b =Foo._bind(Obj1)
        var c = new b(1000)
        c.name = 'i am c'
        c.sayMyName()
复制代码

这里的 this 的指向就是 c ，它指向 实例对象本身 。

后面以这道题为引线面试官可能会追问:

• 什么是执行上下文
• this的判断
• call，bind的区别

手写一个函数实现斐波那契数列

首先拷一个阮神在他es6教程里的一个写法。

function* fibonacci() {
  let [prev, curr] = [0, 1];
  for (;;) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

for (let n of fibonacci()) {
  if (n > 1000) break;
  console.log(n);
}
复制代码

更精简的

const feibo= max=>{
    let [a,b,i]= [0,1,1]
    while(i++<=max) {
        [a,b] = [b,a + b ]
       console.log(b)
    }
  return a  
}
复制代码

相对是非常简单的，感觉也不会多问啥，就不多说了。

手写一个简单的ajax

let xhr = new XMLHttpRequest

        xhr.open('get', url, true)

        xhr.onreadystatechange = function(){
            if(this.readyState === 4){
                if(this.status >= 200 &&this.status<300){ 
                    conso.log('成功')
                }else{
                    consol.log('失败')
                }
            }
        }
         xhr.onerror = function(e) {
         console.log('连接失败')
        }
        xhr.send()

复制代码

大概是这么个意思就差不多了，顺势可能会问一些状态码和状态值的问题，或者直接问到关于 http 上面的问题。

原型继承

function inherit(supertype,subtype){
            Object.setPrototypeOf(subtype.prototype,supertype.prototype)
            subtype.prototype.constructor = subtype
        }

        function Car(name,power){
            this.name=name
            this.power = power
        }

        Car.prototype.showPower = function(){
            console.log(this.power)
        }

        function Changan(price,name,power){
            this.price = price
            Car.call(this,name,power)
        }

        inherit(Car,Changan)

        Changan.prototype.showName = function(){
            console.log(this.name)
        }

        var star = new Changan(100000,'star',500)

        star.showPower()
复制代码

防抖与节流

function debounce(fn,duration){
            var  timer
            window.clearTimeout(timer)
            timer = setTimeout(()=>{
                fn.call(this)
            },duration)
        }
  function throttle(fn,duration){
            let canIRun
            if(!canIRun)return
            fn.call(this)
            canIRun = false
            setTimeout(()=>{
                canIRun = true
            },duration)
        }
     
复制代码