关于bind绑定函数缺省参数疑惑

Question

控制台执行下面

function getConfig(color,size,otherOptions){
    console.log(color,size,otherOptions);
}
var defaultConfig = getConfig.bind("#FFF","20*12");
defaultConfig ('123')

输出20*12 123 undefined

请问输出的20*12 123 undefined是什么原理？为什么下面的语句正常输出

function getConfig(color,size,otherOptions){
    console.log(color,size,otherOptions);
}
var defaultConfig = getConfig.bind(null,"#FFF","20*12");
defaultConfig ('123')

输出#FFF 20*12 123

.bind第一个参数为null时，后面的参数为什么自动对应getConfig的前两个参数？

Answer 1

    function getConfig(color, size, otherOptions) {
        console.log(color, size, otherOptions);
    }

var defaultConfig = getConfig.bind("#FFF","20*12");

bind第一个不是参数，第二个开始是第一个参数，所以这里第一个color设置为了"20*12",第二、三个参数都为undefinde

 defaultConfig('补上第二个参数');

函数调用时，只传入了一个参数，补上了第二空位，第三个参数依然为undefinde

var defaultConfig = getConfig.bind(null,"#FFF","20*12");

第一个null不是参数，所以参数第一个和第二个为:#FFF,20*12

defaultConfig ('补上第三个参数');

函数调用补上了第三个参数，再设置更多的参数也无效,因为函数本身只有三个形参

Answer 2

bind的第一个参数是做为原函数的this指向的，第二个参数开始才是函数的参数
可以去看下这篇文章https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind