前言

面试官：你知道ployfill吗？
我：解决兼容性的
面试官：它是怎么解决的呢？
我：emmmmmm (一问一个不吱声)

概念

Polyfill是一种JavaScript库，它提供了原生的替代实现，使得现代Web特性在老旧浏览器中得以正常工作。Polyfill的主要目的是解决浏览器兼容性问题，确保代码在多种浏览器中正常运行

作用

• 兼容性：Polyfill提供了原生的替代实现，使得现代Web特性在老旧浏览器中得以正常工作。
• 功能实现：Polyfill可以实现一些现代Web特性，如Promise、fetch API等，即使老旧浏览器不支持这些特性。
• 性能优化：Polyfill可以帮助开发者优化代码性能，例如通过实现requestAnimationFrame等API。

使用

ES6中引入了Promise对象，但是有些旧版浏览器可能不支持Promise，这时就可以使用Promise的polyfill库，例如promise-polyfill

1、安装polyfill库 npm install promise-polyfill

2、main.js中，引入并使用polyfill库

import Promise from 'promise-polyfill';

window.Promise = Promise;

当然，知道了这些是远远不能满足面试官的...除非他很菜...

原理

1. 检测浏览器特性：确定当前环境中是否支持特定的功能或 API。
2. 加载 Polyfill 代码：如果检测到不支持，加载相应的 Polyfill 代码。
3. 实现缺失的功能：Polyfill 代码会提供缺失功能的实现。
4. 保证向后兼容性：使旧的浏览器或环境能够使用新的功能。

例如forEach

if (!Array.prototype.forEach) { 
    Array.prototype.forEach = function (callback, thisArg) { 
        for (var i = 0; i < this.length; i++) { 
            callback.call(thisArg, this[i], i, this); 
        } 
    }; 
}

例如Object.assign

if (typeof Object.assign!== 'function') { 
    Object.assign = function(target) { 
        'use strict'; 
        if (target === null || target === undefined) { 
            throw new TypeError('Cannot convert undefined or null to object'); 
        } 
        let to = Object(target); 
        for (let i = 1; i < arguments.length; i++) { 
            let source = arguments[i]; if (source!== null && source!== undefined) { 
                for (let key in source) { 
                    if (Object.prototype.hasOwnProperty.call(source, key)) { 
                        to[key] = source[key]; 
                    } 
                } 
            } 
        } 
        return to; 
    }; 
}

例如Promise

function myPromise(executor) {
    let resolve = null;
    let reject = null;
  
    function resolvePromise(value) {
      if (resolve) {
        resolve(value);
      }
    }
  
    function rejectPromise(reason) {
      if (reject) {
        reject(reason);
      }
    }
  
    executor(resolvePromise, rejectPromise);
  
    return {
      then: function (onFulfilled, onRejected) {
        return new myPromise(function (resolve, reject) {
          function handleResult(value) {
            if (typeof onFulfilled === 'function') {
              try {
                let result = onFulfilled(value);
                resolvePromise(result);
              } catch (error) {
                rejectPromise(error);
              }
            } else {
              resolvePromise(value);
            }
          }
  
          if (resolve) {
            resolve.then(handleResult, rejectPromise);
          }
        });
      }
    };
  }
  
  // 使用示例
  let promise = new myPromise(function (resolve, reject) {
    setTimeout(() => {
      resolve('Success!');
    }, 1000);
  });
  
  promise.then(function (result) {
    console.log(result); 
  });

看完你就会发现，我勒个去，这不就是手写源码吗...谁说不是的呢...

感谢观看，感谢三连支持~