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

简介:

三者的作用: call, apply, bind 三者都是用于改变this的指向,且都是作用在函数上面;

call 和 apply: 改变this 的指向之后会立即执行,区别在于传参的方式不同,call (被指向者,参数1,参数2,...),call的参数已散列的形式传入; apply(被指向者, [ 参数1,参数2,...]), apply 的参数只有两个,一个是需要被指向的对象,另外一个是由参数组成的数组.

bind: 改变this的指向之后不会立即执行, 需要再次调用才会执行, 且使用bind改变this的指向之后, 无法再次使用call,apply,bind 改变this的指向;

• call 和apply 的用法,  如果被调用的函数无需传入参数, 只用来改变this指向,call和apply用法相同

var name = '张三'
function fn(value,value2) {
  console.log(this.name,value,value2);
}
var item = {
  name: '李四',
  age: 15,
  action: fn
}
// fn()   // 张三

fn.call(item)  // 李四 undefined undefined
fn.apply(item)   // 李四 undefined undefined 

fn.call(item,'男','22岁')  // 李四 男 22岁
fn.apply(item,['男','22岁'])  //李四 男 22岁

• bind

var name = '张三'

var item = {
  name: '李四',
  age: 15,
  action: fn
}

function fn() {
  console.log('name',this.name);
  console.log('参数', ...arguments);
}
fn.bind(item,1,2,3,4)    //返回的是一个函数
var bindFn = fn.bind(item,1,2,3,4)() 
bindFn()   //name 李四  参数  1 2 3 4

//再次调用apply, bind, call都不会生效
//注意:这里的不会生效指的是bindFn,如果对fn进行操作还是会改变的;
bindFn.apply(window) //name 李四  参数  1 2 3 4   
bindFn.call(window) //name 李四  参数  1 2 3 4