2

我理解 babel-runtime 和 babel-polyfill 之间的区别，第一个不填充全局范围，而后者填充。我认为 babel-runtime 更安全，但我无法理解这意味着什么以及它对我有何影响：

注意：诸如 "foobar".includes("foo") 之类的实例方法将不起作用，因为这需要修改现有的内置函数（为此使用 babel-polyfill）。

据我了解，实例方法就像map, filter, reduce是因为它们是在现有对象上调用的。哪个例子不会被 babel-runtime 验证？：

//1
['aa', 'bb', 'cc'].forEach(console.log);

//2
const arr = ['aa', 'bb', 'cc'];
arr.forEach(console.log);

//3
const entries = Object.entries(someObj).filter(([key, value]) => key.startsWith('hello'));

//4
const map = new Map();

//5
var s = new Set(["foo", window]);
Array.from(s);

如何准确识别实例方法？

我在我的项目中将 babel-polyfill 替换为 babel-runtime，因为它应该会更好，但现在我不确定什么可以安全使用。

4

1 回答 1

1

这里有一个链接，它解释了 Javascript 中的静态方法与实例方法。

基本上：

class SomeClass {
   instancMethod() {
    return 'Instance method has been called';
   }

   static staticMethod() {
     return 'Static method has been called';
   }
}
// Invoking a static method
SomeClass.staticMethod(); // Called on the class itself
// Invoking an instance method 
var obj = new SomeClass();
obj.instanceMethod(); // Called on an instance of the class

ES5 中的等价物类似于：

function SomeClass() {
   this.prototype.instanceMethod = function() {
      return 'Instance method has been called';
   }
}
SomeClass.staticMethod = function() {
   return 'Static method has been called';
}
// And the invocations:
SomeClass.staticMethod();
new SomeClass().instanceMethod();

例如，当您在 IE11 中使用 babel-polyfill 时，将定义所有不存在的 ES2015+ 方法，例如 Array.from（静态方法）或 String.prototype.repeat（实例方法）等方法。就像你说的那样，这污染了全局状态，但是像这样的实例方法：

myInstanceObj.repeat(4)

如果 myInstanceObj 的类型具有 repeat 方法，它将起作用。如果在运行时 myInstanceObj 是一个字符串并且你包含了 babel-polyfill，那就太好了。但是，如果您使用 babel-runtime 在编译时知道 myInstanceObj 类型的类型（当 babel 转换您的代码时，为了知道如何转换，以及调用什么方法而不是方法重复）有时会很棘手/不可能，这就是为什么上面的实例方法有时很难通过 babel-runtime && transform-runtime 插件进行转换。

另一方面代码如下：

Array.from([1, 2, 3], x => x + x);

真的很容易转换，我们在编译时知道 Array.from 是来自对象 Array 的方法，所以在 IE11 中我们将使用任何东西来代替它......在这里放代码......

如果我们使用 babel-polyfill，这个方法已经存在，因为添加这个方法已经污染了全局范围，所以一切都很好。这一切都取决于你需要什么。

于 2017-12-17T21:04:12.417 回答