Menulis polyfill - Javascript

Sekeping kod yang menyediakan fungsi yang tidak disokong secara asli oleh penyemak imbas atau persekitaran tertentu. Secara ringkasnya, pelayar sandaran.

Sebelum menulis polyfill untuk kaedah call(), apply() dan bind(), sila semak kefungsian call, apply dan bind.

let details = {
  name: 'Manoj',
  location: 'Chennai'
}

let getDetails = function (...args) {
  return `${this.name} from ${this.location}${args.join(', ') ? `, ${args.join(', ')}` : ''}`;
}

1. Kaedah Panggilan:

Mari buat polyfill untuk call(). Kami akan menambah kaedah panggilan tersuai pada Function.prototype untuk menjadikannya boleh diakses oleh semua fungsi.

getDetails.call(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myCall = function (ref, ...args) {
  if (typeof Function.prototype.call === 'function') {  // Checks whether the browser supports call method
    return this.call(ref, ...args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is used to overwriting a function name
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](...args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myCall(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

2. Kaedah Permohonan:

Mari buat polyfill untuk apply(). Kami akan menambahkan kaedah gunakan tersuai pada Function.prototype untuk menjadikannya boleh diakses oleh semua fungsi.

getDetails.apply(details, ['Tamil Nadu', 'India']);  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myApply = function (ref, args) {
  if (typeof Function.prototype.apply === 'function') {  // Checks whether the browser supports call method
    this.apply(ref, args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is to avoid duplication
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myApply(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

3. Kaedah ikat

Mari buat polyfill untuk bind(). Kami akan menambah kaedah bind tersuai pada Function.prototype untuk menjadikannya boleh diakses oleh semua fungsi.

let getFullDetails = getDetails.bind(details, 'Tamil Nadu');
getFullDetails();  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myBind = function (ref, ...args) {
  if (typeof Function.prototype.bind === 'function') {
    return this.bind(ref, ...args);
  } else {
    let fn = this;
    return function (...args2) {
        return fn.apply(ref, [...args, ...args2]);  // Merge and apply arguments
    }
  }
}

let getFullDetails = getDetails.myBind(details, 'Tamil Nadu');  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

---

Terima kasih kerana membaca! Saya harap anda mendapati blog ini bermaklumat dan menarik. Jika anda mendapati sebarang ketidaktepatan atau mempunyai sebarang maklum balas, sila jangan teragak-agak untuk memberitahu saya.

Atas ialah kandungan terperinci Menulis polyfill - Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!