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.