Oprettelse af din egen bind() (Polyfill of bind)

Så hvad er polyfill?

Polyfill er et alternativ til en metode, der ikke understøttes af browseren som standard. Du kan finde browserunderstøttelse for enhver funktion eller metode på mdn hjemmeside.

Hvad er nu bind() ?

I henhold til mdn

Denne definition lyder virkelig fancy, men hvad betyder det?

Med enkle ord,

Nu fik vi ideen om polyfill og bind() . Så lad os prøve at implementere det.

1). lad os oprette et objekt, som vi skal bruge som et opkaldssted.

let obj = {
  name: 'Jack',
};

2). Opret en function at vi skal binde med objektet.

let myFunc = function () {
  console.log(`${this.name}`);
};

Hvis du kalder denne funktion nu, vil den udskrive undefined

3). Tilføj din bind() til funktionsprototypen.

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

Samler det hele.

let obj = {
  name: 'Jack',
};

let myFunc = function () {
  console.log(`${this.name}`);
};

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

let newFunc = myFunc.myBind(obj)
newFunc() // Jack

Dette er den grundlæggende implementering af bind() , Men den har få kantsager. Lad os sige, at du vil sende nogle argumenter i myBind() . Hvordan vil du gøre det? I øjeblikket accepterer vi ikke andre argumenter end selve objektet. Lad os implementere denne funktionalitet.

Problemet

let obj = {
  name: 'Jack',
};

let myFunc = function (id) {
  console.log(`${this.name}, ${id}`);  // id will be undefined
};

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc() // Jack, undefined

Vi forsøger at sende id i myBind men ikke i stand til at få adgang til det.

Løsningen

let obj = {
  name: 'Jack',
};

let myFunc = function (id) {
  console.log(`${this.name}, ${id}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  return function () {
    func.apply(obj, [...args]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc() // Jack, a_random_id

Nu har vi løst en kantsag. Der er dog endnu en forbedring, vi kan gøre. Hvad hvis vi vil videregive argumenter til newFunc() ?

Problemet

let obj = {
  name: 'Jack',
};

let myFunc = function (id, city) {
  console.log(`${this.name}, ${id}, ${city}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  return function () {
    func.apply(obj, [...args]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc('New York') // Jack, a_random_id, undefined

Vi passerer 'New York', men kan ikke få adgang til det inden for myFunc

Løsningen

let obj = {
  name: 'Jack',
};

let myFunc = function (id, city) {
  console.log(`${this.name}, ${id}, ${city}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  // Accepting arguments passed to newFunc
  return function (...newArgs) {
    func.apply(obj, [...args, ...newArgs]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc('New York') // Jack, a_random_id, New York

Nu tror jeg, vi har dækket næsten alle sagerne. Men stadig, hvis der er noget tilbage, så lad mig det vide i kommentarfeltet.

Tid til at fejre. Du har implementeret din egen bind() .

Jeg håber, at dette vil være nyttigt for dig.