深入理解call、bind、和apply的使用以及底层代码手写

于 2024-10-01 11:26:26 发布
阅读量682 收藏 6
点赞数 9
分类专栏： JavaScript 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85770776/article/details/142667528
版权

call、bind、和apply的使用

在 JavaScript 中，call、apply 和 bind 是三个非常常见的方法，用来显式地指定函数的 this 绑定，它们都可以用来改变函数的执行上下文（即函数内部的 this 指向）。尽管它们的功能相似，但在使用时有一些区别。
开启use strict this 的值为 undefined 而不是全局对象

文章目录

1. call 方法

call() 方法调用一个函数，并允许你在调用时指定 this 的值，同时以逗号分隔的参数列表形式传递参数。

语法：
func.call(thisArg, arg1, arg2, ...);
person1.fn.call(person2)
  • thisArg: 调用该函数时绑定的 this 值。
  • arg1, arg2, ...: 传给函数的参数。
示例：
function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Alice" };

// 使用 call 调用函数并指定 this
greet.call(person, "Hello", "!");
// 输出: "Hello, Alice!"

在这个例子中，greet 函数的 this 指向了 person 对象，通过 call 方法传递了 this 以及函数的参数。

2. apply 方法

apply() 与 call() 类似，但它接受的是数组形式的参数，而不是一个个分开的参数。

语法：
func.apply(thisArg, [argsArray]);
  • thisArg: 调用该函数时绑定的 this 值。
  • argsArray: 传给函数的参数数组。
示例：
function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Bob" };

// 使用 apply 调用函数并指定 this
greet.apply(person, ["Hi", "."]);
// 输出: "Hi, Bob."

apply() 通常在你已经有一个数组或类数组对象需要作为参数传入时更为有用。

使用场景：求数组中的最大值

你可以用 apply 将数组传给 Math.max() 函数。

const numbers = [1, 2, 3, 4, 5];

const max = Math.max.apply(null, numbers);
console.log(max); // 输出: 5

这里 apply 将数组中的元素作为参数传递给了 Math.max()，而 null 则是因为 Math.max() 不依赖 this。

3. bind 方法

bind() 与 call 和 apply 不同，它不会立即调用函数，而是返回一个新的函数，该函数的 this 永远绑定为你指定的 thisArg 值。你可以在以后调用这个新函数。

语法：
const boundFunc = func.bind(thisArg, arg1, arg2, ...);
  • thisArg: 调用该函数时绑定的 this 值。
  • arg1, arg2, ...: （可选）调用时预置的参数。
示例：
function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Charlie" };

// 创建一个绑定了 this 的新函数
const boundGreet = greet.bind(person, "Hey");
boundGreet("!"); // 输出: "Hey, Charlie!"

在这个例子中，greet.bind(person, "Hey") 返回了一个新函数 boundGreet，它的 this 永远绑定为 person，并且预置了第一个参数为 "Hey"。调用 boundGreet("!") 时，实际上是调用了 greet("Hey", "!")。

4. call、apply 和 bind 的区别总结

方法什么时候调用？参数形式返回值
call立即调用函数逐个参数传递调用函数的结果
apply立即调用函数通过数组传递参数调用函数的结果
bind返回一个新函数逐个参数传递（预置参数可选）绑定了 this 的新函数

5. 实际应用场景

1. 借用其他对象的方法：

你可以通过 call 或 apply 借用其他对象的函数。例如，使用数组的 slice 方法来将类数组对象转换为数组。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

// 使用 call 借用 Array.prototype.slice
const realArray = Array.prototype.slice.call(arrayLike);
console.log(realArray); // 输出: ['a', 'b', 'c']
2. 函数柯里化：

bind() 可用于函数柯里化（将部分参数固定，返回一个新函数），例如：

function multiply(x, y) {
  return x * y;
}

const double = multiply.bind(null, 2); // 固定 x 为 2
console.log(double(5)); // 输出: 10

在这个例子中，double 函数实际上是 multiply(2, y)，bind() 将第一个参数固定为 2。

3. 设置定时器
function fn(name){
	console.log('hello'+name)
}
const delayFn=fn.bind(null,'key')
//this指向widow
setTimeout(delayFn,2000)

