Object.create not supported in ie8

问题:

I came across an issue with a plugin that uses object.create in jquery to create a date dropdown. I just noticed in IE 8 that it is throwing an error of:

SCRIPT438: Object doesn't support property or method 'create'

Here is the code:

var dropdateobj = Object.create(dropdatefuncs);
dropdateobj.create(options, this);
$.data(this, 'dropdate', dropdateobj);

What is a good work around for IE8 or more cross browser compatible?

Thanks in advance!

回答1:

If you need Object.create, there are good chances you may need to rely on other es5 features as well. Therefore, in most cases the appropriate solution would be to use es5-shim.

However, if Object.create is the only thing you need and you only use it to purely setup the prototype chain, here's a lightweight poly-fill that doesn't support null as the first argument and doesn't support the second properties argument.

Here's the spec:

15.2.3.5 Object.create ( O [, Properties] )

The create function creates a new object with a specified prototype. When the create function is called, the following steps are taken:

If Type(O) is not Object or Null throw a TypeError exception.

Let obj be the result of creating a new object as if by the expression new Object() where Object is the standard built-in constructor with that name

Set the [[Prototype]] internal property of obj to O.

If the argument Properties is present and not undefined, add own properties to obj as if by calling the standard built-in function Object.defineProperties with arguments obj and Properties.

Return obj.

Here's the lightweight implementation:

if (!Object.create) {
    Object.create = function(o, properties) {
        if (typeof o !== 'object' && typeof o !== 'function') throw new TypeError('Object prototype may only be an Object: ' + o);
        else if (o === null) throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");

        if (typeof properties != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

        function F() {}

        F.prototype = o;

        return new F();
    };
}

回答2:

There are several shims that provide this, including this one.

Note that Object.create can't be perfectly shimmed, though, because amongst other things it can create non-enumerable properties or properties with getters and setters, which you can't do on all pre-ES5 browsers. (You can do getters and setters on some pre-ES5 browsers using proprietary syntax, but not on IE8 I don't believe.) It can only be pseudo-shimmed.

But a pseudo-shim will do for the use-case you've quoted.

Just for completeness, here's a simple version of the part that can be shimmed:

if (!Object.create) {
    Object.create = function(proto, props) {
        if (typeof props !== "undefined") {
            throw "The multiple-argument version of Object.create is not provided by this browser and cannot be shimmed.";
        }
        function ctor() { }
        ctor.prototype = proto;
        return new ctor();
    };
}

回答3:

This will make Object.create() work in IE 8.

I tried the shim/sham but that didn't work for me.

if (typeof Object.create !== 'function') {
 Object.create = function(o, props) {
  function F() {}
  F.prototype = o;

  if (typeof(props) === "object") {
   for (prop in props) {
    if (props.hasOwnProperty((prop))) {
     F[prop] = props[prop];
    }
   }
  }
  return new F();
 };
}