“对象不支持此属性或方法” IE10 / 11

Question

随着ES6的普及，我渴望放弃jQuery并使用本机JS来构建网站，从而使它们既快速又轻便。 我也提高了JS技能，因为我是直接使用jQuery的人之一。

我正在构建一个微小的微型库，以使函数中更常用的javascript保持较小的文件。

function $(elm) {
    var elm = document.querySelectorAll(elm);

    this.forEach = function(f) {
        [].forEach.call(elm, f);
    }

    return elm;
}

function slider() {
    $(".slider").forEach(function() {
        alert("Hello");
    });
}
slider();

这在Chrome等系统中效果很好。但是在IE10 / 11中，我遇到了错误

对象不支持此属性或方法“ forEach”

引用$（“。slider”）。forEach

有任何想法吗？

Answer 1

您将forEach添加到window对象，而不是返回的对象； 您将$称为函数而不是构造函数。 由于您使用的是宽松模式（显然）， this在函数调用中， this是对全局对象的引用（也可以在浏览器中作为window访问）。 您将从querySelectorAll返回的集合保持不变。

它在Chrome上运行的原因是querySelectorAll返回的集合具有自己的forEach （这是最近添加的）。

为此，有四个选项：

1. 返回一个对象并向其添加forEach ，将元素从QSA集合复制到该对象。 例如：

    function $(selector) { const result = Array.from(document.querySelectorAll(selector)); result.forEach = Array.prototype.forEach; // Perhaps map, filter, etc.; add in a loop? return result; } 

   或在ES5中：

    var $ = (function() { var methods = Array.prototype; function $(selector) { var result = methods.slice.call(document.querySelectorAll(selector)); result.forEach = methods.forEach; // Perhaps map, filter, etc.; add in a loop? return result; } return $; })(); 

2. 将forEach添加到NodeList原型（如果尚不存在），并直接在querySelectorAll的集合上使用forEach 。 例如：

    if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) { // Yes, direct assignment is fine here, no need for `Object.defineProperty` NodeList.prototype.forEach = Array.prototype.forEach; } 

   （无需Object.defineProperty以上， enumerable [出奇]， configurable ，和writable都是true为它在Chrome和Firefox，所以我们可以做直接分配同上。）

   ...然后您的$当然变成了

    function $(selector) { return document.querySelectorAll(selector); } 

   （首先。如果要添加更多功能，则可能希望采用＃1的方式。）

3. 返回一个数组：

    function $(selector) { return Array.from(document.querySelectorAll(selector)); } 

   或在ES5中：

    function $(selector) { return Array.prototype.slice.call(document.querySelectorAll(selector)); } 

4. Array子类（无法在ES2015之前的JavaScript引擎上完美地填充），因此您可以在Array的功能之上添加自己的功能：

    class MyThingy extends Array { // Perhaps further methods here } function $(selector) { return MyThingy.from(document.querySelectorAll(selector)); } 

   这里没有ES5选项，您至少需要进行Transpile和polyfill。

如果您要添加Array提供的功能之外的功能，除了可以使用的polyfilling很好之外，我非常喜欢＃4。 这可能足以满足您的目的。