call、bind、和apply的手写

1. call方法：

Function.prototype.myCall = function(context, ...args) {
    // 判断调用 myCall 的是否是函数
    if (typeof this !== 'function') {
        throw new TypeError('被调用的对象必须是函数');
    }

    // 如果没有传入上下文对象，默认为全局对象
    context = context || globalThis;

    // 用 Symbol 来创建唯一的 fn，防止名字冲突
    let fn = Symbol('key');
    context[fn] = this;

    // 传入 myCall 的参数 args 并执行函数
    const result = context[fn](...args);

    // 删除临时添加的 fn 方法
    delete context[fn];

    // 返回结果（对有返回值的函数生效）
    return result;
}

// 定义对象和函数
var obj = {
    name: 'allen',
    fn() {
        console.log(this.name);
    },
    add(a, b) {
        return a + b;
    }
}

var obj1 = {
    name: 'bob'
}

// 测试 myCall 和 call
obj.fn.myCall(obj1); // 输出: "bob"
obj.fn.call(obj1);   // 输出: "bob"

console.log(obj.add.myCall(null, 1, 2)); // 输出: 3
console.log(obj.add.call(null, 1, 2));   // 输出: 3

2. apply方法：

原理：apply的实现思路和call类似，就是apply传入参数是以数组的形式传入，所有多了一步判断传入的参数是否为数组以及在调用方法的时候使用扩展运算符…将传入的参数数组argsArr展开。

Function.prototype.myApply = function(context, argsArr) {
    // 判断调用 myCall 的是否是函数
    if (typeof this !== 'function') {
        throw new TypeError('被调用的对象必须是函数');
    }
    //判断传递的参数类型是否为数组
    if(argsArr && !Array.isArray(argsArr)){
        throw new TypeError('第二个参数必须是数组')
    }

    // 如果没有传入上下文对象，默认为全局对象
    context = context || globalThis;

    // 用 Symbol 来创建唯一的 fn，防止名字冲突
    let fn = Symbol('key');
    context[fn] = this;

    // 传入 myApply 的参数 args 并执行函数
    const result=Array.isArray(argsArr)? context[fn](...argsArr):context[fn]()
    

    // 删除临时添加的 fn 方法
    delete context[fn];

    // 返回结果（对有返回值的函数生效）
    return result;
}
   const arr=[2,3,4,5,6]
   console.log(Math.max.myApply(null,arr));

3. bind方法：

Function.prototype.myBind = function(context, ...args) {
    // 判断调用 myCall 的是否是函数
    if (typeof this !== 'function') {
        throw new TypeError('被调用的对象必须是函数');
    }
    // 如果没有传入上下文对象，默认为全局对象
    context = context || globalThis;


    //保存原始函数(调用 myBind 的函数)的引用
    //保证了在新函数中继续调用该原函数。
    const _this=this
    //返回的 fn 函数支持继续传入额外的参数，并且还会判断是否作为构造函数使用。
    return function fn(...innerArgs){
        //判断返回出去的函数是不是作为构造函数
        if(this instanceof fn){
        /// 如果函数作为构造函数调用，this 指向实例对象
            return new _this(...args,...innerArgs)
        }
        //使用apply方法将原函数绑定的指定的上下文对象，//正常调用函数，将原函数的 this 绑定到指定的 context 上
        return _this.apply(context,args.concat(innerArgs))

    }
    

   
}

const test={
    name:'allen',
    hello:function(a,b,c){
        console.log(`hello,${this.name}!`,a+b+c);
        
    }
}
const obj={
    name:'world'
}
var h1=test.hello.myBind(obj,1)
var h2=test.hello.bind(obj,1)
h1(2,3)
h2(2,3)
console.log(new h1(2,3));
console.log(new h2(2,3));

new 操作创建了一个新实例，这个实例没有 name 属性

总结：

  • call 和 apply 都用于立即调用函数，但传递参数的方式不同：call 使用逗号分隔的参数列表，而 apply 使用数组。
  • bind 返回一个新函数，不会立即调用，可以用于创建带有固定 this 值和部分参数的函数。
