jQuery 获取错误：对象不支持属性或方法“分配”

Getting Error: Object doesn't support property or method 'assign'

提问by pragya rai

I am using this jquery popup plugin from this linkon my WordPress site. It's working fine on all browsers but giving the following error on IE11.

我正在我的 WordPress 网站上的这个链接中使用这个 jquery 弹出插件。它在所有浏览器上运行良好，但在 IE11 上出现以下错误。

回答by Andres Ilich

As others have mentioned, the Object.assign()method is not supported in IE, but there is a polyfill available, just include it "before" your plugin declaration:

正如其他人所提到的，IE 不支持Object.assign()方法，但是有一个 polyfill 可用，只需将它包含在您的插件声明“之前”：

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Test page: http://jsbin.com/pimixel/edit?html,js,output(just remove the polyfill to get the same error you're getting on your page).

测试页面：http: //jsbin.com/pimixel/edit?html,js,output（只需删除 polyfill 即可获得与页面上相同的错误）。

回答by shramee

@John Doe

@约翰·多伊

I figured out from your comment that you want to implement this in node/react stack. This is very different from original question and you should have asked your own ;)
Anyways, Heres what you need to do...

我从你的评论中发现你想在 node/react 堆栈中实现它。这与原始问题非常不同，您应该问自己的问题 ;)
无论如何，这就是您需要做的...

You can use [es6-object-assign][1]. It is an ES6 Object.assign() "polyfill".

您可以使用 [es6-object-assign][1]。它是一个 ES6 Object.assign() “polyfill”。

First, in package.jsonin your root folder, add es6-object-assignas a dependency:

首先，在package.json您的根文件夹中，添加es6-object-assign为依赖项：

"dependencies": {
    "es6-object-assign": "^1.0.2",
    "react": "^0.12.0",
    ...
  },

Then if you want to use it in node environment use:

然后如果要在节点环境中使用它，请使用：

require('es6-object-assign').polyfill();

If you are having the issue on front (browser) end...
Add it in your index.html file...

如果您在前端（浏览器）端遇到问题...
将其添加到您的 index.html 文件...

<script src="location_of_node_modules/es6-object-assign/dist/object-assign.min.js"></script>
<script>
  window.ObjectAssign.polyfill();
</script>

location_of_node_modulesdepends on boilerplate you use, mostly just node_modules, but sometimes when index.html is in a subdirectory you need to use, ../node_modules

location_of_node_modules取决于您使用的样板，主要是node_modules，但有时当 index.html 位于您需要使用的子目录中时，../node_modules

回答by Vimalan Jaya Ganesh

As per the documentation, Object.assign() is a new technology, part of the ECMAScript 2015 (ES6) standard:

根据文档，Object.assign() 是一项新技术，是 ECMAScript 2015 (ES6) 标准的一部分：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

And it is not supported by IE.

并且它不受 IE 支持。

回答by aprovent

A possible solution for this problem:

此问题的可能解决方案：

Add the script legacy.min.js before the custombox.min.js

在 custombox.min.js 之前添加脚本 legacy.min.js

source: custombox github project

来源：custombox github 项目

回答by serraosays

@Andres-Ilich has the right answer to your question but you're asking the wrong question:

@Andres-Ilich 对您的问题有正确的答案，但您问错了问题：

Why not just use a jQuery plugin that supports IE like Zurb's excellent Reveal: https://github.com/zurb/reveal

为什么不直接使用支持 IE 的 jQuery 插件，比如 Zurb 的优秀 Reveal：https: //github.com/zurb/reveal

It will do everything you want and not throw this error.

它会做你想做的一切，而不是抛出这个错误。

回答by seahorsepip

Currently working on a jQuery popup myself: https://github.com/seahorsepip/jPopup

目前我自己正在处理一个 jQuery 弹出窗口：https: //github.com/seahorsepip/jPopup

Has everything you'd expect of a popup and more :D

拥有您对弹出窗口所期望的一切：D

Anyway back on topic, I'm currently writing version 2 which is a big rewrite and adds support for IE6 (version 1 was IE7+) and ran into a similiar error...

无论如何回到主题，我目前正在编写版本 2，这是一个很大的重写并添加了对 IE6 的支持（版本 1 是 IE7+）并遇到了类似的错误......

Original code that gave the error in IE6:

在 IE6 中给出错误的原始代码：

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");

The hack I had to come up with:

我不得不想出的黑客：

//Insane code for an insane browser
this._vars.fakeScrollbar = $("<div>");
this._vars.fakeScrollbar.html("<div style=\"position:absolute;top:expression(document.documentElement.scrollTop);right:0;bottom:0;margin-left:-200px;width:0;overflow-y:scroll;height:expression(document.documentElement.clientHeight);z-index:9999999;\"></div>");
this._vars.fakeScrollbar = this._vars.fakeScrollbar.children();

回答by Kalimah

Since you tagged the question with jQuery you can use the jQuery extendfunction. No need for a polyfill and it does deep merge as well.

由于您使用 jQuery 标记了问题，因此您可以使用 jQuery扩展功能。不需要 polyfill，它也可以进行深度合并。

For Example:

