call、apply、bind三者的用法和区别

本文详细介绍了JavaScript中call、apply和bind三种改变this指向的方法。call方法允许指定函数执行时的上下文(this值)并直接传递参数;apply与call类似,区别在于参数是以数组形式传递;bind则返回一个新的函数,保留原函数的上下文,但参数可以在后续调用时设置。
摘要由CSDN通过智能技术生成

call、apply、bind都是改变this指向的方法

fn.call

当前实例(函数fn)通过原型链的查找机制,找到function.prototype上的call方法,function
call(){[native code]}

fn.call()

把找到的call方法执行 当call方法执行的时候,内部处理了一些事情
1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参
2.把call方法第二个及之后的实参获取到
3.把要操作的函数执行,并且把第二个以后传递进来的实参传递给函数

call中的细节

1.非严格模式

如果不传参数,或者第一个参数是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

2.严格模式

第一个参数是谁,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

apply:和call基本上一致,唯一区别在于传参方式

apply把需要传递给fn的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给fn一个个的传递

fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);

3. bind

bind:语法和call一模一样,区别在于立即执行还是等待执行,bind不兼容IE6~8

fn.call(obj, 1, 2); // 改变fn中的this,并且把fn立即执行
fn.bind(obj, 1, 2); // 改变fn中的this,fn并不执行

bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。
当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。
一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

小结

call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面
apply的所有参数都必须放在一个数组里面传进去
bind除了返回是函数以外,它 的参数和call 一样(需要用小括号调用函数)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值