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

相关推荐
bigdata-rookie几秒前
Java 反射
java·开发语言
能工智人小辰13 分钟前
Java8 Swing实现计算器
开发语言
SccTsAxR16 分钟前
[C语言]常见排序算法①
c语言·开发语言·经验分享·笔记·其他·排序算法
Monly2133 分钟前
Vue:下拉框多选影响行高
前端·javascript·vue.js
小桥风满袖41 分钟前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
超人不会飛1 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
怀旧,1 小时前
【C++】20. unordered_set和unordered_map
开发语言·c++
alibli1 小时前
一文学会CMakeLists.txt: CMake现代C++跨平台工程化实战
开发语言·c++·系统架构
艾小码2 小时前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js
艾小码2 小时前
还在手动加载全部组件?这招让Vue应用性能飙升200%!
前端·javascript·vue.js