浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

javascript中的call(),apply(),caller(),callee()方法作用都是呼叫某個函式或方法，概念和作用容易混淆，我自己也經常分不清楚什麼時候該用哪種函式，這裡總結一下，以免忘記。

為什麼要用call()和apply()方法？

理清楚這幾種方法的區別之前，我們先想想為什麼要用call()和apply(). 比如有段這樣的函式：

function cat(){} cat.prototype={ food:”fish”, say: function(){ alert(“I love “+this.food); }//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 } var blackCat = new cat; blackCat.say();

我們有一個物件whiteDog = {food:”bone”},我們不想對它重新定義say方法,那麼我們可以通過call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

1、call()

call()標準api

fun.call(thisArg[, arg1[, arg2[, …]]]) call()作用都是改變當前作用域，即改變this的指向，將函式物件從初始的上下文改變為由thisArg指定的新物件。 thisArg：可選項，將被當做當前物件。如果沒有thisArg，那麼global物件將被用作thisArg. arg1,arg2：可選項，將被傳遞方法引數序列。

call()應用demo

demo1

<input type="text" id="idTxt" value="input text">
var value = "global var";
function mFunc(){
    this.value = "member var";
}
function gFunc(){
    alert(this.value);
}
window.gFunc();  //=>global var
gFunc.call(window);  //=>global var
gFunc.call(new mFunc()); //=>member var
gFunc.call(document.getElementById('idTxt'));  //=>input text
 

demo2

var func = new function(){
    this.a = "func";
}
var func2 = function(x){
    var a = "func2";
    alert(this.a); //=>'func'
    alert(x); //=>'func2'
}//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
func2.call(func, "func2");

這個例子中，func呼叫的作用域是func，那麼this指向func，this.a就等於func,對於第二個alert(x)，func2()的引數為func2,所以alert(x)=>’func2’ 上面兩個例子理解起來都不困難，再看下面這個例子： demo3

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];
for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

這裡面有個匿名函式，我們將給這個匿名函式加一個名字，下面這樣改一下，會看得清楚一些：

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];
for (var i = 0; i < animals.length; i++) {
  var callFunc = function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
    this.print();
  };
  callFunc.call(animals[i], i)
}

callFunc()當前作用域物件是animals[i],i是callFunc()引數，將輸出 => #0 Lion: King => #1 Whale: Fail

2、apply()

apply()方法的作用與call()作用相同，都是改變當前作用域this指向。

apply()標準api

fun.apply(thisArg, [arg1,arg2,…argN]) 從api上可以看出apply()區別於call()是第二個引數，apply()傳入的是一個數組。 使用apply的好處是可以直接將當前函式的arguments物件作為apply的第二個引數傳入，arguments是陣列。

demo

/*定義一個人類*/
function Person(name,age)
{
    this.name=name;
    this.age=age;
}
/*定義一個學生類*/
function Student(name,age,grade)
{//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
    //讓Student()方法擁有(呼叫)Person()方法的屬性
    Person.apply(this,arguments);  //=>等價於this.name = name;this.age = age;
    this.grade=grade;
}
//建立一個學生類
var student=new Student("zhangsan",21,"一年級");
//測試
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);

3、caller()

caller返回一個對函式的引用，該函式呼叫了當前函式。 對於函式來說，caller 屬性只有在函式執行時才有定義。 如果函式是由 Javascript 程式的頂層呼叫的，那麼 caller 包含的就是 null 。

demo

function callerDemo() {
    if (arguments.caller) {
        var a = callerDemo.caller.toString();
        alert(a);
    } else {
        alert("this is a top function");
    }
}
function handleCaller() {
    callerDemo();
}
handleCaller();
function calleeDemo() {
    alert(arguments.callee);
}//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
calleeDemo();

4、callee()

返回正被執行的 Function 物件，也就是所指定的 Function 物件的正文。 arguments.length是實參長度，arguments.callee.length是形參長度

demo

//callee可以列印其本身
function calleeDemo() {
    alert(arguments.callee);
}
//用於驗證引數
function calleeLengthDemo(arg1, arg2) {
    if (arguments.length == arguments.callee.length) {
        window.alert("驗證形參和實參長度正確！");
        return;
    } else {
        alert("實參長度：" + arguments.length);
        alert("形參長度： " + arguments.callee.length);
    }
}
//遞迴計算
var sum = function (n) {
    if (n < = 0)
        return 1;
    else
        return n ＋arguments.callee(n - 1)
}

結語

感謝您的觀看，如有不足之處，