手写实现函数方法之 call、apply、bind、节流与防抖

最新推荐文章于 2024-06-16 11:16:16 发布
最新推荐文章于 2024-06-16 11:16:16 发布
阅读量312 收藏
点赞数
分类专栏： Javascript 文章标签： 手写实现函数方法 call apply bind 节流与防抖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/119849978
版权
本文详细介绍了JavaScript中call、apply、bind三个函数方法的实现原理及应用实例，同时探讨了函数节流和防抖两种优化技术的实现和使用场景。通过示例代码展示了如何手动实现这些功能，帮助读者深入理解JavaScript函数的高级用法。
摘要由CSDN通过智能技术生成
一、call 方法
  1. call，语法为 call(fn, obj, ...args)，功能为执行 fn，使 this 为 obj，并将后面的 n 个参数传给 fn，等同于函数对象的 call 方法。
  2. call 的实现，代码如下所示：

export function call (Fn, obj, ...args) {
  // 判断
  if (obj === undefined || obj === null) {
    obj = globalThis; // 全局对象
  }
  // 为 obj 添加临时的方法
  obj.temp = Fn;
  // 调用 temp 方法
  let result = obj.temp(...args);
  // 删除 temp 方法
  delete obj.temp;
  // 返回执行结果
  return result;
}
  1. 手写函数 call 的应用，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>call 方法</title>
  <script src="../../src/function/call.js"></script>
</head>
<body>
  <script>
    // 声明一个函数
    function add (a, b) {
      console.log(this);
      return a + b + this.c;
    }
    // 声明一个对象
    let obj = {
      c: 100
    }
    // 添加全局属性
    window.c = 200;

    // 执行 call 函数
    console.log(call(add, obj, 10, 20));
    console.log(call(add, null, 30, 40));
  </script>
</body>
</html>
二、apply 方法
  1. apply，语法为 apply(fn, obj, args)，功能为执行 fn，使 this 为 obj，并将 args 数组中的元素传给 fn，等同于函数对象的 apply 方法。
  2. apply 的实现，代码如下所示：

export function apply (Fn, obj, args) {
  // 判断
  if (obj === undefined || obj === null) {
    obj = globalThis;
  }
  // 为 obj 添加临时的方法
  obj.temp = Fn;
  // 执行方法
  let result = obj.temp(...args);
  // 删除临时属性
  delete obj.temp;
  // 返回结果
  return result;
}
  1. 手写函数 apply 的应用，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>apply 方法</title>
  <script src="./../../src/function/apply.js"></script>
</head>
<body>
  <script>
    // 声明一个函数
    function add (a, b) {
      console.log(this);
      return a + b + this.c;
    }
    // 声明一个对象
    let obj = {
      c: 521
    };
    // 添加全局属性
    window.c = 1314;

    // 执行 apply 函数
    console.log(apply(add, obj, [10, 20]));
    console.log(apply(add, null, [30, 40]));
    
    console.log(obj);
  </script>
</body>
</html>
三、bind 方法
  1. bind，语法为 bind(fn, obj, ...args)，功能为 给 fn 绑定 this 为 obj，并指定参数为后面的 n 个参数，等同于函数对象的 bind 方法。
  2. bind 的实现，代码如下所示：

import { call } from './call';

export function bind(Fn, obj, ...args) {
  // 返回一个新的函数
  return function (...args2) {
    // 执行 call 函数
    return call(Fn, obj, ...args, ...args2);
  }
}
  1. 手写函数 bind 的应用，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bind 方法</title>
  <script src="./../../src/function/call.js"></script>
  <script src="./../../src/function/bind.js"></script>
</head>
<body>
  <script>
    // 声明一个函数
    function add(a, b) {
      console.log(this);
      console.log(arguments);
      return a + b + this.c;
    }

    // 声明一个对象
    let obj = {
      c: 521
    }

    // 添加全局属性
    window.c = 1314;

    // 执行函数
    // let fn = bind(add, obj, 10, 20);
    // console.log(fn());

    // let fn2 = bind(add, obj);
    // console.log(fn2(10, 20));

    // let fn3 = add.bind(obj, 10, 20);
    // console.log(fn3(30, 40));


    let fn4 = bind(add, obj, 10, 20);
    console.log(fn4(30, 50));

  </script>
</body>
</html>
四、节流方法
  1. 函数的节流，函数需要频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次。适合多次事件按时间做平均分配触发。
  2. throttle，语法为 throttle(callback, wait)，功能为创建一个节流函数，在 wait 毫秒内最多执行 callback 一次。
  3. throttle 的实现，代码如下所示：

export function throttle (callback, wait) {
  // 定义开始的时间
  let start = 0;
  // 返回结果是一个函数
  return function (e) {
    // 获取当前的时间戳
    let now = Date.now();
    // 判断
    if (now - start >= wait) {
      // 若满足条件，则执行回调函数
      callback.call(this, e);
      // 修改开始的时间
      start = now;
    }
  }
}
  1. 手写函数 throttle 的应用，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数的节流 throttle</title>
  <script src="../../src/function/throttle.js"></script>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(#125, #eae);
    }
  </style>
</head>
<body>
  <script>
    // 绑定滚动事件
    // window.addEventListener('scroll', function(){
    //   console.log(Date.now());
    // });

    window.addEventListener('scroll', throttle(function(e){
      // console.log(Date.now());
      console.log(e);
    }, 500));
  </script>
