npm 包 es5-polyfill 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代的前端开发中，我们经常会用到一些现代的语法和 API，例如箭头函数、Promise、async/await 等；然而这些现代的语法和 API 并不被所有的浏览器所支持，这就需要我们使用 polyfill 来尽可能地兼容旧的浏览器。在本篇文章中，我们将会介绍一个非常优秀的 polyfill 包——es5-polyfill，并且会详细讲解如何在我们的项目中使用它。

es5-polyfill 安装

我们通常使用 npm 来管理我们的项目依赖，所以我们可以通过以下命令来安装 es5-polyfill：

npm install es5-polyfill --save

安装完成后，我们就可以在我们的代码中引用 es5-polyfill 了。通常来说，我们会在我们的入口文件中引用它：

import 'es5-polyfill';

如果我们是在一些老的浏览器中使用了 es5-polyfill，那么它就会自动地进行 polyfill 填充操作，并将不支持的 API 转换为可执行的代码。

es5-polyfill API

es5-polyfill 中包含了许多来自 ES5 规范的 API，接下来我们将会逐一介绍其中的一些 API 以及它们的用法。

Object.create

Object.create() 方法会创建一个新的对象，并将一个现有对象作为新对象的原型（也就是 proto）。

使用范例：

var obj1 = { name: 'aa' };
var obj2 = Object.create(obj1);
console.log(obj2.name); // 'aa'

Array.isArray

Array.isArray() 用来判断一个值是否为数组类型。

使用范例：

console.log(Array.isArray([])); // true
console.log(Array.isArray(null)); // false
console.log(Array.isArray('')); // false

Array.prototype.indexOf

indexOf() 方法用来查找数组中是否包含某个值，如果包含，则返回该值在数组中的下标，否则返回 -1。

使用范例：

var arr = [1, 2, 3];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(4)); // -1

Object.keys

Object.keys() 方法返回一个由对象的可枚举属性组成的数组。

使用范例：

var obj = { name: 'aa', age: 18 };
console.log(Object.keys(obj)); // ['name', 'age']

Function.prototype.bind

bind() 方法会创建一个新的函数，当这个新函数被调用时，它的 this 值会被绑定到 bind() 的第一个参数中，即 bind() 调用时的第一个参数。

使用范例：

var obj = {
    name: 'aa',
    sayHello: function () {
        console.log('Hello, ' + this.name);
    }
};
var fun = obj.sayHello.bind(obj);
fun(); // Hello, aa

总结

通过本文的介绍，我们已经了解了 es5-polyfill 的安装方法和常用的 API 的用法。使用 es5-polyfill 可以使我们的代码在更为老旧的浏览器中得到良好的兼容性支持。下一步我们可以在我们的项目中尝试使用它，并对它做更多的深入了解。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005726d81e8991b448e8a38