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

相关推荐
背影疾风3 分钟前
C++之路:类基础、构造析构、拷贝构造函数
linux·开发语言·c++
Ting-yu7 分钟前
Java中Stream流的使用
java·开发语言·windows
csdn_aspnet13 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel36 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
Zevalin爱灰灰1 小时前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
冰糖猕猴桃1 小时前
【Python】进阶 - 数据结构与算法
开发语言·数据结构·python·算法·时间复杂度、空间复杂度·树、二叉树·堆、图
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
wt_cs1 小时前
银行回单ocr api集成解析-图像文字识别-文字识别技术
开发语言·python
奋飛2 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts