首先call、apply、bind的作用都是改变函数运行时this的指向。其次,在 ES6 的箭头函数下, call 和 apply、bind 将失效。
一、参数区别
1、call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表,当第一个参数为null、undefined的时候,默认指向window。比如:
- call中的细节
- 非严格模式
如果不传参数,或者第一个参数是
null
或nudefined
,this
都指向window
let fn = function(a,b){ console.log(this,a,b); } let obj = {name:"obj"}; fn.call(obj,1,2); // this:obj a:1 b:2 fn.call(1,2); // this:1 a:2 b:undefined fn.call(); // this:window a:undefined b:undefined fn.call(null); // this=window a=undefined b=undefined fn.call(undefined); // this=window a=undefined b=undefined
- 严格模式
第一个参数是谁,this就指向谁,包括null和undefined,如果不传参数this就是undefined
"use strict" let fn = function(a,b){ console.log(this,a,b); } let obj = {name:"obj"}; fn.call(obj,1,2); // this:obj a:1 b:2 fn.call(1,2); // this:1 a:2 b=undefined fn.call(); // this:undefined a:undefined b:undefined fn.call(null); // this:null a:undefined b:undefined fn.call(undefined); // this:undefined a:undefined b:undefined
2、apply接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组。当第一个参数为null、undefined的时候,默认指向window。比如:
- apply:和call基本上一致,唯一区别在于传参方式
apply把需要传递给fn的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给fn一个个的传递
fn.call(obj, 1, 2); fn.apply(obj, [1, 2]);
3、bind接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组,这一点与apply相同。
- bind:语法和call一模一样,区别在于立即执行还是等待执行,bind不兼容IE6~8
fn.call(obj, 1, 2); // 改变fn中的this,并且把fn立即执行 fn.bind(obj, 1, 2); // 改变fn中的this,fn并不执行
this改变为obj了,但是绑定的时候立即执行,当触发点击事件的时候执行的是fn的返回值undefined
document.onclick = fn.call(obj);
bind会把fn中的this预处理为obj,此时fn没有执行,当点击的时候才会把fn执行
document.onclick = fn.bind(obj);
二、调用区别
1、call、apply都是立即调用。bind 方法不会立即执行,而是返回一个改变了上下文 this 后的函数,便于稍后调用。而原函数 中的 this 并没有被改变,依旧指向原来该指向的地方。
面试题44:call、apply与bind的用法和区别
于 2022-06-12 21:13:52 首次发布
本文详细讲解了JavaScript中call、apply、bind方法在改变函数执行上下文(this)时的异同。在ES6箭头函数下,这三种方法失效。call和apply主要区别在于参数传递方式,call接收单独参数,apply接收参数数组。bind则返回一个预设this的新函数,不立即执行。此外,call和apply都是立即调用函数,而bind返回的函数可在之后调用。
摘要由CSDN通过智能技术生成