call，apply和bind的小小总结

蔡姐

已于 2022-04-26 20:14:11 修改

阅读量395

点赞数 1

分类专栏： JavaScript基础知识文章标签： javascript

于 2020-06-24 18:58:02 首次发布

本文链接：https://blog.csdn.net/baidu_33438652/article/details/106943109

版权

本文总结了JavaScript中的call、apply和bind的区别和用途，包括它们的语法、返回值、作用和实现原理。call和apply主要用来改变函数的this指向，call接受参数列表，apply接受参数数组，两者都会立即执行函数。bind则返回一个绑定特定this和参数的新函数，不立即执行。在面试和实际开发中，它们常用于继承、调用函数和设置上下文。

摘要由CSDN通过智能技术生成

在前端面试时候经常会问apply，call有什么区别，平时会用他们做什么。
对于这个问题，已经有很多文章介绍了，我这里就不进行太过复杂的说明，就简单总结一下他们的区别，然后介绍一个很好玩的例子供大家理解。
开始正文：

第一章 call，apply和bind的概念

1.1 call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
注意：call接受的是一个参数列表

1.1.1 语法

function.call(thisArg, arg1, arg2, ...)

thisArg：可选的。在 function 函数运行时this指向的对象。如果这个函数处于非严格模式下，当thisArg指定为 null 或 undefined 时会自动替换为指向全局对象。

arg1,arg2:参数列表

1.1.2 返回值

使用调用者提供的 this 值和参数列表调用该函数的返回值。若该方法没有返回值，则返回 undefined。

注意：使用call会执行该函数，如果有返回值，则返回该值；如果没有返回值，返回Undefined

1.1.3 作用

在一个子构造函数中，可以通过调用父构造函数的 call 方法来实现继承
使用 call 方法调用匿名函数
使用 call 方法调用函数并且指定上下文的 ‘this’

1.1.4 实现原理

// 1.将call绑定到Function的原型上
Function.prototype.call = function(context) {
   
    // 2.判断this是否为函数
    if(typeof this !=='function') {
   
        throw new TypeError('not function')
    }

    // 3.改变this指向,如果有context用context,没有就是window;然后把此函数挂在context的属性下
    const context = context || window
    context.fn = this

    //4.获取参数,因为Call传递的第一个参数肯定是context, 所以把剩下的参数传给函数即可
    const args = [...arguments].slice(1)

    //5.立即执行,返回函数结果
    const res = context.fn(args