深入淺出妙用 Javascript 中 apply、call、bind

標籤：font   不同   inf   方式   object   yellow   分析   ons   先來   

原文地址：深入淺出妙用 Javascript 中 apply、call、bind

apply、call

在 javascript 中，call 和 apply 都是為了改變某個函數運行時的上下文（context）而存在的，換句話說，就是為了改變函數體內部 this 的指向。

JavaScript 的一大特點是，函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念。

先來一個栗子：
eg1:

function fruits() {}fruits.prototype = {color: "red",say: function() {console.log("My color is " + this.color);}}var apple = new fruits;banana = {color: "yellow"}apple.say.call(banana); //My color is yellowapple.say.apply(banana); //My color is yellow

但是如果我們有一個對象banana= {color : "yellow"} ,我們不想對它重新定義 say 方法，那麼我們可以通過 call 或 apply 用 apple 的 say 方法。

所以，可以看出 call 和 apply 是為了動態改變 this 而出現的，當一個 object 沒有某個方法（本栗子中banana沒有say方法），但是其他的有（本栗子中apple有say方法），我們可以藉助call或apply用其它對象的方法來操作。


 apply、call 的區別

對於 apply、call 二者而言，作用完全一樣，只是接受參數的方式不太一樣。例如，有一個函數定義如下：

var func = function(arg1, arg2) {};

就可以通過如下方式來調用：

func.call(this, arg1, arg2);func.apply(this, [arg1, arg2])

其中 this 是你想指定的上下文，他可以是任何一個 JavaScript 對象(JavaScript 中一切皆對象)，call 需要把參數按順序傳遞進去，而 apply 則是把參數放在數組裡。　　

JavaScript 中，某個函數的參數數量是不固定的，因此要說適用條件的話，當你的參數是明確知道數量時用 call 。

而不確定的時候用 apply，然後把參數 push 進數組傳遞進去。當參數數量不確定時，函數內部也可以通過 arguments 這個數組來遍曆所有的參數。

拜讀此文後，思索：

問題1：

eg2:

var numbers = [5, 458 , 120 , -215 ];Math.max.apply(numbers);-Infinity

給numbers綁定Math.max為什麼不行？

而此方式卻可以：

eg3:

var numbers = [5, 458 , 120 , -215 ];var maxInNumbers = Math.max.apply(Math, numbers); //458

分析：
當任意聲明一個Null 物件：

eg4:

var numbers = [5, 458 , 120 , -215 ];var obj = {};Math.max.apply(obj,numbers); //458

所以，可以看出:Math.max方法是需要傳參，而需要進行比較的數組numbers不是作為this指向的對象obj，而是作為比較的參數傳入。與eg1中不同的是，是否需要參數。

問題2：

對象方法繼承的有效期間多久？是繼承後一直擁有嗎？還是只存在call ，apply方法運行時？

eg5:

function fruits() {}fruits.prototype = {color: "red",say: function() {console.log("My color is " + this.color);}}var apple = new fruits;banana = {color: "yellow"}apple.say.call(banana); //My color is yellowconsole.log(banana);//Object{color: "yellow",__proto__: Object}

分析：
banana沒有say方法。所以，利用call ，apply方法繼承後是有期限的，只是在函數「運行時上下文」有效。

深入淺出妙用 Javascript 中 apply、call、bind