Javascript中bind、call、apply區別

在JavaScript中,bindcallapply 都是用于改变函数执行时上下文(即函数体内 this 的指向)的方法,但它们之间有一些关键的区别。

区别

  1. callapply

    • 两者都用于立即执行函数,并且都可以改变函数执行时 this 的指向。
    • 参数区别call 方法接受一个参数列表,而 apply 方法接受一个包含多个参数的数组(或类数组对象)。

    function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
    }

    const person = { name: 'John' };

    greet.call(person, 'Hello', '!'); // Hello, John!
    greet.apply(person, ['Hello', '!']); // Hello, John!

2. bind

  • bind 方法创建一个新的函数,在 bind 被调用时,这个新函数的 this 被指定为 bind 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

  • 重要的是,bind 不会立即执行函数,而是返回一个新的函数供后续调用。

    const greetBound = greet.bind(person, 'Hello');
    greetBound('!'); // Hello, John!

实现一个 bind

实现一个基本的 bind 函数需要考虑多个方面,包括正确处理 this 上下文、参数传递以及新函数的返回值等。以下是一个简化的实现示例:

复制代码
Function.prototype.myBind = function(context, ...boundArgs) {  
  if (typeof this !== 'function') {  
    throw new TypeError('What is trying to be bound is not callable');  
  }  
  
  const self = this; // 保存原函数  
  
  return function boundFunction(...args) {  
    // 使用 apply 来调用原函数,传入正确的 this 上下文和参数  
    // 合并 bind 时的参数和调用时的参数  
    return self.apply(context, boundArgs.concat(args));  
  };  
};  
  
// 使用示例  
const greet = function(greeting, punctuation) {  
  console.log(greeting + ', ' + this.name + punctuation);  
};  
  
const person = { name: 'John' };  
  
const greetBound = greet.myBind(person, 'Hello');  
greetBound('!'); // Hello, John!

这个 myBind 实现是基本的,它没有处理诸如构造函数调用(即使用 new 关键字)时的特殊情况,也没有处理 new.target 属性的情况。在完整的 bind 实现中,还需要考虑这些因素以确保行为的全面性和一致性。不过,这个示例为理解 bind 的基本工作原理提供了一个很好的起点。

原生JavaScript实现call、apply和bind - Web前端工程师面试题讲解_哔哩哔哩_bilibili

相关推荐
一只一只妖2 分钟前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟3 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶3 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
潼心1412o3 小时前
C语言(长期更新)第15讲 指针详解(五):习题实战
c语言·开发语言
LFly_ice4 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
Murphy_lx4 小时前
Lambda表达式
开发语言·c++
gnip4 小时前
js上下文
前端·javascript
中草药z4 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
yangpipi-4 小时前
C++并发编程-23. 线程间切分任务的方法
开发语言·c++