call/apply/bind

506 阅读2分钟

call

call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

function.call(thisArg, arg1, arg2, ...);   // call语法

举例:

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1

注意两点:

  1. call 改变了 this 的指向,指向到 foo
  2. bar 函数执行了

apply

apply() 方法调用一个函数, 其具有一个指定的this值,以及作为一个数组(或类似数组的对象)提供的参数。

function.apply(thisArg, [argsArray]);      // apply语法

bind

bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一系列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

func.bind(obj,param...)(params...)        //bind语法

bind 函数的两个特点:

  1. 返回一个函数
  2. 可以传入参数

call、apply、bind区别

1、call和apply是立即执行,bind则是返回一个绑定了this的新函数,只有你调用了这个新函数才真的调用了目标函数。

2、bind函数存在多次绑定的问题,如果多次绑定this,则以第一次为准。

3、bind函数实际上是显示绑定(call、apply)的一个变种,称为硬绑定。由于硬绑定是一种非常常用的模式,所以在 ES5 中提供了内置的方法Function.prototype.bind

参考:

详解call bind apply - 区别/使用场景/es6实现/es3实现

Call & Apply & Bind的用法、区别和实现

JS中的call、apply、bind方法详解

JavaScript深入之call和apply的模拟实现

JavaScript深入之bind的模拟实现

13期前端冲刺必备指南-this/call/apply/bind

50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】

一次性搞懂 this、call、apply 、 bind

趣谈js的call和apply两大召唤术

趣谈js的bind牌胶水

this、apply、call、bind

【进阶3-3期】深度解析 call 和 apply 原理、使用场景及实现

【进阶3-4期】深度解析bind原理、使用场景及模拟实现

【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理)

Js 实现 Bind 的这五层,你在第几层?