出现错误：对象不支持属性或方法“分配”

Posted 2023-05-09

【中文标题】出现错误：对象不支持属性或方法“分配”

【英文标题】：Getting Error: Object doesn't support property or method 'assign'

【发布时间】：2016-05-14 21:52:24

【问题描述】：

我在我的 WordPress 网站上使用这个 jquery 弹出插件from this link。它在所有浏览器上都可以正常工作，但在 IE11 上会出现以下错误。

【问题讨论】：

@JohnDoe，你能提供一个可行的例子吗？

@pragya，请输入您的一些代码，以便我们判断问题所在......我的问题是找不到 dom 元素或页面上多次具有相同的 id。

【参考方案1】：

正如其他人所提到的，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;
  ;

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

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

【讨论】：

为什么它使用单个!= 而不是更安全的!==？

谢谢！这很好用。我在 Facebook 客户聊天小部件上遇到了这个确切的问题，并且在 FB 的代码成功之前应用了这个代码。 （对于即使世界其他地方都在继续使用 IE 仍然坚持使用 IE 的一位客户）

这里有类似的东西npmjs.com/package/es6-object-assign - 我用 npm install 添加了它...并按照<script src="<your-libs-directory>/object-assign-auto.min.js"></script> 的建议复制了自动polyfill

【参考方案2】：

@John Doe

我从您的评论中得知您想在节点/反应堆栈中实现这一点。这与原始问题非常不同，您应该问自己的问题;) 无论如何，这是你需要做的......

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

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

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

那么如果你想在节点环境中使用它：

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

如果您在前端（浏览器）端遇到问题... 将其添加到您的 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_modules 取决于您使用的样板文件，大多只是 node_modules，但有时当 index.html 位于您需要使用的子目录中时，../node_modules

【参考方案3】：

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

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

而且IE不支持。

【讨论】：

如何实现像npmjs.com/package/event-source-polyfill 这样的polyfill？在节点/反应堆栈中？

【参考方案4】：

这个问题的可能解决方案：

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

来源：custombox github project

【参考方案5】：

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

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

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

【参考方案6】：

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

拥有您所期望的弹出窗口以及更多内容：D

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

在 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>");

我必须想出的技巧：

//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();

【参考方案7】：

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

例如：

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 );

结果：

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

【参考方案8】：

请添加脚本

<script src="https://cdn.jsdelivr.net/npm/es6-object-assign@1.1.0/dist/object-assign-auto.min.js"></script>

到 html 文件来解决这个问题。

【讨论】：

在我的 Laravel 中的 ReactJS 应用程序上工作就像一个魅力，谢谢队友 :)

【参考方案9】：

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

来源：SCRIPT438: Object doesn't support property or method IE

其他链接：jquery validation IE Object doesn't support property

【参考方案10】：

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

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

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

编辑：原来的Object.assign 不能这样工作。

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

【参考方案11】：

IE11 的 React 解决方案

关于shramee's answer，它是这样表述的：

@JohnDoe 来自your comment，您想在 node/react 堆栈中实现此功能。这与原始问题有很大不同，但您可能会使用es6-object-assign，ES6 Object.assign() "polyfill"：

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

在根文件夹的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> 中有调用 @987654334 的脚本@你可以将它添加到<head>元素的末尾）。

直接从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）。

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

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

您可能想要使用未缩小的文件并添加其他自定义 polyfill（例如startsWith）。