JavaScript函式Call、Apply原理例項解析
這篇文章主要介紹了JavaScript函式Call、Apply原理例項解析,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
一、方法重用
使用 call() 方法,您可以編寫能夠在不同物件上使用的方法。
1、函式是物件方法
在 JavaScript 中,函式是物件的方法。
如果一個函式不是 JavaScript 物件的方法,那麼它就是全域性物件的函式(參見前一章)。
下面的例子建立了帶有三個屬性的物件(firstName、lastName、fullName)。
var person = { firstName:"Bill",lastName: "Gates",fullName: function () { return this.firstName + " " + this.lastName; } } person.fullName(); // 將返回 "Bill Gates"
fullName 屬性是一個方法。person 物件是該方法的擁有者。
fullName 屬性屬於 person 物件的方法。
二、call() 方法
call() 方法是預定義的 JavaScript 方法。
它可以用來呼叫所有者物件作為引數的方法。
通過 call(),您能夠使用屬於另一個物件的方法。
本例呼叫 person 的 fullName 方法,並用於 person1:
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName:"Bill",} var person2 = { firstName:"Steve",lastName: "Jobs",} person.fullName.call(person1); // 將返回 "Bill Gates"
本例呼叫 person 的 fullName 方法,並用於 person2:
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName:"John",lastName: "Doe",} var person2 = { firstName:"Mary",} person.fullName.call(person2); // 將返回 "Steve Jobs"
1、帶引數的 call() 方法
call() 方法可接受引數:
var person = { fullName: function(city,country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"Bill",lastName: "Gates" } person.fullName.call(person1,"Seattle","USA");
三、 apply() 方法
apply() 方法與 call() 方法非常相似:
在本例中,person 的 fullName 方法被應用到 person1:
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill",} person.fullName.apply(person1); // 將返回 "Bill Gates"
1、call() 和 apply() 之間的區別
不同之處是:
call() 方法分別接受引數。
apply() 方法接受陣列形式的引數。
如果要使用陣列而不是引數列表,則 apply() 方法非常方便。
2、帶引數的 apply() 方法
apply() 方法接受陣列中的引數:
var person = { fullName: function(city," + country; } } var person1 = { firstName:"John",lastName: "Doe" } person.fullName.apply(person1,["Oslo","Norway"]);
與 call() 方法對比:
var person = { fullName: function(city,lastName: "Doe" } person.fullName.call(person1,"Oslo","Norway");
3、在陣列上模擬 max 方法
您可以使用 Math.max() 方法找到(數字列表中的)最大數字:
Math.max(1,2,3); // 會返回 3
由於 JavaScript 陣列沒有 max() 方法,因此您可以應用 Math.max() 方法。
Math.max.apply(null,[1,3]); // 也會返回 3
第一個引數(null)無關緊要。在本例中未使用它。
這些例子會給出相同的結果:
Math.max.apply(Math,3]); // 也會返回 3 Math.max.apply(" ",3]); // 也會返回 3 Math.max.apply(0,3]); // 也會返回 3
4、JavaScript 嚴格模式
在 JavaScript 嚴格模式下,如果 apply() 方法的第一個引數不是物件,則它將成為被呼叫函式的所有者(物件)。在“非嚴格”模式下,它成為全域性物件。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。