caller & callee 相關 （相關聯 call()、apply()、bind() 可以改變caller）

---

相關閱讀：《 在JavaScript中借用方法 》

---

caller : functionName.caller 返回調用者。

(返回一個對函數的引用，該函數調用了當前函數)

function caller() { 
    if (caller.caller) { 
        alert(caller.caller.toString()); 
    } else { 
    alert("函數直接執行"); 
    } 
} 
function handleCaller() { 
    caller(); 
} 
handleCaller(); 
caller(); 

大家會發現第一個alert會彈出調用caller函數的調用者handleCaller，而第二個alert由於沒有在其他函數體內調用,所以caller爲null,就執行了 alert(“函數直接執行”);

function callerDemo() { 
    if (callerDemo.caller) { 
        var a= callerDemo.caller.toString(); 
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 

<input type="button" οnclick="callerDemo()" value="callerDemo">
// 彈出
// function onclick() {
//    callerDemo();
// }

<input type="button" οnclick="handleCaller()" value="handleCaller">
// 彈出
// function handleCaller() {
//    callerDemo();
// }

上面的例子，可以看出，它就是返回一個調用數據的引用。(指向請求調用的函數) 也由此可以看出，當在這樣的情況下，onclick觸發事件的時候總是帶着匿名函數的。

caller的應用場景 主要用於察看函數本身被哪個函數調用。

---

callee: 返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文. callee是arguments 的一個屬性成員，它表示對函數對象本身的引用，這有利於匿名

（返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。需要注意的是callee擁有length屬性，這個在有的時候用於驗證還是比較好的）

函數的遞歸或者保證函數的封裝性。 下面一段代碼先說明callee的用法

function calleeLengthDemo(arg1, arg2) { 
    alert(arguments.callee.toString()); 
    if (arguments.length == arguments.callee.length) { 
        window.alert("驗證形參和實參長度正確！"); 
        return; 
    } else { 
        alert("實參長度：" + arguments.length); 
        alert("形參長度： " + arguments.callee.length); 
    } 
} 
calleeLengthDemo(1); 

第一個消息框彈出calleeLengthDemo函數本身,這說明callee就是函數本身對象的引用。callee還有個非常有用的應用就是用來判斷實際參數跟行參是否一致。上面的代碼第一個消息框會彈出實際參數的長度爲1，形式參數也就是函數本身的參數長度爲2.

應用場景： callee的應用場景一般用於匿名函數 大家看下下面一段代碼

var fn=function(n){ 
    if(n>0) return n+fn(n-1); 
    return 0; 
} 
alert(fn(10)) 

函數內部包含了對自身的引用，函數名僅僅是一個變量名，在函數內部調用即相當於調用
一個全局變量，不能很好的體現出是調用自身，這時使用callee會是一個比較好的方法

var fn=(function(n){ 
    if(n>0) return n+arguments.callee(n-1); 
    return 0; 
})(10); 
alert(fn) 

這樣就讓代碼更加簡練。又防止了全局變量的污染。

---

apply實現call

Function.prototype.call = function () {
    var ctx = [].shift.apply(arguments)
    return this.apply(ctx, arguments)
}

apply實現bind

Function.prototype.bind = function () {
    var ctx = [].shift.apply(arguments),
        args = [].slice.apply(arguments),
        self = this
    return function () {
        return self.apply(ctx, args.concat([].slice.apply(arguments)))
    }
}

實現函數柯里化

Function.prototype.currying = function () {
    var args = [],
        self = this
    return function () {
        if (arguments.length === 0) {
            return self.apply(this, args)
        } else {
            [].push.apply(args, arguments)
            return arguments.callee
        }
    }
}
//用法
var add = function () {
    var sum = 0
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i]
    }
    return sum
}.currying()
add(2) //並未求值
add(3, 3) //並未求值
add(4) //並未求值
console.log(add()) //12

嚴格模式不能使用arguments.callee, 稍微改一下

Function.prototype.currying = function () {
    var args = [],
        self = this
    var f = function () {
        if (arguments.length === 0) {
            return self.apply(this, args)
        } else {
            [].push.apply(args, arguments)
            return f
        }
    }
    return f
}

實現函數反柯里化

Function.prototype.uncurrying = function () {
    var self = this
    return function () {
        var obj = [].shift.apply(arguments)
        return self.apply(obj, arguments)
    }
}
// 用法
var push = Array.prototype.push.uncurrying()
var obj = {}
push(obj, '嘿')
console.log(obj) //{0: "嘿", length: 1}

另一種方法：call和apply連用實現函數反柯里化

Function.prototype.uncurrying = function () {
    var self = this
    return function () {
        return Function.prototype.call.apply(self, arguments)
        //有點繞，其實就是return self.call(args[0], args[1], args[2]...)
    }
}

爲數組添加max函數

Array.prototype.max = function () {
    return Math.max.apply(null, this)
}
console.log([1, 3, 5, 2].max()) //5

再看一個apply的應用

function adApplyDemo(x) { 
    return ("this is never-online, BlueDestiny '" + x + "' demo"); 
} 
function handleAdApplyDemo(obj, fname, before) { 
  var oldFunc = obj[fname]; 
  obj[fname] = function() { 
    return oldFunc.apply(this, before(arguments)); 
  }; 
} 
function hellowordFunc(args) { 
  args[0] = "hello " + args[0]; 
  return args; 
} 
function applyBefore() { 
    alert(adApplyDemo("world")); 
} 
function applyAfter() { 
    handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); 
    alert(adApplyDemo("world")); // Hello world! 
} 


<input type="button" οnclick="applyBefore()" value="原始的adApplyDemo('world')">
// 彈出
// this is never-online, BlueDestiny 'world' demo


<input type="button" οnclick="applyAfter()" value="應用後的adApplyDemo('world')">
// 彈出
// this is never-online, BlueDestiny 'hello world' demo

需要注意的是，要先點”原始的adApplyDemo(‘world’)”按鈕，如果先點”應用後的adApplyDemo(‘world’)”按扭，會先應用了apply方法，這樣原始的值將會被改變。或許有的朋友沒有發現有什麼特別的，我在這裏指明一下，當點擊左邊的按扭時，只有”this is never-online, BlueDestiny ‘world’ demo”， 當點擊右邊的按扭後，會現結果是”this is never-online, BlueDestiny ‘hello world’ demo”，再點點左邊的按扭，看看結果又會是什麼呢？自己試試看:D，已經改寫了函數adApplyDemo。這個例子則說明了apply的”真正”作用了。

---