几个会被面试问到的JS基础实现代码

记录工作和学习中的一些可能会被面试问到的JS内部实现基础,由于笔者水平有限,提供出的答案不一定准确,但是原理尽可能会讲清楚,以后会进行逐步添加。

bind实现

bind实现其实是内部调用apply或者call来实现对象的this绑定,具体实现可以参考如下:

var o = {
    a: 1,
    b: 2,
    print: function() {
        console.log(this.a);
        console.log(arguments);
    }
};

var other = {
    a: 4,
    b: 5
}

Function.prototype.bind = function(context) {
    var args = Array.prototype.slice.call(arguments, 1),
    self = this;
    return function() {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return self.apply(context,finalArgs);
    };
}

var afterBind = o.print.bind(other, 1, 2);
afterBind(3, 4);

函数防抖和函数节流

这里是参考的co神的【前端性能】高性能滚动 scroll 及页面渲染优化一文中的防抖和节流。

函数防抖

函数防抖是指在一段时间内,只有当操作结束后才会在设置的超时时间内执行操作。可以想象一下,如果在窗口resize的时候,就是只有当resize结束完成之后,才会进行resizehandler操作,这样就保证了再resize的时候,页面内的元素是不会变动的,也就是“防抖”的真正含义

具体实现如下:

// 防抖动函数
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操作
    console.log('resize');
}, 1000);
 
// 绑定监听
window.addEventListener('resize', myEfficientFn);

函数节流

函数节流是在函数防抖的基础上增加了一个必须在多少时间间隔内运行一次的结果。就像co神举的例子,如果需要图片懒加载的时候,如果必须要等到滚动停止才加载图片,显示是不对的。

具体实现如下:

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();
 
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
 
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔,触发 handler
        if(curTime - startTime >= mustRun) {
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔,重新设定定时器
        } else {
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc() {
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('resize',throttle(realFunc,500,1000));

instanceof实现

instanceof的实现原理其实是:instanceof 左侧的对象沿着__proto__进行原型链的查找,右侧的对象沿着prototype进行原型链查找,如果存在着查找出的一个对象,使得左右两侧相等,那么instanceof就会返回true

强烈推荐看王福朋的javascript原型链系列文章,里面有详细的讲解。

具体实现如下:

function A() {
    this.name = 'A';
}

function B() {
    this.name = 'B';
}

B.prototype = A.prototype;
B.prototype.constructor = B;

var b = new B();

function myInstanceOf(obj1, obj2) {
    if (typeof obj2 !== 'object') {
        return new throw("Right-hand side of 'instanceof' is not an object");
    }

    if (typeof obj1 !== 'object') {
        return false;
    }
    
    if (obj2.prototype.__proto__ === null) {
        return true;
    }
    
    var _p;
    var isInstanceOf = false;
    while(_p = obj1.__proto__) {
        if (_p === obj2.prototype) {
            isInstanceOf = true;
            break;
        }
        obj1 = _p;
    }
    return isInstanceOf;
}

console.log(myInstanceOf(b, B));    // true
console.log(myInstanceOf(B, Function));     // true
console.log(myInstanceOf(b, Function));     // false
console.log(myInstanceOf(b.constructor, Function));     // true

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏佳爷的后花媛

前端面试题整理

两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

47820
来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

15410
来自专栏别先生

jQuery/javascript实现网页注册的表单验证

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <...

27560
来自专栏前端架构与工程

【翻译】JavaScript内存泄露

我们在进行JavaScript开发时,很少会考虑内存的管理。JavaScript中变量的声明和使用看起来是一件很轻松的事,底层的细节处理交给浏览器去做就好了。 ...

30260
来自专栏华仔的技术笔记

GO语言学习笔记

505100
来自专栏python3

scrapy选择器xpath

Scrapy提取数据有自己的一套机制,它们被称作选择器(seletors),通过特定的Xpath或者css表达式来"选择"html文件中的某个部分。

6410
来自专栏Golang语言社区

从web图片裁剪出发:了解H5中的Blob

刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像。当时两个方案摆在我面前,一个是flash,我不会。另一个是通过iframe上传图片,然后再上传坐标由后...

53070
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

1.3K30
来自专栏一个会写诗的程序员的博客

BootstrapTable (前后端分页,表格 ajax 返回数据回调处理) 配置参数全说明

4.2K40
来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

29160

扫码关注云+社区

领取腾讯云代金券