如何处理 IE 8 中缺少 JavaScript Object.bind() 方法

IT技术 javascript internet-explorer-8 cross-browser bind backwards-compatibility
2021-03-11 02:04:12

我正在编写一些使用该Object.bind方法的 JavaScript

funcabc = function(x, y, z){ 
    this.myx = x;
    this.playUB = function(w) {
        if ( this.myx === null ) {
            // do blah blah
            return;
        }

        // do other stuff
    };
    this.play = this.playUB.bind(this);
};

由于我在WinXP下用Firefox开发,有时在Win7下用IE 9或10进行测试,我没有注意到或注意IE8及以下不支持bind.

这个特定的脚本不使用画布,所以我有点犹豫要不要注销所有 IE 8 用户。

有标准的解决方法吗?

我在 JavaScript 方面做得还不错,但我仍然有点菜鸟。所以如果解决方案是完全显而易见的,请原谅我。

4个回答

这个页面有一个很好的兼容性脚本:https : //developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

只需将其复制并粘贴到您的脚本中即可。

编辑:为了清楚起见,将脚本放在下面。

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}
stackoverflow.com/questions/14346781/ ... 在上面发布了一个问题....带有浏览器兼容性图表的好答案
2021-04-15 02:04:12
这就像一个魅力。找到了绑定问题的修复程序,并学会了在 mozilla 文档中查找关键字 Compatibility。
2021-04-16 02:04:12
顺便说一句,事实证明 IE 8 缺少太多功能。基本上,我需要坚持使用 HTML5 兼容的浏览器。没有方便的 Audio() 就没有意义。
2021-04-21 02:04:12
@pure_code - 我认为它确实如此(绑定方法已成为标准,因此所有新浏览器都应该拥有它)。但我还没有测试过,现在也无法访问 IE10。
2021-05-05 02:04:12
@alex - 你知道 IE10 是否支持绑定或者它是否需要你提到的解决方法?
2021-05-12 02:04:12

最好的解决方案是安装Modernizr

Modernizr 会告诉您当前浏览器是否本地实现了此功能,并且它提供了一个脚本加载器,因此您可以在旧浏览器中引入 polyfill 以回填功能。

这是生成您的 Modernizr 自定义版本的链接:http :
//modernizr.com/download/#-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes

Modernizr > 3 现在不再包含用于绑定的 polyfill
2021-04-17 02:04:12
这个答案既完全错误又有点正确!这是完全错误的,因为 Modernizr 没有提供函数绑定可用性的测试(可能是因为测试就像检查是否一样简单Function.prototype.bind !== undefined)。然而,这有点正确,因为 Modernizr 实际上包含一个函数 bind polyfill 本身!此处包含的详细信息:github.com/Modernizr/Modernizr/issues/478
2021-04-18 02:04:12
如何检查当前浏览器是否使用 Modernizer 本地实现了此功能?
2021-04-19 02:04:12

Internet Explorer 8 及以下版本不支持 Function.prototype.bind。这里的兼容性图表:http : //kangax.github.io/es5-compat-table/

Mozilla 开发者网络为未在本地实现 .bind() 的旧浏览器提供此替代方案:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Function 构造函数是执行此操作的老式方法:

var foo = function(x,y,z){ return Function("x,y,z","return Math.max.call(this, x, y, z)")(x,y,z) }
 
var bar = function(x,y,z){ return Function("x,y,z","return Math.min.call(this, x, y, z)")(x,y,z) }
 
console.log(foo(1,2,3) );
 
console.log(bar(3,2,1) );

参考