js，call、apply、bind的区别及注意事项

这三个方法基本不常用，心血来潮记录一下

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

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

1.修改this的区别

• call、apply、bind都可以修改this指向
• call、apply修改this指向时会自动调用该方法
• bind会返回一个新的方法，需要调用新方法才会执行

修改this及调用demo

 const one = {
   name: 'one',
   execNameFn(a, b) {
   console.log(this.name, a, b);
   }
}

 const two = {
    name: 'two'
}

// 修改 execNameFn调用时this的指向

one.execNameFn.call(two)
// 打印结果 two undefined undefined

one.execNameFn.apply(two)
// 打印结果 two undefined undefined

// 不会立即执行
const newFn = one.execNameFn.bind(two)
// 打印结果 undefined
newFn()
// 打印结果 two undefined undefined

2.传参的区别

• call传递参数时直接写在第一个参数后面(第一个参数是当前指向的对象)，用逗号隔开
• apply传递参数是以数组格式写在第一个参数后面(第一个参数是当前指向的对象)
• (注意)bind传递参数可以在还没创建出新函数时传递，也可以在新函数传递参数，在指向当前实例后面传递的参数优先级高，后面新创建的函数参数不能覆盖，详情看demo

const one = {
   name: 'one',
   execNameFn(a, b) {
   console.log(this.name, a, b);
   }
}

 const two = {
    name: 'two'
}

one.execNameFn.call(two,1,2)
// 返回值 two 1 2

// 使用数组传参
one.execNameFn.apply(two,[1,2])
// 返回值 two 1 2


// * 两种方式，第二种不能覆盖第一种
// 第一种
const newFn = one.execNameFn.bind(two,1,2)
// 执行
newFn() 
// 返回值 two 1 2

// 第二种
newFn(2,3)
// 返回值 two 1 2

// 通过返回的函数传递 入参
const newFn = one.execNameFn.bind(two)
newFn(1,2)
// 返回值 two 1 2