>[success] # call、apply 的指向 [參考文章](http://www.hmoore.net/cyyspring/html_js_cs/725531) ~~~ 1.call、apply 和 bind 是掛在 Function 對象上的三個方法，調用這三個方法的必須是一個函數， 三者區別bind 雖然改變了 func 的 this 指向，但不馬上執行，'call、apply'是在改變了函數的 this 指向 之后立馬執行 func.call(thisArg, param1, param2, ...) func.apply(thisArg, [param1,param2,...]) func.bind(thisArg, param1, param2, ...) 如果是非嚴格模式'thisArg 為null/undefined' 指向是window,基本類型指向其包裝對象，嚴格模式'null/undefined' 指向是`undefined`，基本類型為本身 2.使用它們僅僅是改變this這么簡單么？現在來想舉個例子忽然你只是一下想玩游戲機了，但是你沒有，你去 借了一臺玩完了 換了回去，首先游戲機你是臨時想玩，如果去買一個以后大概率吃灰了，借一下你卻體驗了 游戲的感覺還沒有花錢，這個白嫖的過程帶入'call' 'apply' 'bind' 來看，有些方法我對象沒有但是我只是忽然間 用一下我向你白嫖一下'既達到了目的，又節省重復定義，節約內存空間' ~~~ >[danger] ##### 舉個例子 ~~~ 1. b 沒有getName 但我就偶爾用那么一下，我去問a借一下 ~~~ ~~~ let a = { name: 'jack', getName: function(msg) { return msg + this.name; } } let b = { name: 'lily' } console.log(a.getName('hello~')); // hello~jack console.log(a.getName.call(b, 'hi~')); // hi~lily console.log(a.getName.apply(b, ['hi~'])) // hi~lily let name = a.getName.bind(b, 'hello~'); console.log(name()); // hello~lily ~~~ >[danger] ##### 有意思的案例 ~~~ document.getElementById('div1').onclick = function () { alert(this.id) // 如果不用call 等改變this 指向，此時的this指向的是windows // 因為屬于函數的調用 const func = function () { alert(this.id) } func().call(this) } ~~~ ~~~ // max 不能接受數組 但可以用apply 來變相實現 Math.max.apply(null,[1,2,3]) // es6 中可以直接用展開語法 Math.max(...[1,1,3]) ~~~ >[danger] ##### 數組指向 ~~~ 1.下面案例可以發現'arguments '雖然看似像數組，但是卻不是數組，因此 就沒有數組的方法，為了讓'arguments' 具有數組這類方法可以使用call、apply ~~~ * 沒有使用打印 false ~~~ function test(a, b) { console.log(arguments instanceof Array) // false } test(1,2) ~~~ * 使用 ~~~ function test(a, b) { // 下面也可以寫成[].slice.call(argments) let argumentsSlice = Array.prototype.slice.call(arguments) console.log(argumentsSlice) // 1 } test(1,2) ~~~ * 什么樣的可以使用數組指向 ~~~ 1.首先對象本身是有存取屬性的 2.對象的length 屬性是可以讀取的 3.key 要是數字 ~~~ * 根據上面兩條 下面案例 ~~~ const test = { 0:1, length:3, } console.log([].slice.call(test)) // 1 ~~~ >[danger] ##### es6 利用Array.of 方法 ~~~ function test() { const a = Array.of.apply(null,arguments) } test(1,2,3) ~~~ >[danger] ##### 實現call 和 apply ~~~ 1.首先call 和 apply 只有方法才能調用，因此需要讓每個方法都要具備這兩個功能 2.指向對象 要有借這個動作，并且借完之后就銷毀（理解成游戲機還回去了） ~~~ ~~~ Function.prototype.newCall = function(context,...args){ // this 誰調用指向誰，此時是function context.fn = this var context = context || window; // 我要借你的function 方法，這里fn 不是固定的 // 相當于context 對象 借了一個叫fn 先存起來 context.fn = this; // 我使用一下 到了我玩一下這個 你也可以直接context.fn(...args) 使用 var result = eval('context.fn(...args)'); // 用完了還給你 delete context.fn return result; } // apply 同理 Function.prototype.newApply = function (context, args) { let context = context || window; context.fn = this; let result = eval('context.fn(...args)'); delete context.fn return result; } ~~~ >[danger] ##### 實現一個bind ~~~ 1.call 和 apply 與bind 的區別是前者立即執行，后者是返回函數，但是二者本質都是改變 this指向，這其實利用閉包思考，我返回的一個函數但是函數內部通過call 執行 function bind(context, ...params) { let self = this; return function proxy(...args) { params = params.concat(args); return self.call(context, ...params); }; }; ~~~ * 更更多情況思考案例 ~~~ Function.prototype.newBind = function (context, ...args) { if (typeof this !== "function") { throw new Error("this must be a function"); } var self = this; // 本質上來思考 bind是和 apply 和 call 很類似，區別是bind返回的是function // apply 和 call 是直接執行 因此本質上借用bind借用apply但是包裹在function // 中不讓其執行并且返回function var fbound = function () { self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments))); } if(this.prototype) { fbound.prototype = Object.create(this.prototype); } return fbound; } ~~~