通過(guò)call和apply的模擬實(shí)現(xiàn)港粱，帶你揭開(kāi)call和apply改變this的真相
call
一句話介紹 call：
call() 方法在使用一個(gè)指定的 this 值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或方法隧枫。
舉個(gè)例子：
var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1
注意兩點(diǎn)：
call 改變了 this 的指向，指向到 foo
bar 函數(shù)執(zhí)行了
模擬實(shí)現(xiàn)第一步
那么我們?cè)撛趺茨M實(shí)現(xiàn)這兩個(gè)效果呢？
試想當(dāng)調(diào)用 call 的時(shí)候，把 foo 對(duì)象改造成如下：
var foo = { value: 1, bar: function() { console.log(this.value) }};foo.bar(); // 1
這個(gè)時(shí)候 this 就指向了 foo，是不是很簡(jiǎn)單呢？
但是這樣卻給 foo 對(duì)象本身添加了一個(gè)屬性夫凸，這可不行吶！
不過(guò)也不用擔(dān)心阱持，我們用 delete 再刪除它不就好了~
所以我們模擬的步驟可以分為：
將函數(shù)設(shè)為對(duì)象的屬性
執(zhí)行該函數(shù)
刪除該函數(shù)
以上個(gè)例子為例夭拌，就是：
// 第一步foo.fn = bar// 第二步foo.fn()// 第三步delete foo.fn
fn 是對(duì)象的屬性名，反正最后也要?jiǎng)h除它，所以起成什么都無(wú)所謂啼止。
根據(jù)這個(gè)思路道逗，我們可以嘗試著去寫第一版的 call2 函數(shù)：
// 第一版Function.prototype.call2 = function(context) { // 首先要獲取調(diào)用call的函數(shù)，用this可以獲取 context.fn = this; context.fn(); delete context.fn;}// 測(cè)試一下var foo = { value: 1};function bar() { console.log(this.value);}bar.call2(foo); // 1
正好可以打印 1 哎献烦！是不是很開(kāi)心滓窍！(～￣▽￣)～
模擬實(shí)現(xiàn)第二步
最一開(kāi)始也講了，call 函數(shù)還能給定參數(shù)執(zhí)行函數(shù)巩那。舉個(gè)例子：
var foo = { value: 1};function bar(name, age) { console.log(name) console.log(age) console.log(this.value);}bar.call(foo, 'kevin', 18);// kevin// 18// 1
注意：傳入的參數(shù)并不確定吏夯，這可咋辦？
不急即横，我們可以從 Arguments 對(duì)象中取值噪生，取出第二個(gè)到最后一個(gè)參數(shù)，然后放到一個(gè)數(shù)組里东囚。
比如這樣：
// 以上個(gè)例子為例跺嗽，此時(shí)的arguments為：// arguments = {// 0: foo,// 1: 'kevin',// 2: 18,// length: 3// }// 因?yàn)閍rguments是類數(shù)組對(duì)象，所以可以用for循環(huán)var args = [];for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']');}// 執(zhí)行后 args為 [foo, 'kevin', 18]
不定長(zhǎng)的參數(shù)問(wèn)題解決了页藻，我們接著要把這個(gè)參數(shù)數(shù)組放到要執(zhí)行的函數(shù)的參數(shù)里面去桨嫁。
// 將數(shù)組里的元素作為多個(gè)參數(shù)放進(jìn)函數(shù)的形參里context.fn(args.join(','))// (O_o)??// 這個(gè)方法肯定是不行的啦！７菡省璃吧！
也許有人想到用 ES6 的方法，不過(guò) call 是 ES3 的方法废境，我們?yōu)榱四M實(shí)現(xiàn)一個(gè) ES3 的方法畜挨，要用到ES6的方法，好像……噩凹，嗯巴元，也可以啦。但是我們這次用 eval 方法拼成一個(gè)函數(shù)驮宴，類似于這樣：
eval('context.fn(' + args +')')
這里 args 會(huì)自動(dòng)調(diào)用 Array.toString() 這個(gè)方法逮刨。
所以我們的第二版克服了兩個(gè)大問(wèn)題，代碼如下：
// 第二版Function.prototype.call2 = function(context) { context.fn = this; var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); } eval('context.fn(' + args +')'); delete context.fn;}// 測(cè)試一下var foo = { value: 1};function bar(name, age) { console.log(name) console.log(age) console.log(this.value);}bar.call2(foo, 'kevin', 18); // kevin// 18// 1
(??????)??
模擬實(shí)現(xiàn)第三步
模擬代碼已經(jīng)完成 80%幻赚，還有兩個(gè)小點(diǎn)要注意：
1.this 參數(shù)可以傳 null禀忆，當(dāng)為 null 的時(shí)候臊旭，視為指向 window
舉個(gè)例子：
var value = 1;function bar() { console.log(this.value);}bar.call(null); // 1
雖然這個(gè)例子本身不使用 call落恼，結(jié)果依然一樣。
2.函數(shù)是可以有返回值的离熏！
舉個(gè)例子：
var obj = { value: 1}function bar(name, age) { return { value: this.value, name: name, age: age }}console.log(bar.call(obj, 'kevin', 18));// Object {// value: 1,// name: 'kevin',// age: 18// }
不過(guò)都很好解決佳谦，讓我們直接看第三版也就是最后一版的代碼：
// 第三版Function.prototype.call2 = function (context) { var context = context || window; context.fn = this; var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); } var result = eval('context.fn(' + args +')'); delete context.fn return result;}// 測(cè)試一下var value = 2;var obj = { value: 1}function bar(name, age) { console.log(this.value); return { value: this.value, name: name, age: age }}bar.call(null); // 2console.log(bar.call2(obj, 'kevin', 18));// 1// Object {// value: 1,// name: 'kevin',// age: 18// }
到此，我們完成了 call 的模擬實(shí)現(xiàn)滋戳，給自己一個(gè)贊 ｂ（￣▽￣）ｄ
apply的模擬實(shí)現(xiàn)
apply 的實(shí)現(xiàn)跟 call 類似钻蔑，在這里直接給代碼啥刻，代碼來(lái)自于知乎 @鄭航的實(shí)現(xiàn)：
Function.prototype.apply = function (context, arr) { var context = Object(context) || window; context.fn = this; var result; if (!arr) { result = context.fn(); } else { var args = []; for (var i = 0, len = arr.length; i < len; i++) { args.push('arr[' + i + ']'); } result = eval('context.fn(' + args + ')') } delete context.fn return result;}
深入系列
JavaScript深入系列目錄地址：https://github.com/mqyqingfeng/Blog。
JavaScript深入系列預(yù)計(jì)寫十五篇左右咪笑，旨在幫大家捋順JavaScript底層知識(shí)可帽，重點(diǎn)講解如原型、作用域窗怒、執(zhí)行上下文映跟、變量對(duì)象、this扬虚、閉包努隙、按值傳遞、call辜昵、apply荸镊、bind、new堪置、繼承等難點(diǎn)概念躬存。
如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正晋柱，十分感謝优构。如果喜歡或者有所啟發(fā)，歡迎star雁竞，對(duì)作者也是一種鼓勵(lì)钦椭。
