Function.prototype.call(thisArg [, arg1, arg2, …])

call() 簡(jiǎn)述

• call() 方法 調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的 this 值和分別地提供的參數(shù)(參數(shù)的列表)。
• 當(dāng)?shù)谝粋€(gè)參數(shù)為 null、undefined 的時(shí)候， 默認(rèn) this 上下文指向window。

call() 簡(jiǎn)單實(shí)例

const name = 'qianyin';
const product = {name: 'linheng',
};function log(...args){console.log(this.name, ...args);
}log(1, 2, 3);               // qianyin 1 2 3
log.call(null, 1, 2, 3);    // qianyin 1 2 3
log.call(product, 1, 2, 3); // linheng 1 2 3

call() 對(duì)箭頭函數(shù)無(wú)效

const name = 'qianyin';
const product = {name: 'linheng',
};const log = (...args) => {console.log(this.name, ...args);
}log(1, 2, 3);               // qianyin 1 2 3
log.call(null, 1, 2, 3);    // qianyin 1 2 3
log.call(product, 1, 2, 3); // qianyin 1 2 3

補(bǔ)充：

• 箭頭函數(shù)作為函數(shù)的一種形式, 對(duì)于this的處理和普通函數(shù)有所區(qū)別, 其沒(méi)有自己的 this 上下文,也就是說(shuō)通過(guò) bind/call/apply 函數(shù)方法設(shè)置 this 值時(shí)無(wú)效的，會(huì)被忽略;

• 因?yàn)榧^函數(shù)沒(méi)有自己的 this 上下文， 所以箭頭函數(shù)的 this 上下文等于定義函數(shù)處的this上下文，也就是最近的一個(gè) this 上下文；

• 你可以認(rèn)為箭頭函數(shù)的 this 和調(diào)用者無(wú)關(guān)，只和其定義時(shí)所在的 this 上下文相關(guān);

• 如下代碼： 在對(duì)象 obj 中使用箭頭函數(shù)定義 log 函數(shù)， 那么因?yàn)榧^函數(shù)沒(méi)有自己的 this 上下文， 所以 log 函數(shù)的 this 上下文等于定義箭頭函數(shù)處的 this 上下文, 等于 對(duì)象 obj 所處的 this 上下文（window）

const name = 'linheng';
const obj = {name: 'qianyin',log: () => {console.log(this.name);}
};
obj.log();  // linheng

• 那么如果我一定要在 obj 中定義一個(gè) log 函數(shù)并且使得 this 指向?qū)ο?obj 呢？
• 方法一： 使用 function 定義函數(shù)

const name = 'linheng';
const obj = {name: 'qianyin',log: function(){console.log(this.name);}
};
obj.log();  // qianyin

• 方法二： 多此一舉, 在函數(shù) log 中聲明箭頭函數(shù)并調(diào)用， 那么箭頭函數(shù)的 this 上下文等于定義箭頭函數(shù)處的 this 上下文， 等于 log 函數(shù)的上下文（對(duì)象 obj ）

const name = 'linheng';
const obj = {name: 'qianyin',log: function(){(() => {console.log(this.name);})();},
};
obj.log();  // qianyin

Function.prototype.apply(thisArg [, Array])

Apply() 簡(jiǎn)述

• apply() 方法 調(diào)用 一個(gè)具有給定 this 值的函數(shù)，以及作為一個(gè) 數(shù)組（或類(lèi)似數(shù)組對(duì)象） 提供的參數(shù)
• call() 方法的作用和 apply() 方法類(lèi)似，區(qū)別就是除第一參數(shù) call() 方法接受的是 參數(shù)列表 ，而apply()方法接受的是一個(gè)參數(shù) 數(shù)組(或類(lèi)數(shù)組)。

Apply() 簡(jiǎn)單實(shí)例

const name = 'qianyin';
const product = {name: 'linheng',
};function log(...args){console.log(this.name, ...args);
}log([1, 2, 3]);                 // qianyin [1 2 3]
log.apply(null, [1, 2, 3]);     // qianyin 1 2 3
log.apply(product, [1, 2, 3]);  // linheng 1 2 3

Apply() 對(duì)箭頭函數(shù)無(wú)效

const name = 'qianyin';
const product = {name: 'linheng',
};const log = (...args) => {console.log(this.name, ...args);
}log([1, 2, 3]);                 // qianyin [1 2 3]
log.apply(null, [1, 2, 3]);     // qianyin 1 2 3
log.apply(product, [1, 2, 3]);  // qianyin 1 2 3

Function.prototype.bind(thisArg [, arg1, arg2, …])

bind() 簡(jiǎn)述

• bind() 方法 創(chuàng)建(拷貝)一個(gè)新的函數(shù) ， 當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí) this 指向 thisArg，其 參數(shù)列表前幾項(xiàng)值 為創(chuàng)建時(shí)指定的 參數(shù)序列。
• thisArg: 綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的 this 指向。當(dāng)使用 new 操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。

bind() 綁定 this 上下文

