“对象不支持此属性或方法” IE10 / 11 [英] "Object doesn't support this property or method" IE10/11

问题描述

随着ES6的采取，我渴望放弃jQuery并使用本机JS为我的网站构建保持快速和轻量级。也是为了提高我的JS技能，因为我是那些直接使用jQuery的人之一。

With ES6 taking ahold, I'm eager to drop jQuery and use native JS for my website builds keeping them quick and lightweight. Also to improve my JS skills as I'm one of those whose jumped straight in with jQuery.

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

I'm building a tiny tiny library to make the more common used javascript in a function to keep the files small.

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中我收到错误

This works great in Chrome etc.. but in IE10/11 I'm getting the error

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

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

指的是$（。slider）。forEach

referring to the $(".slider").forEach

任何想法？

推荐答案

您将 forEach 添加到窗口对象，而不是对象你回来了;你将 $ 称为函数，而不是构造函数。由于你正在使用松散模式（显然），函数调用中的这个是对全局对象的引用（也可以作为窗口在浏览器上）。您将从 querySelectorAll 返回该集合。

You're adding forEach to the window object, not to the object you return; you're calling $ as a function, not a constructor. Since you're using loose mode (apparently), this within the function call is a reference to the global object (also accessible as window on browsers). You're returning the collection from querySelectorAll unchanged.

它在Chrome上运行的原因是返回的集合 querySelectorAll 有自己的 forEach （这是一个相当新的补充）。

The reason it works on Chrome is that the collection returned by querySelectorAll has its own forEach (this is a fairly recent addition).

为此，有四个选项：

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

1. Return an object and add forEach to it, copying the elements from the QSA collection to that object. E.g.:

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 $;
})();

将 forEach 添加到 NodeList 原型（如果它还没有）并直接在 querySelectorAll forEach C $ C>。例如：

Add forEach to the NodeList prototype if it's not already there and use forEach directly on the collection from querySelectorAll. For instance:

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 以上，可枚举 [令人惊讶]，可配置，可写都是 true ，所以我们可以直接进行如上所述。）

(No need for Object.defineProperty above, enumerable [surprisingly], configurable, and writable are all true for it on Chrome and Firefox, so we can just do direct assignment as above.)

...当然，你的 $ 只不过是

...and then of course your $ becomes nothing more than

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

（首先。如果你想添加更多功能，你可以可能想要走＃1的方式。）

(To start with. If you wanted to add more features, you'd probably want to go the way of #1.)

返回一个数组：

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

或在ES5中：

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

子类数组（在ES2015之前的JavaScript引擎上无法完全填充），因此您可以在数组的功能之上添加自己的功能：

Subclass Array (which cannot be perfectly polyfilled on pre-ES2015 JavaScript engines) so you can add your own features on top of Array's features:

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

此处没有ES5选项，您至少需要进行转换和polyfill。

No ES5 option here, you'd need to at least transpile and polyfill.

如果您要添加 Array ，我非常喜欢＃4，除了填充物只有如此好。它可能足以满足您的目的。

If you're going to add features beyond those provided by Array, I quite like #4 other than the polyfilling available only being "so" good. It may well be sufficient for your purposes.

这篇关于“对象不支持此属性或方法” IE10 / 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！