apply、call和bind

標籤：mat   log   一個   ret   關係   作用   第一個   柯裡化   es5   

apply()和call()

雖然在一個獨立的函數調用中，根據是否是strict模式，this指向undefined或window，不過，我們還是可以控制this的指向的！
要指定函數的this指向哪個對象，可以用函數本身的apply方法，它接收兩個參數，第一個參數時在其中運行函數的範圍，第二個參數是Array的執行個體，也可以是arguments對象。

另一個與apply()類似的方法是call()，唯一區別是：apply()把參數打包成Array再傳入，call()把參數按順序傳入。比如調用Math.max(3, 5, 4)，分別用apply()和call()實現如下：Math.max.apply(null, [3, 5, 4]); Math.max.call(null, 3, 5, 4); 對普通函數調用，我們通常把this綁定為null。

function sum(num1, num2){     return num1 + num2;}function callSum(num1, num2){     return sum.call(this, num1, num2);}function callSum1(num1, num2){     return sum.apply(this, arguments);}function callSum2(num1, num2){      return sum.apply(this, [num1, num2]);}console.log(callSum(10,10));   //20console.log(callSum1(10,10));//20console.log(callSum2(10,10));//20

apply和call常被用來擴充函數賴以啟動並執行範圍。

window.color = ‘red‘;var o = {color:‘blue‘};function sayColor(){    console.log(this.color);}sayColor();            //redsayColor.call(this);   //redsayColor.call(window); //redsayColor.call(o);      //blue

在上面的例子中，定義了一個全域函數sayColor,在全域範圍中調用時，對this.color的求值會轉換成對window.color的求值，sayColor.call(this)和sayColor.call(window)是兩種顯示地在全域範圍中調用函數的方式，結果都會顯示"red"，但是當運行sayColor.call(o)時，函數的執行環境就不一樣了，此時函數內的this對象指向了o,於是結果顯示"blue"。

使用call()和apply()來擴充範圍的最大好處就是對象不需要與方法有任何耦合關係。

function getAge(){var y = new Date().getFullYear();    return y - this.birth;}var xiaoming = {    name: ‘小明‘,    birth: 1990,    age: getAge};console.log(xiaoming.age());    //27console.log(getAge.apply(xiaoming,[]));   //27

bind()

bind()是ES5新增的方法，這個方法的主要作用就是將函數綁定到某個對象
　　當在函數f()上調用bind()方法並傳入一個對象o作為參數，這個方法將返回一個新的函數。以函數調用的方式調用新的函數將會把原始的函數f()當做o的方法來調用，傳入新函數的任何實參都將傳入原始函數。

function f(y){    return this.x + y; //這個是待綁定的函數}var o = {x:1};//將要綁定的對象var g = f.bind(o); //在函數f()上調用bind()方法並傳入一個對象o作為參數,得到一個新的函數gg(2);//3 

上面的代碼就是把原始的函數f()當做o的方法來調用 ，傳入實參都將傳入原始函數。

var o={    x:1    f:function(y){        return this.x + y;   //y=2    }}

bind()方法不僅是將函數綁定到一個對象，它還附帶一些其他應用：除了第一個實參之外，傳入bind()的實參也會綁定到this，這個附帶的應用是一種常見的函數式編程技術，有時也被稱為‘柯裡化‘(currying)。

var sum = function(x,y){    return x+y;}var succ = sum.bind(null,1); //在函數sum上調用bind()方法並傳入一個對象window，得到新的函數succ，並且還到了一個實參到該對象中succ(2); //3，x綁定到1，並傳入2作為實參yfunction f(y,z){    return this.x + y + z; //this指向當前調用的對象或Window}var g = f.bind({x:1},2);g(3); //6，this.x綁定到1，y綁定到2，z綁定到3

 

apply、call和bind