</body>
</html>
五、防抖方法
  1. debounce，语法为 debounce(callback, wait)，功能为创建一个防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 callback。
  2. debounce 的实现，代码如下所示：

export function debounce (callback, time) {
  // 定时器变量
  let timeId = null;
  // 返回一个函数
  return function (e) {
    // 判断
    if (timeId !== null) {
      // 清空定时器
      clearTimeout(timeId);
    }

    // 启动定时器
    timeId = setTimeout(() => {
      // 执行回调
      callback.call(this, e);
      // 重置定时器变量
      timeId = null;
    }, time);
  }
}
  1. 手写函数 debounce 的应用，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数的防抖 debounce</title>
  <script src="../../src/function/debounce.js"></script>
</head>
<body>
  <script>
    let input = document.querySelector('input');

    // input.onkeydown = function (e) {
    //   console.log(e.keyCode);
    // };

    input.onkeydown = debounce(function(e){
      console.log(e.keyCode);
    }, 1000);
  </script>
</body>
</html>
城南花开ze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中节流函数介绍与实现（秒懂如何手写节流）
百赢出品，必属精品
04-03 1999
它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。
手写 new, call, apply, bind, reduce, currying柯里化， 防抖节流 源码
qt的博客
12-31 175
实现 new 先用文字描述一下 new 的实现过程 新定义一个 json 对象 对象 继承 构造函数的原型链 将构造函数的 this 指向这个对象 根据构造函数的返回值类型返回结果， function myNew(fn) { let obj = {} obj = Object.create(fn.prototype) let args = Array.prototype.slice.call(arguments, 1) // 获取除去fn之外的参数 let resu
手写实现call函数
Tansum
10-08 1837
在大厂的面试中，手写实现call,apply,bind(特别是bind)一直是比较高频的面试题，在这里我们先来实现一下call函数。 思路 根据call的规则设置上下文对象,也就是this的指向。 通过设置context的属性,将函数的this指向隐式绑定到context上 通过隐式绑定执行函数并传递参数。 删除临时属性，返回函数执行结果 Function.prototype.myCa...
手写call函数
weixin_51028194的博客
12-14 159
let obj = { name: 123, myFunc:‘hello’ } function test(){ console.log(this) } Function.prototype.myCall = function(thisObj,…args){ let Func = this let s = Symbol(‘myFunc’) let sArr = Object.getOwnPropertySymbols(thisObj) delete thisObj[sArr[0]] thisObj[s] =
手写实现call函数和应用场景
最新发布
m0_61368323的博客
06-16 241
【代码】手写实现call函数。
js代码-手写call/bind/apply
07-16
在JavaScript中，`call()`, `bind()`, 和 `apply()` 是函数对象的三个非常重要的方法，它们都与改变函数的执行上下文（即`this`关键字的指向）以及调用函数的方式有关。这些方法是JavaScript高级编程的核心部分，...
前端面试中常见的原生JS手写实现函数
weixin_44685906的博客
05-12 2060
前端面试中常见的原生JS手写实现函数前言实现call函数apply函数bind函数newinstanceof函数继承实现深拷贝深度比较防抖函数节流函数Promise.all()Promise.race()函数柯里化用setTimeout实现setInterval原生JS实现Ajax上拉加载更多发布订阅模式数组转换为二叉树sleep函数map函数reduce函数filter函数forEach函数find函数some函数every函数includes函数join函数用reduce实现mapconcat函数快速排
JS函数——高阶函数、函数柯里化、防抖和节流
zhengjingID的博客
06-01 488
随着前端学习的深入，高阶函数、函数柯里化、防抖和节流的概念及实现成为了我们需要掌握和了解的内容。
JavaScript之手写call函数
Turnip的博客
06-22 390
简单手写call函数
JavaScript 手写 call 函数
靖凡无所畏惧的个人博客
03-01 275
前言： 今天给大家带来 手写 call 函数，希望对大家有所帮助！ 代码： 注意点： 将函数设为对象的属性 执行&删除这个函数 指定this到函数并传入给定参数执行函数 如果不传入参数，默认指向为 window Function.prototype.myCall = function(context = window,...args){ var key = Symbol('key'); context[key] = this; var resu...
js手写call函数
weixin_30621919的博客
09-26 263
Function.prototype.myCall = function (context, ...arr) { if (context === null || context === undefined) { // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为window) context = ...
手写 call、apply 及 bind 函数
weixin_47450807的博客
02-26 4640
手写 call、apply 及 bind 函数
手写call()
Alive_tree的博客
08-07 305
call()为this函数/方法提供新的值，使用call()，您可以编写一次方法，然后在另一个对象中继承该方法 ，而不必为新对象重写该方法。 注意：虽然apply（）与call()方法一致，但是基本区别call（）接受参数列表，而apply（）接受参数数组。 语法 function.call(thisArg, arg1, arg2, ...) call()的原理比较简单，由于函数的this指向它的直接调用者，我们变更调用者即可完成This指向的变更。 先看个例子 //定义一个方法 func.
手写 函数 call 方法
qq_43495913的博客
03-26 213
手写 函数 call 方法 第一步，想一下call都做了什么？ 1，改变 .call前面函数中的this --获取到函数体 2，返回前面函数的执行结果 --返回 先创建一个对象，在给它创建一个方法，返回this和arguments let o1 = new Object(); o1.name = 'o1'; o1.console = function(){ console.log(this,arguments) } 由于所有的函数都能调用call 方法 我们把自己的call给它也绑定过
【JS】手写call
owo_ovo的博客
04-10 421
js手写call
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值