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 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
人生在勤,不索何获-白大侠4 分钟前
day17——Java集合进阶(Collections、Map)
java·开发语言
南屿im7 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
JustHappy10 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心10 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
程序员小羊!16 分钟前
Java教程:JavaWeb ---MySQL高级
java·开发语言·mysql
归于尽18 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter18 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
m0_7231402324 分钟前
Python训练营-Day49
开发语言·python
GISer_Jing27 分钟前
前端开发—全栈开发
前端·javascript