【JSリファレンス】Bound Functionエキゾチックオブジェクト

const f = function(a,b=10){
  return this.value * a * b;
}
 // this値{ value:2}、最初の引数を2で固定
const o = { value:2};
const param1 = 2;
const fb = f.bind( o , param1 );

const obj = {
  value:10,
  func1:f,
  func2:fb
}

console.log( obj.func1(  3 ) ); 
  // 300 ← obj.value(10) * 3 * 10

console.log( obj.func2(  3 ) ); 
  // 12 ← o.value(2) * param1(2) * 3

const f = function(a,b=10){
  return this.value * a * b;
}
const f1 = f.bind( { value:2} , 3 , 4 );
const f2 = f1.bind( { value:20} , 30 , 40 );
  // 同じ結果になる（最初のbindが優先)
console.log( f1() );  // 24
console.log( f2() );  // 24
console.log( f2.call({value:0.5} , 0.1 , 0.3 ) ); // 24

f2{
 [[BoundThis]]: { value:20}      // ←┬─ ① f1({ value:20},30,40) 
 [[BoundArguments]]: [30 , 40]   // ←┘    が呼び出される

 [[BoundTargetFunction]]:f1(){

   [[BoundThis]]: { value:2}     // ←┬─ ② f({ value:2} ,3,4,30,40 ) 
   [[BoundArguments]]: [3 , 4]   // ←┘    が呼び出される

   [[BoundTargetFunction]]:f(){
        return this.value * a * b;
   }
 }
}