js手写代码

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量5.4k 收藏 2
点赞数
分类专栏： 面试题 文章标签： js 前端 面试 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee_slly/article/details/109466789
版权

new

原理： 

  1. 新生成了一个对象
  2. 链接到原型
  3. 绑定 this
  4. 返回新对象

实现： 

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数，以便实现作用域的绑定
    let Con = [].shift.call(arguments)
    // 由于通过new操作创建的对象实例内部的不可访问的属性[[Prototype]](有些浏览器里面为__proto__)
    // 指向的是构造函数的原型对象的，所以这里实现手动绑定。
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}

其他思路：

function create() {
    // 获得构造函数，以便实现作用域的绑定
    let Con = [].shift.call(arguments);
    // Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__
    var newObj = Object.create(Con.prototype);
    // 作用域的绑定
    Con.apply(newObj, arguments);
    return newObj ;
}

instanceof 

 原理：

instanceof 接收两个参数，第一个为instance（实例），第二个为要Constructor（构造函数），返回值为boolean，函数内的实现其实就是对instance的原型链进行遍历（其实就是一个链表遍历），如果遍历到了某一项原型等于这个Constructor的原型，则返回true

实现： 

function myInstanceof(instance, Constructor){
    if(typeof instance !== "object" || instance === null){
        throw "the instance must be 'Object'";
    }
    if(typeof Constructor !== "function"){
        throw "the Contructor must be 'Function'"
    }   

    let prototype = instance.__proto__;
    // 遍历链表用while
    while(true){
        if (prototype === null){
            return false;
        }else if(prototype === Constructor.prototype){
            return true;
        }else{
            prototype = prototype.__proto__;
        }
    }
}

函数防抖（debounce）和 函数节流（throttle）

函数防抖 

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。

应用场景：

连续的事件，只需触发一次回调的场景有：

  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染

实现：

/**
   * @desc 函数防抖
   * @param func 目标函数
   * @param wait 延迟执行毫秒数
   * @param immediate true - 立即执行， false - 延迟执行
   */
function debounce(func, wait, immediate) {
    var timer;  // 维护一个 timer

    return function () {
        // 因为需要防抖一般是浏览器事件，那么我们就需要确保使用 debounce 处理过的事件处理程序不能出现一些意外的错误
        // 比如 this 指向和 event 对象
        // 以下两句代码用于解决 this 和 event 不正确的问题
        var context = this;  // 取debounce执行作用域的this
        var args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            // 如果已经执行过，不再执行
            var hasCallback = !timer;
            timer = setTimeout(function(){
                timer = null; // 考虑到不再触发之后的情况，如果不置 timer 为null 就无法再实现下次的立即执行!
            }, wait)
            if (hasCallback) func.apply(context, args)
        }
        else {
            timer = setTimeout(function(){
                func.apply(context, args);  // 用apply指向调用debounce的对象，相当于this.func(args);
            }, wait);
        }
    }
}

函数节流

每隔一段时间，只执行一次函数。

应用场景：

间隔一段时间执行一次回调的场景有：

  • 滚动加载，加载更多或滚到底部监听
  • 谷歌搜索框，搜索联想功能
  • 高频点击提交，表单重复提交

原理：

通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

实现：

function throttle(fn, interval) {
  let canRun = true;
  return function (...args) {
    if (!canRun) return // 如果 interval 时间内再次触发会在此处阻拦
    canRun = false;
    setTimeout(() => {
      canRun = true;
      fn.apply(this, args); // this 指向这个节流函数的调用者
    }, interval)
  }
}

异同比较

相同点：

  • 都可以通过使用 setTimeout 实现。
  • 目的都是，降低回调执行频率。节省计算资源。

不同点：

  • 函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
  • 函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

深拷贝deepclone

简单版

function deepClone(obj){
    var cloneObj;
    //当输入数据为简单数据类型时直接复制
    if(obj === null || Object.prototype.toString.call(obj)==="[object RegExp]" || typeof obj !== 'object'){
        cloneObj = obj;
    }else{
       //检测输入数据是数组还是对象
       cloneObj = Array.isArray(obj) ? [] : {};
       Object.keys(obj).forEach((key)=>{
            cloneObj[key] = deepClone(obj[key])
        })
    }
    return cloneObj;
}

改进版

