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

时间:2012-06-15 16:13:03

标签: javascript internet-explorer-8 cross-browser bind backwards-compatibility

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

由于我使用Firefox开发WinXP,有时使用IE 9或10在Win7中进行测试,因此我没有注意到或注意IE8及以下版本不支持bind这一事实。

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

是否有标准的解决方法?

我在JavaScript中表现得很好,但我仍然有点像菜鸟。如果解决方案完全明显,请原谅我。

4 个答案:

答案 0 :(得分:49)

此页面上有一个很好的兼容性脚本: 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;
  };
}

答案 1 :(得分:4)

最佳解决方案可能是安装Modernizr

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

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

答案 2 :(得分:2)

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

答案 3 :(得分: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) );

<强>参考