面试题里的那些各种手写

栏目: jQuery · 发布时间: 5年前

内容简介:最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现bind,promise。手写ajax,手写一些算法。 翻阅了很多书籍和博客。简单的说明:这里的

最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现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)
        }
     
复制代码

以上所述就是小编给大家介绍的《面试题里的那些各种手写》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++Templates中文版

C++Templates中文版

David Vandevoorde、Nicolai M.Josuttis / 陈伟柱 / 人民邮电出版社 / 2008-2 / 69.00元

本书是C++模板编程的完全指南,旨在通过基本概念、常用技巧和应用实例3方面的有用资料,为读者打下C++模板知识的坚实基础。 全书共22章。第1章全面介绍了本书的内容结构和相关情况。第1部分(第2~7章)以教程的风格介绍了模板的基本概念,第2部分(第8~13章)阐述了模板的语言细节,第3部分(第14~18章)介绍了C++模板所支持的基本设计技术,第4部分(第19~22章)深入探讨了各种使用模板......一起来看看 《C++Templates中文版》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具