javascript前端開發:阿里巴巴超難面試題讓你理解call的用法

關於javascript中的call方法,網上總很難找到全面而通俗的解釋,就我個人的理解來說,call有兩個作用:

1、繼承

2、修改函數運行時的this指針。

下面這段代碼來自阿里的前端面試題庫

function fn(a,b){
 console.log(this);
 console.log(a);
 console.log(a+b);
}
fn.call(1);
fn.call.call(fn);
fn.call.call.call(fn,1,2);
fn.call.call.call.call(fn,1,2,3);

答案:

fn.call(1); // 1,undefined,NaN

fn.call.call(fn); // fn,undefined,NaN

fn.call.call.call(fn,1,2); // 1,2,NaN

fn.call.call.call.call(fn,1,2,3); // 1,2,5

題解:

fn.call(1);call的第一個參數改變call前面函數裏的關鍵字this所以輸出1;後面沒有參數所以a,b爲undefined,相加結果爲NaN;

fn.call.call(fn);這一塊是個難點,不過也很好理解! fn.call 找到Function.prototype上的call方法(這也是一個函數,也是函數類的一個實例,也可以繼續調用call/apply等方法)我們可以把fn.call看成一個函數 A 那麼接下就等於A.call(fn),這裏執行call方法,把 A 中的關鍵字this修改爲函數 fn ,然後再把函數 A(fn.call) 執行;

fn.call.call.call(fn,1,2);通過上一條的原型鏈的方法我們可以把 fn.call.call.call 看成 A(fn.call.call).call 執行,此時括裏的參數 fn 已經作爲函數執行了,所以就成了 A.call(1,2) 執行!1作爲第一個參數改變 call 前面函數裏的this,後面的參數作爲實參傳遞到函數的形參裏!

fn.call.call.call.call(fn,1,2,3); 同上一條原理!
概括性總結:

不怎麼理解的話也可以記住這個概括性訣竅:

碰到兩個及兩個以上的call都是讓第一個參數執行,第一個參數必須是函數;

第二個參數是改變第一個參數中this;

第三個及第三個以後的參數作爲實參傳給第一個參數。

通過這個題目,可以加深大家對call方法的理解,歡迎大家轉發和關注。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章