call、apply、bind使用与区别

1.call、apply、bind都是function.prototype的方法,所以每个函数都有call、apply、bind属性。

call

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

[thisArg] 必选的,在 function 函数运行时使用的 this 值, 指定为 null 或 undefined 时会自动替换为指向全局对象
[arg1, arg2, ...] 参数列表


let objCall ={
    name: "我是 Call"
}


function fn() {
    console.log('参数 => ', ...arguments)
    console.log('name => ', this.name)
}

fn.call(objCall, 1,2,3)

// 参数 =>  1 2 3
// name =>  我是Call

apply 

func.apply(thisArg, [argsArray])

  • [thisArg] 必选的 同 call 一样
  • [argsArray] 可选的

let objApply ={
    name: "我是 Apply"
}
function fn() {
    console.log('参数 => ', ...arguments)
    console.log('name => ', this.name)
}
fn.apply(objApply, [1,2,3])
// 参数 =>  1 2 3
// name =>  我是 Apply

bind 

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

[thisArg] 必选的
[arg1, arg2, ...] 参数列表

let objBind ={
    name: "我是 Bind"
}
let objApply ={
    name: "我是 Apply"
}

function fn() {
    console.log('参数 => ', ...arguments)
    console.log('name => ', this.name)
}
let bfn = fn.bind(objBind, 1,2,3);
bfn();

bfn.call(objCall)
bfn.apply(objApply)

// 三个结果一样
// 参数 =>  1 2 3
// name =>  我是 Bind

2.call、apply、bind的作用都可改变函数内部的this指向

总结:

1)call、apply和bind都可以改变函数的this指向

2)call、apply和bind第一个参数的是this要指向的对象

3)call、apply和bind都可以后续为函数传参,apply是将参数并成一个数组,call和bind是将参数依次列出。

4)call、apply都是直接调用,bind生成的this指向改变函数需要手动调用

猜你喜欢

转载自blog.csdn.net/weixin_50543490/article/details/127992959