• bind() 最簡(jiǎn)單的用法是創(chuàng)建一個(gè)函數(shù)，使這個(gè)函數(shù)不論怎么調(diào)用都有同樣的 this 上下文。
• JavaScript 新手經(jīng)常犯的一個(gè)錯(cuò)誤是將一個(gè)方法從對(duì)象中拿出來(lái)，然后再調(diào)用，卻又希望方法中的 this 是原來(lái)的對(duì)象（比如在回調(diào)中傳入這個(gè)方法）。
• 如果不做特殊處理的話，一般會(huì)丟失原來(lái)的對(duì)象。從原來(lái)的函數(shù)和原來(lái)的對(duì)象創(chuàng)建一個(gè)綁定函數(shù)，則能很漂亮地解決這個(gè)問(wèn)題：
• 如果只是單純綁定 this 上下文， 完全可以使用箭頭函數(shù)進(jìn)行替代

// 例一
this.x = 9;var module = {x: 81,getX: function() { return this.x; }
};
module.getX();  // 返回 81 （通過(guò)對(duì)象調(diào)用函數(shù)， 上下文為該對(duì)象）
var retrieveX = module.getX;  // 獲取對(duì)象中函數(shù)的引用地址
retrieveX();    // 返回 9, 在這種情況下， "this" 指向全局作用域（在全局對(duì)象下調(diào)用函數(shù)）
// 永久為函數(shù) boundGetX 綁定 this 上下文
var boundGetX = retrieveX.bind(module);
boundGetX();   // 返回 81 （函數(shù) this 上下文永久綁定為 module）

// 例二為回調(diào)函數(shù)綁定 this 上下文
var x = 10;
var obj = {x: 20,get: ffunction(){console.log(this.x);}
};
// 將對(duì)象中方法取出（函數(shù)的引用地址），作為回調(diào)函數(shù)， 又因?yàn)?setTimeout 回調(diào)函數(shù)執(zhí)行的上下文是 window
setTimeout(obj.get, 1000);            // 打印 10
// 將對(duì)象中方法取出（函數(shù)的引用地址），作為回調(diào)函數(shù)并綁定 this 上下文
setTimeout(obj.get.bind(obj), 1000);  // 打印 20

為函數(shù)永久綁定固定參數(shù)

• bind() 的另一個(gè)最簡(jiǎn)單的用法是使一個(gè)函數(shù) 擁有預(yù)設(shè)的初始參數(shù) 。
• 這些參數(shù)（如果有的話）作為bind()的第二個(gè)參數(shù)跟在 this（或其他對(duì)象）后面。
• 之后它們會(huì) 被插入到目標(biāo)函數(shù)的參數(shù)列表的開(kāi)始位置 ，傳遞給綁定函數(shù)的參數(shù)會(huì)跟在它們的后面。

function list() {return Array.prototype.slice.call(arguments);
}var list1 = list(1, 2, 3); // [1, 2, 3]// 為拷貝 list 方法并綁定初始參數(shù)
var leadingThirtysevenList = list.bind(undefined, 37);var list2 = leadingThirtysevenList();         // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

總結(jié)

• 當(dāng)我們使用一個(gè)函數(shù)需要改變 this 指向的時(shí)候才會(huì)用到 call() apply() bind() 當(dāng)然也別忘記了箭頭函數(shù)
• call() 和 apply() 是對(duì)函數(shù)的調(diào)用，在調(diào)用的同時(shí)綁定 this 上下文并傳遞參數(shù)列表
• bind() 是對(duì)函數(shù)的拷貝進(jìn)一步的封裝， 為函數(shù)永久綁定 this 上下文并賦予固定參數(shù)
• call() 和 bind() 以參數(shù)列表形式給函數(shù)指定參數(shù)， apply() 則以數(shù)組的形式給函數(shù)指定參數(shù)

apply call bind 的一些運(yùn)用

類(lèi)數(shù)組轉(zhuǎn)為數(shù)組

• 方法一：

  const obj = {0: 'q', 1: 'i', 2: 'q', 3: 'a',  4:'n', 5: 'y', 6:'i', 7:'n', length: 8};const arr = [];Array.prototype.push.apply(arr, obj);console.log(arr); // ["q", "i", "q", "a", "n", "y", "i", "n"]

• 方法二：

  const obj = {0: 'q', 1: 'i', length: 2};const arr = Array.prototype.slice.call(obj);  // [q, i]

為偽數(shù)組添加新的元素

• 方法一: 當(dāng)然你也可以使用 apply

  const obj = {0: 'q', length: 1};Array.prototype.push.call(obj, 'i', 'a', 'n');console.log(obj);   // {0: 'q', 1: 'i', 2: 'a', 3: 'n'}

• 方法二：

  const obj = {0: 'q', length: 1};const push = Array.prototype.push.bind(obj);push('i', 'a', 'n');console.log(obj);   // {0: 'q', 1: 'i', 2: 'a', 3: 'n'}

求數(shù)組中最大值(最小值一樣做法)

const arr = [1,2,3,4,5,6];
const max = Math.max.apply(null, arr);
// 或 const max = Math.max.call(null, ...arr)
console.log(max);    // 6

數(shù)組合并追加

const arr = [1, 2];
const brr = [3, 4];
Array.prototype.push.apply(arr, brr);
// 或者 Array.prototype.push.call(arr, ...brr);
// 當(dāng)然還可以這樣 arr.push(...brr);
console.log(arr);

使用 log 代理 console.log

function log(...args){// 在可以通過(guò)配置， 或者判斷當(dāng)前開(kāi)發(fā)環(huán)境來(lái)控制是否需要在控制臺(tái)打印輸出if(true){console.log.apply(console, args);}
}

---