原理：

  • 判断类型是否为原始类型，如果是，无需拷贝，直接返回

  • 为避免出现循环引用，拷贝对象时先判断存储空间中是否存在当前对象，如果有就直接返回

  • 开辟一个存储空间，来存储当前对象和拷贝对象的对应关系

  • 对引用类型递归拷贝直到属性为原始类型

 实现：

const deepClone = (target, cache = new WeakMap()) => {
    if(target === null || typeof target !== 'object') {
        return target;
    }
    if(cache.get(target)) {
        return target;
    }
    const copy = Array.isArray(target) ? [] : {};
    cache.set(target, copy);
    Object.keys(target).forEach(key => copy[key] = deepClone(target[key], cache));
    return copy;
}

尤雨溪版

function find(list, f) {
    return list.filter(f)[0]
}
 
 
function deepCopy(obj, cache = []) {
    // just return if obj is immutable value
    if (obj === null || typeof obj !== 'object') {
        return obj
    }
 
 
    // if obj is hit, it is in circular structure
    const hit = find(cache, c => c.original === obj)
    if (hit) {
        return hit.copy
    }
 
 
    const copy = Array.isArray(obj) ? [] : {}
    // put the copy into cache at first
    // because we want to refer it in recursive deepCopy
    cache.push({
        original: obj,
        copy
    })
    Object.keys(obj).forEach(key => copy[key] = deepCopy(obj[key], cache))
 
 
    return copy
}

call

原理：

  • 第一个参数为null或者undefined时，this指向全局对象window，值为原始值的指向该原始值的自动包装对象，如 String、Number、Boolean

  • 为了避免函数名与上下文(context)的属性发生冲突，使用Symbol类型作为唯一值

  • 将函数作为传入的上下文(context)属性执行

  • 函数执行完成后删除该属性

  • 返回执行结果

实现：

Function.prototype.myCall = function(context, ...args) {
    if(typeof this !== 'function') {
        throw new TypeError('not a function!');
    }
    // 不传入第一个参数，那么默认为 window
    context = context || window;
    const key = Symbol();
    // 给 context 添加一个属性
    // eg: getValue.call(a, 'yck', '24') => a.fn = getValue
    context[key] = this;
    // eg: getValue.call(a, 'yck', '24') => a.fn('yck', '24')
    const result = context[key](...args);
    delete context[key];
    return result;
}

apply

原理：

  • 前部分与call一样

  • 第二个参数可以不传，但类型必须为数组或者类数组【注：javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。比如 document.getElementsByTagName()。】

 实现：

Function.prototype.myApply = function(context) {
    if(typeof this !== 'function') {
        throw new TypeError('not a function!');
    }
    context =  context || window;
    const key = Symbol();
    const args = arguments[1];
    context[key] = this;
    let result;
    // 需要判断是否存在第二个参数，如果存在并且是数组类型，就将第二个参数展开
    // Array.prototype.slice.call将类数组转换成数组
    if(args && Array.isArray(Array.prototype.slice.call(args))) {
        result = context[key](...args);
    } else {
        result = context[key]();
    }
    delete context[key];
    return result;
}

bind

原理：

  • 使用 call / apply 指定 this

  • 返回一个绑定函数

  • 当返回的绑定函数作为构造函数被new调用，绑定的上下文指向实例对象

  • 设置绑定函数的prototype 为原函数的prototype

实现：

Function.prototype.myBind = function(context, ...args) {
    if(typeof this !== 'function') {
        throw new TypeError('not a function!');
    }
    const fn = this
    const bindFn = function (...newFnArgs) {
        // bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略
        fn.call(
            this instanceof bindFn ? this : context,
            ...args, ...newFnArgs
        )
    }
    bindFn.prototype = Object.create(fn.prototype)
    return bindFn
}

 

 

 

 

 

