如何处理IE 8缺乏JavaScript Object.bind()方法的问题

Question

如何处理IE 8缺乏JavaScript Object.bind()方法的问题

javascriptinternet-explorer-8cross-browserbindbackwards-compatibility

26

我正在编写一些使用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。

这个脚本没有使用canvas，所以我有点犹豫是否放弃所有的IE 8用户。

是否有标准的解决方法？

我在JavaScript方面还算可以，但我还是一个新手。如果解决方案非常明显，请原谅我。

- Claude

@micha，是的，缺失：

不支持以下文档模式：Quirks、Internet Explorer 6 标准、Internet Explorer 7 标准、Internet Explorer 8 标准。

- Alexander

4个回答

4

最好的解决方案可能是安装Modernizr。

Modernizr可以告诉您当前浏览器是否本地实现了此功能，如果没有，它还提供了一个脚本加载程序，因此您可以在旧浏览器中拉取polyfill以回填功能。

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

- antonjs

如何使用Modernizer检查当前浏览器是否本地实现了此功能？ - dragonfly

3

这个答案既有对又有错！它的错误在于 Modernizr 并没有提供一个测试函数绑定可用性的方法（可能是因为这个测试很简单，只需检查 Function.prototype.bind !== undefined 即可）。然而，它的部分正确之处在于 Modernizr 实际上包含了一个函数绑定 polyfill！关于它的包含细节可以看这里：https://github.com/Modernizr/Modernizr/issues/478 - WickyNilliams

现代浏览器检测库 Modernizr > 3 不再包含 bind 的 polyfill。 - gunnx

2

Function.prototype.bind在Internet Explorer 8及以下版本中不受支持。兼容性表在此处：http://kangax.github.io/es5-compat-table/

Mozilla Developer Network为那些没有原生实现.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;
  };
}

- Karl Glennon

0

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

参考资料

- Paul Sweatte

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alexwells · Accepted Answer

这个页面有一个很好的兼容性脚本： https://developer.mozilla.org/zh-CN/docs/Web/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;
  };
}