深入理解 call 和 apply

2021-09-13 18:38:12 字數 2370 閱讀 7504

js中乙個主要的內容就是this的指向問題.
共同之處

他們都能改變this的指向，都是在特定的作用域中呼叫函式，等於設定函式體內this物件的值，以擴充函式賴以執行的作用域。一般來說，this總是指向呼叫某個方法的物件，但是使用call()和
說到他們的功能，我就拿call來舉例子吧，因為他們的功能是一致的。

call([thisobj[,arg1[, arg2[, [,.argn]]]]])

call()方法就是用來代替另乙個物件來呼叫這個方法。call()將乙個函式的物件上下文從初始的變為新定義的新物件thisobj。如果沒有這個物件，那麼就用global來代替.
不同之處

不同之處在於他們傳值的方式不同

function sayname()


var p = ;


sayname.call(p); // zjj 


//使用call將sayname的this改為了p物件
上面這個例子可以很直觀地理解 call 的工作原理。也就是說，當在函式中呼叫 call 這個方法時，函式內部的 this 物件會自動指向 call 方法中的第乙個引數。在上面這個例子中也就是 peter 這個物件了。所以在執行 sayname.call(peter) 時，函式內部的 this.name 則會自動指向 peter.name 。故最終結果為 peter。這是乙個非常好理解的例子。接下來來看較為複雜的情況。
function person()


}function person1()


var sm = new person1();


person.call(sm); //將person的this指向改為了sm


sm.say(); // 這裡之所以能使用say，是因為現在sm指向了person，有say這個方法；
window.color = 'red';


document.color = 'yellow';


var s1 = ;


function changecolor()


changecolor.call();         //red (預設傳遞引數)


changecolor.call(window);   //red


changecolor.call(document); //yellow


changecolor.call(this);     //red


changecolor.call(s1);       //blue
// 在call中傳入函式


function class1 () 


function class2 () 


}class2.call(class1);   // 可以理解為class2給了class1;


alert(class1.saymessage);  // 因為即使是將class2的給了class1，但是saymessage中的this.message仍然還是class2的。


class1.saymessage(); //undefined
var message = "hi";


function class1 () 


function class2 () 


}class2.call(class1);  


alert(class1.saymessage);  


class1.saymessage(); // hello


class1.message = "msg";


class1.saymessage(); //msg
第一次呼叫 saymessage 方法，返回 hello 。我們再來看一下 class2.call(class1) 這個過程。當執行這個方法時，class1 獲得 class2 的 message 屬性和 saymessage 方法。所以此時有 class1.message = "hello" ,class1.saymessage = function () 。因此執行 saymessage 時返回 hello。當我們手動修改 class1.message 時，再呼叫這個方法，返回的值為我們修改的值。這證明了我們上面的推理是正確的。

function add(c,d)


var s = ;


console.log(add.call(s,3,4)); // 1+2+3+4 = 10

新手理解 apply 和 call

假設我們有乙隻喵星人 const cat can run 還可以跳 包括跳牆是可以的 jump can jump 複製 同時,它還有乙個小夥伴汪星人 const dog can run 還會吠 bark bark loudly 馬戲團的?還會做算數 count a,b 複製 不難發現,貓狗各有所長....

我所理解的call和apply

一 先來看看示例 這兩個方法的用途都在特定的作用域中呼叫函式，實際上等於設定函式體內this物件的值。例一 123 4567 891011 1213 1415 function box num1,num2 function sum num1,num2 alert sum 10,10 function...

用例子去理解call和apply

舉乙個例子function animals animals.prototype console.log my name is this name var dog newanimals dog.say my name is 旺財 但是這個時候有乙個貓 cat dog.say.cat my name i...