javascript - "Object doesn' t 支持此属性或方法"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 中我收到错误

Object doesn't support this property or method "forEach"

引用 $(".slider").forEach

有什么想法吗？

Answer 1

您正在将 forEach 添加到 window 对象，而不是您返回的对象；您将 $ 作为函数调用，而不是构造函数。由于您使用的是松散模式(显然)，函数调用中的 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 原型(prototype)(如果它不存在)并直接在 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是在 Chrome 和 Firefox 上都是 true，所以我们可以像上面那样直接赋值。)

   ...然后你的 $ 就变成了

   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 选项，您至少需要进行转译和 polyfill。

如果您要添加 Array 提供的功能之外的功能，我非常喜欢 #4，除了可用的 polyfilling 只是“非常”好。它可能足以满足您的目的。