call(), apply(), bind()有什么区别？

介绍

• 相同点：
  都是function上的方法，都可以改变this的指向。
• 不同点：

  • call 主要接收多个散列的参数，调用后立即执行函数，得到结果

    function.call(obj, params1, params2, params3,…);
    obj： 需要改变this指向的对象
    params1, params2, params3：需要传递的参数

  • apply 接收一个数组形式的参数

    fun.apply(obj, [params1, params2, params3,…]);

  • bind 跟 call 传递参数形式是一样的，只是bind不会立即执行函数，而是返回一个新的函数再调用执行

    function.call(obj, params1, params2, params3,…);
    obj： 需要改变this指向的对象
    params1, params2, params3：需要传递的参数
    var r = function.bind(obj, params1, params2, params3, …);
    r();

call()

function aa () {
    console.log(this)
    console.log(1)
}

aa.call();

/*
执行结果：
VM2559:2 Window {0: global, 1: global, 2: global, 3: Window, 4: global, window: Window, self: Window, document: document, name: '', location: Location, …}
VM2559:3 1
*/

从上面的示例可以看出call()可以作为函数的调用，并且this是指向window对象
但是想要改变this的指向问题，怎么操作呢？请看下面的示例。

function aa () {
	// 此处想要输出猫cat的年龄age的值，但此时this是指向window对象的，所以找不到age，所以打印输出了undefined
    console.log(this.age)  // undefined
    console.log(1) // 1
}

var cat = {
    age: 2
}

aa.call()

/*
执行结果：
VM2908:2 undefined
VM2908:3 1
*/

如果要将this指向cat这个对象怎么操作，其实也是很简单的，如下：

function aa () {
    console.log(this,this.age)
    console.log(1)
}

var cat = {
    age: 2
}

aa.call(cat)
/*
执行结果：
VM3537:2 {age: 2} 2
VM3537:3 1
*/

但是想要传递一些参数，怎么处理呢？请继续往下看

function aa (data,data1) {
    console.log(this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}

var cat = {
    name: '小希',
    age: 2,
}

// 重点，call 方法可以接收多个参数
aa.call(cat, '鱼', '肉')

/*
VM4488:2 {name: '小希', age: 2}
VM4488:3 小希年龄2岁，爱吃鱼和肉
VM4488:4 1
*/

apply

apply 与 call 的使用主要体现在参数上的差别，call是依次传递各个参数，apply是传递一个数组，调用后函数会执行。

function aa (data,data1) {
    console.log(this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}

var cat = {
    name: '小希',
    age: 2,
}

// 重点，apply 接收一个数组
aa.apply(cat, ['鱼', '肉'])

/*
VM4856:2 {name: '小希', age: 2}
VM4856:3 小希年龄2岁，爱吃鱼和肉
VM4856:4 1
*/

bind

调用后不会执行函数得到一个结果，而是直接返回一个新的函数。

function aa (data,data1) {
    console.log('this::', this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}

var cat = {
    name: '小希',
    age: 2,
}

aa.bind(cat, ['鱼', '肉']);
/*
输出结果：
ƒ aa (data,data1) {
    console.log('this::', this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}
*/

测试传递多个散列参数

function aa (data,data1) {
    console.log('this::', this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}

var cat = {
    name: '小希',
    age: 2,
}

// 重点
var r = aa.bind(cat, '鱼', '肉');
r()

/*
输出结果：
VM431:2 this:: {name: '小希', age: 2}
VM431:3 小希年龄2岁，爱吃鱼和肉
VM431:4 1
*/

测试传递一个数组

function aa (data,data1) {
    console.log('this::', this)
    console.log(`${this.name}年龄${this.age}岁，爱吃${data}和${data1}`)
    console.log(1)
}

var cat = {
    name: '小希',
    age: 2,
}

// 重点
var r = aa.bind(cat, ['鱼', '肉']);
r();

/*
输出结果：
VM5716:2 this:: {name: '小希', age: 2}
VM5716:3 小希年龄2岁，爱吃鱼,肉和undefined
VM5716:4 1
*/