李某龙
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-手写代码练习
07-16
js代码-手写代码练习
js代码-手写bind
07-14
通过这样的手写过程，我们可以更深入地理解`bind`的工作机制，并掌握JavaScript中`this`的动态绑定和函数作用域的原理。这在日常开发中非常有用，尤其是在处理事件处理器、回调函数、类的方法以及模块导出时。
JavaScript手写代码面试题
Amelian的博客
03-06 1023
1.实现一个new操作符 function myNew(func) { //1.创建一个空的对象 var obj = {}; //2.将新创建的新对象的隐形原型指向构造函数的显示原型 obj.__proto__ = func.prototype; //由于arguments是类数组，需要转换才能调用数组的方法，需要从第二个开始获取参数 var a
JavaScript 手写代码 第一期
qq_63299825的博客
06-22 1918
静态方法以一个现有对象作为原型，创建一个新对象。
JS面试手写代码题
anchor_1的博客
03-15 900
1.//实现一个去重函数 function union(a, b){ return [...new Set([...a,...b])] } union([1,2,3],[4,3,2,4]);//[1,2,3,4] 2./**获取入参的类型 *例如： * getTYpe(1) => Number * getTYpe(true) => Boolean * getTYpe([1,2,3]) => Array * getType({a:1}) => Object */ function
【js】手写代码系列
qq_38211443的博客
02-23 1311
1. hasPrototypeProperty 判断某属性是否是某对象 原型上的属性 知识点： hasOwnProperty() 可以判断属性是否是实例属性。 in 可以判断是否可以通过该对象访问指定属性，无论是在实例上还是在原型链上。 function hasPrototypeProperty(object,name){ return !object.hasOwnProperty(name) && (name in object); } ...
js常见的手写代码题
weixin_46947007的博客
04-09 128
【代码】js常见的手写代码题。
js手写代码-new、call、bind、flat以及深拷贝
xie_ss的博客
04-25 108
与call类似，只是传参格式不一样。
常见JS手写代码系列总结1
cindy647的博客
07-08 571
JS手写系列1 参考文章： JS常见手写代码题（一） 【javascript】手写call,apply,bind函数 以下为一些常见的js手写代码系列 call apply bind new 数组扁平化 数组去重 原型继承 一、JS实现一个call 方法或函数fun.call(obj, 参数1，参数2，…)，第一个值是改变this指向到obj，后面是参数队列，调用call立即执行方法fun call的定义和用法 // call方法第一个参数指的是this的指向；接受一个参数列表;方法立即执行 // Fu
JS数组方法手写代码实现（一）
m0_55315930的博客
11-17 659
JavaScript的Array方法的原生JavaScript代码实现。
JavaScript基础（手写代码）
sunzhibin的博客
02-09 130
【代码】JavaScript基础-前端八股文之手写代码篇
JavaScript 手写代码 第四期
qq_63299825的博客
06-24 4724
我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。具体思路就是遍历数组arr，只要没有完全拍平，就一直进行扁平化操作。将数组扁平化处理，返回一个新数组，对原数据没有影响。简单来说，就是将多维数组转换为一维数组。
「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）
10-17
主要介绍了JavaScript手写代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js代码-手写代码复习
07-14
在JavaScript（JS）编程中，手写代码是提升技能和理解力的重要实践方式。通过复习手写的JS代码，我们可以深入理解语言的核心概念、语法结构以及常见的编程技巧。在这个"js代码-手写代码复习"的资源中，包含了`main....
js 如何使 (aﾠ==1 && a== 2 && a==3) 返回 true？
lee_slly的博客
03-02 7044
今天刷博客的时候，看到了一道有趣的面试题“如何使 (aﾠ==1 && a== 2 && a==3) 返回 true”，咋一眼看过去，觉得非常的unbelievable！！！ 看了别人给的答案之后，陷入了沉思。。。然后感叹一声：原来如此！ 解法一：对象类型转换 var a = { i: 1, toString: function...
浅谈V8引擎中的垃圾回收机制
lee_slly的博客
11-05 6392
垃圾回收机制 如何判断是否可以回收 1.1 标记清除 当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。 可以使用任何方式来标记变量。比如，可以通过翻转某个特殊的位来记录一个变量何时进入环境，或者使用一个“进入环境的”变量列表及一个“离开环境的”变量列表来跟踪哪个变量发生了变化。如何标记变量并不重要，关键在于采取什么策略。
函数传参你真的懂吗？
lee_slly的博客
11-20 6272
直接开门见山，上代码！ var a = 1; function func(args) { args = 10; console.log("args:"+args); } func(a); console.log("a:"+a); /** args:10 a:1 **/ var a = { 'x':1 }; function func(args) { args.x = 10; console.log("args.x:"+args.x); } func(a); console.log("
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 816
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
js 手写冒泡排序代码
03-02
当然可以为您提供js手写冒泡排序代码，如下所示： ``` function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp; } } } return arr; } ``` 这段代码可以对一个数组进行冒泡排序，将数组元素从小到大排序。如果您有任何其他问题，欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值