介紹

• 相同點：
  都是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
*/