首頁 > web前端 > js教程 > js中的call()和apply()的理解

js中的call()和apply()的理解

一个新手
發布: 2017-10-26 10:14:20
原創
2007 人瀏覽過

  在學習javascript的時候,對於call()和apply()的用法總是難以理解,相信很多小夥伴和我又一樣的想法。現在和小夥伴們分享一下。

call

語法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])  
定義:呼叫一個物件的一個方法,以另一個物件取代目前物件。

看完語法和定義還是難以理解,call函數可以接受若干個參數,其中第一個參數為當前操作的對象,後面幾個參數為調用的方法的參數,這麼說還是難以理解,直接上程式碼:

function Teacher(name, age) {  //定义一个构造函数Teacher
    this.name = name;
    this.age = age;
    this.intro = function() {
        alert("My name is " + this.name + "," + "I'm " + this.age)
    }
}

function Student(name, age) {  //定义一个构造函数Student
    Teacher.call(this, name, age);  //Student调用了Teacher的方法
}
var studentA = new Student("Lily", 19); //实例化一个studentA,传入参数
studentA.intro(); //调用studentA的intro方法 输出:My name is Lily,I'm 19
登入後複製

  上例中,studentA是透過建構函式Student實例化的,本來應該繼承Student建構函式的所有可繼承方法,但我們看到Student函式並沒有任何方法,但是Student呼叫了,可以說是繼承了Teacher的方法,故studentA也就有了intro()方法。其中程式碼第十行起到了關鍵作用Teacher.call(this, name, age),此句的作用是令當前物件呼叫另一個物件的方法,this關鍵字在這裡指涉Student()對象,實例化以後this指涉studentA對象,而後面的參數分別為Teacher傳入的參數。可能上面的例子不是很常見,但是我們經常見到這樣的程式碼:

var str="你好美女";
Array.prototype.join.call(str,"!");    //你!好!美!女
登入後複製

  join方法是數組特有的方法,它是定義在Array()建構子的原型中的方法,所以我們實例化的陣列就都繼承了這個方法,但是字串str是沒有join方法,但這裡我們就藉用了陣列的join方法來處理字串。在call左邊的表達式為借用的物件的方法,call()中的第一個參數物件借用call左邊表達式物件的方法(不知道這樣說能不能理解,將就吧)。

apply

apply()方法的作用和call方法是一樣的,只是傳入的參數不同。

語法:apply([thisObj[,argArray]])
定義:應用某一物件的一個方法,用另一個物件取代目前物件。

apply的第一個參數和call一樣,第二個參數是一個陣列物件(類別陣列也可以),他不再是以單一參數列表的形式傳入參數,而是把所有參數放到一個陣列中,一起傳入。這裡就不得不說到arguments對象,它存在於每個函數中,是函數所有實參組成的一個類別數組對象。所以apply的第二個參數傳入arguments物件。看下面範例:

var arr=[2,3,12,5,234,199,21,1000,2432];
var max=Math.max.apply(Math,arr);
console.log(max); //2432
登入後複製

陣列中沒有求最大值得方法,但是Math物件裡面有max可以求出最大值,因此我們使用apply方法讓陣列繼承Math的max()方法,從而求出數組中的最大值,同樣上面的方法也可以用call()方法代替,只不過書寫較為麻煩,不便於閱讀,代碼為:

var max=Math.max.call(Math,2,3,12,5,234,199,21,1000,2432);
console.log(max); //2432
登入後複製

關於call和apply最基本的用法就是這些,當然這兩個函數的妙處遠遠不止這些,歡迎大神們補充。


#

以上是js中的call()和apply()的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板