文 / 景朝霞
公號 / 朝霞的光影筆記
ID / zhaoxiajingjing

描述

function fn1(){
    console.log(1);
}
function fn2(){
    console.log(2);
}
fn1.call(fn2); // 輸出1
fn1.call.call(fn2); // 輸出2

問題

看到這個題目，第一反應是蒙圈的。

fn1.call(fn2); 這個是理解的。
fn1.call.call(fn2);這個蒙圈了。

理解

有些繞，需要多唸叨唸叨琢磨琢磨。

call 方法是Function.prototype原型上天生自帶的方法，所有的函數都可以調用的。

我覺得 call方法本身沒有具體return什麼出來，所以是undefined。

Function.prototype.call=function call(context){
    // [native code]
    // call方法的功能
    // 1. 把指定函數中的this指向context
    // 2. 把指定函數執行
    
    // 那麼call方法中的this，即為指定函數。也就是説
    // 1. 把this中 的 this關鍵字指向context;
    // 2. 把指定函數執行this();
};

fn1.call(fn2);

按照上面的理解

1. call 方法中的this是fn1
2. 把call方法中的this（fn1）中的this指向fn2
3. 調用 call方法中的this

所以調用的是 fn1 ，此時fn1中的 this 指向的是 fn2。
但是這個方法裏面並沒有使用this，而是直接輸出了1。

fn1.call.call(fn2);

按照上面的理解

1. call 方法中的 this 是 fn1.call【所有函數都可以調用call，調用的是原型上call方法】
2. 把call方法中的this (fn1.call) 中的this 指向fn2
3. 調用call方法中的this

所以調用的是 fn2(這裏有些繞，多唸叨唸叨琢磨琢磨)，此時fn1.call中的this指向的是fn2。
它改變了call方法（Function.prototype原型上的call）的this指向。
此處調用了call方法中的this，即調用了fn2，輸出了2。

交流