例如：

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

Result:

结果：

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

回答by Milap

These error usually occurs when some html element id has the same id as some variable in the JavaScript function. After changing the name of one of them code worked.

当某些 html 元素 id 与 JavaScript 函数中的某些变量具有相同的 id 时，通常会发生这些错误。更改其中之一的名称后，代码有效。

Source : SCRIPT438: Object doesn't support property or method IE

来源：SCRIPT438：对象不支持属性或方法 IE

Other link : jquery validation IE Object doesn't support property

其他链接：jquery 验证 IE 对象不支持属性

回答by Hydroper

Basically, Object.assignisn't supported by all browsers, however, it's possible to re-assign it at Objectcase it's not supported by the current browser.

基本上，Object.assign并非所有浏览器都支持，但是，可以Object在当前浏览器不支持的情况下重新分配它。

It's pratice to make a polyfill function, which behaves in the same way as Object.assign(target, ...)of ES6.

制作一个 polyfill 函数是一种实践，它的行为方式与Object.assign(target, ...)ES6相同。

I think the best solution is to iterate each argument after target, assign each property of argumentsobjects to target, considering a iteration between objects and arrays, to avoid creating references. Optionally, to not lost instances, you can detect if the last instance of the property is only equal to "Array"or "Object", and doing so you won't lost a Imageinterface (e.g) if you plan to create new references, but objects with these instances will still be reference.

我认为最好的解决方案是在 之后迭代每个参数target，将arguments对象的每个属性分配给target，考虑对象和数组之间的迭代，以避免创建引用。可选地，为了不丢失实例，您可以检测属性的最后一个实例是否仅等于"Array"或"Object"，Image如果您计划创建新引用，这样做不会丢失接口（例如），但是具有这些实例的对象将还是可以参考的。

Edit: the original Object.assigndoesn't work in this way.

编辑：原件Object.assign不能以这种方式工作。

According to this solution, I've my own polyfill which can be found here.

根据这个解决方案，我有我自己的 polyfill，可以在这里找到。

回答by CPHPython

React solution for IE11

IE11的反应解决方案

Regarding shramee's answer, which stated something like this:

关于shramee 的回答，它说的是这样的：

@JohnDoefrom your comment, you want to implement this in node/reactstack. This is very different from the original question, but you might use es6-object-assign, an ES6 Object.assign()"polyfill":

@JohnDoe来自您的评论，您想在节点/反应堆栈中实现它。这与原始问题非常不同，但您可能会使用es6-object-assign，这是一个 ES6 Object.assign()“polyfill”：

This polyfill was updated and things can be done a bit differently now:

这个 polyfill 已经更新，现在可以做一些不同的事情：

• in package.jsonin your root folder, add es6-object-assignas a dependency (executing npm iin a command line after):

  "dependencies": {
      "es6-object-assign": "^1.0.2",
      "react": "^16.8.6",
      ...
    },
  

  Orsimply run: npm i --save es6-object-assign

• To use it in a node environment:

  require('es6-object-assign').polyfill();
  // Same version with automatic polyfilling
  require('es6-object-assign/auto');
  

• To use it in your index.html, just add the automatic polyfill JS filereference to it (if you have scripts in the <body>that invoke Object.assign()you may add it at the end of the <head>element).

  1. Invoking directly from node_modules:

     <script src="location_of_node_modules/es6-object-assign/dist/object-assign-auto.min.js"></script>
     

     location_of_node_modulesdepends on your project structure (when index.htmlis in a subdirectory you might need: ../node_modules).

  2. However, this might have not worked for you (due to node_modulesfolders access, e.g. you are using create-react-app). If so, just copy the JS file from the dist/node_modules folder to the public/folderand then:

     <script src="%PUBLIC_URL%/object-assign-auto.js"></script>
     

     You might want to use the non-minified file and add other customized polyfills (e.g. startsWith).

• 在package.json您的根文件夹中，添加es6-object-assign为依赖项（npm i之后在命令行中执行）：

  "dependencies": {
      "es6-object-assign": "^1.0.2",
      "react": "^16.8.6",
      ...
    },
  

  或者简单地运行：npm i --save es6-object-assign

• 要在节点环境中使用它：

  require('es6-object-assign').polyfill();
  // Same version with automatic polyfilling
  require('es6-object-assign/auto');
  

• 要在index.html 中使用它，只需向它添加自动 polyfill JS 文件引用（如果您在该<body>调用中有脚本，Object.assign()您可以将它添加到<head>元素的末尾）。

  1. 直接调用node_modules：

     <script src="location_of_node_modules/es6-object-assign/dist/object-assign-auto.min.js"></script>
     

     location_of_node_modules取决于您的项目结构（当index.html位于您可能需要的子目录中时：）../node_modules。

  2. 但是，这可能对您不起作用（由于node_modules文件夹访问权限，例如您正在使用create-react-app）。如果是这样，只需将dist/node_modules 文件夹中的 JS 文件复制到该public/文件夹中，然后：

     <script src="%PUBLIC_URL%/object-assign-auto.js"></script>
     

     您可能希望使用非缩小文件并添加其他自定义 polyfill（例如startsWith）。