一颗花生米。
关注
专栏目录
js代码-手写call/bind/apply
07-14
以上代码定义了`myCall()`, `myBind()`, 和 `myApply()` 方法，它们分别实现了与原生`call()`, `bind()`, 和 `apply()` 相同的功能。在实际应用中，这些自定义方法可以用于学习理解，但为了性能和兼容性考虑，通常应...
js代码-手写call、apply、bind
07-14
在JavaScript的世界里，`call`、`apply`和`bind`是函数对象的三个非常重要的方法，它们都与函数调用的上下文（也就是`this`关键字）有关。这三个方法都是Function.prototype对象上的方法，可以让我们灵活地控制函数...
js代码-手写bind
07-14
通过这样的手写过程，我们可以更深入地理解`bind`的工作机制，并掌握JavaScript中`this`的动态绑定和函数作用域的原理。这在日常开发中非常有用，尤其是在处理事件处理器、回调函数、类的方法以及模块导出时。
登录功能开发 P167重点
2303_81204446的博客
09-30 102
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1496
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 680
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 683
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 854
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 699
DC00015【含配套文档】基于java web校园网上购物系统。
如何使用ssm实现基于java web的防疫工作志愿者服务平台的设计与实现
寒夜
09-25 1013
【代码】ssm基于java web的防疫工作志愿者服务平台的设计与实现+jsp
HTML·第三章课后练习题
MortalTom的博客
09-26 457
【代码】HTML·第三章课后练习题。
uniapp中在web端如何友好的展示app当前的版本等信息
峰会路转的博客
09-30 130
一个小技巧，分享下在webapp中友好展示当前app信息的方法。
HTML基础用法介绍一
xiao_yi666的博客
09-27 828
HTML5基础用法介绍，帮助小白快速了解基础操作，实现HTML5熟练掌握指日可待，快来看看吧！！！
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 341
nodejs fs 模块的简介与相关案例
前端html+css+js 基础总结
2301_79706774的博客
09-23 1429
标签分为行级元素与块级元素行级元素占据区域由其显示内容决定，如span，img(图片)，<a></a>基本格式: <a href="链接" target="_blank"></a>用于跳转到其他网站，target="_blank"使其跳转时会打开新窗口 值是下划线blank，否则会在原窗口打开链接），strong（加粗文字），em（斜体文字）等。块级元素会换行显示，并占据整行区域，如div（布局标签），h，p，form（表单标签）等； 属性写在开始标签中，格式是键值对的形式，属性名：键；引号里的：值
UNI-SOP使用说明
china0851的专栏
09-25 863
UNI-SOP提供了两个集成客户端：SpringBoot2.x/JAVA1.8和SpringBoot3.x/JAVA17，满足不同项目的集成需求。
如何使用ssm实现基于在线开放课程的Web前端设计与实现+vue
最新发布
a253399414的博客
09-30 928
【代码】ssm基于在线开放课程的Web前端设计与实现+vue
APISIX 联动雷池 WAF 实现 Web 安全防护
caomengde233的博客
09-30 622
Apache APISIX 是一个动态、实时、高性能的云原生 API 网关，提供了负载均衡、动态上游、灰度发布、服务熔断、身份认证、可观测性等丰富的流量管理功能。
前端面试题（八）
上进！努力！！！
09-26 1201
前端面试题（八）
js手写call bind apply
05-09
好的，以下是手写 `call`、`bind` 和 `apply` 的实现： ```javascript // 手写 call Function.prototype.myCall = function(context, ...args) { context = context || window; const fn = Symbol(); context[fn] = this; const result = context[fn](...args); delete context[fn]; return result; } // 手写 apply Function.prototype.myApply = function(context, args) { context = context || window; const fn = Symbol(); context[fn] = this; const result = context[fn](...args); delete context[fn]; return result; } // 手写 bind Function.prototype.myBind = function(context, ...args1) { const self = this; return function(...args2) { context = context || this; return self.apply(context, [...args1, ...args2]); } } ``` 这些方法的核心思想都是通过改变 `this` 的指向来实现调用函数，并且在调用完毕后删除添加到 `context` 对象中的临时属性。其中，`bind` 方法需要返回一个新函数，因此我们可以使用闭包来保存 `this` 和 `args1`，并在返回的函数中重新调用原函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值