Function.prototype.bind()

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

bind(thisArg)
bind(thisArg, arg1)
bind(thisArg, arg1, arg2)
bind(thisArg, arg1, arg2, /* , */ argN)

"use strict"; //  `this` 

function log(...args) {
  console.log(this, ...args);
}
const boundLog = log.bind("this value", 1, 2);
const boundLog2 = boundLog.bind("new this value", 3, 4);
boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6

class Base {
  constructor(...args) {
    console.log(new.target === Base);
    console.log(args);
  }
}

const BoundBase = Base.bind(null, 1, 2);

new BoundBase(3, 4); // true, [1, 2, 3, 4]

class Derived extends class {}.bind(null) {}
// TypeError: Class extends value does not have valid prototype property undefined

class Base {}
const BoundBase = Base.bind(null, 1, 2);
console.log(new Base() instanceof BoundBase); // true

// thisglobalThis
this.x = 9;
const module = {
  x: 81,
  getX() {
    return this.x;
  },
};

// getXthismodule
console.log(module.getX()); // 81

const retrieveX = module.getX;
// retrieveXthisglobalThis
console.log(retrieveX()); // 9

// boundGetXthismodule
const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // 81

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

console.log(list(1, 2, 3)); // [1, 2, 3]

console.log(addArguments(1, 2)); // 3

// 
const leadingThirtySevenList = list.bind(null, 37);

// 
const addThirtySeven = addArguments.bind(null, 37);

console.log(leadingThirtySevenList()); // [37]
console.log(leadingThirtySevenList(1, 2, 3)); // [37, 1, 2, 3]
console.log(addThirtySeven(5)); // 42
console.log(addThirtySeven(5, 10)); // 42
// 10 

class LateBloomer {
  constructor() {
    this.petalCount = Math.floor(Math.random() * 12) + 1;
  }
  bloom() {
    //  1 
    setTimeout(this.declare.bind(this), 1000);
  }
  declare() {
    console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
  }
}

const flower = new LateBloomer();
flower.bloom();
// 1 flower.declare()

class LateBloomer {
  bloom() {
    //  1 
    setTimeout(() => this.declare(), 1000);
  }
}

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return `${this.x},${this.y}`;
};

const p = new Point(1, 2);
p.toString();
// '1,2'

// thisArg 
const YAxisPoint = Point.bind(null, 0 /*x*/);

const axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new YAxisPoint(17, 42) instanceof Point; // true

const emptyObj = {};
const YAxisPoint = Point.bind(emptyObj, 0 /*x*/);

// 
//
YAxisPoint(13);

//  `this` 
console.log(emptyObj); // { x: 0, y: 13 }

class Base {
  static baseProp = "";
}

class Derived extends Base {
  static derivedProp = "";
}

const BoundDerived = Derived.bind(null);
console.log(BoundDerived.baseProp); // ""
console.log(BoundDerived.derivedProp); // undefined
console.log(new BoundDerived() instanceof Derived); // true

const slice = Array.prototype.slice;

// ...

slice.call(arguments);

// slice
const unboundSlice = Array.prototype.slice;
const slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);