What does object.create do?

The object.create () method creates a new Object, using an existing Object to provide the __proto__ of the newly created Object.

Object.create(proto, [propertiesObject])

  • Proto: the prototype object for the newly created object
  • PropertiesObject: Optional. The enumerable property to be added to the new object (the newly added property is its own property, not a property on its prototype chain)
const obj = Object.create(Object.prototype, {
  // Foo will become the data attribute of the newly created object
  foo: {
    writable: true.configurable: true.value: "this is foo",},// Bar becomes the accessor property of the created object
  bar: {
    configurable: false.get: function () {
      return 10;
    },
    set: function (value) {
      console.log("Setting to ", value); ,}}});Copy the code

Object. The create and {… }?

const o = {};
Copy the code

Let’s start with the common {} object

It has no properties, but its prototype Object __proto__ inherits methods from Object,

Take a look at the Object created by object.create ()

const o = Object.create(null);
Copy the code

An Object created by object.create (null) that does not have any properties

Take a look at the Object created by object.create ({})

const o = Object.create({});
Copy the code

This is because the {} instance also inherits the object. prototype method from __proto__. __proto__ === object. prototype is correct here.

Usage scenarios?

  • Create a pure objectObject.create(null), you can define the method you want, such astoString 等
  • Make a copy of the method of the target object and then modify your own object to avoid the source objectObject.create(Array.prototype)
For example, Vue source in the processing of array response, the array method has been modified, is usedObject.create;

const arrayProto = Array.prototype; Create a new array object and modify its array methods to prevent contamination of the native array methods.const arrayMethods = Object.create(arrayProto)
[("push"."pop"."shift"."unshift"."splice"."sort"."reverse")].forEach(
  (method) = > {
    /* Cache the array's native methods and call */ later
    const original = arrayProto[method];
    def(arrayMethods, method, function mutator() {
      // avoid leaking arguments:
      // http://jsperf.com/closure-with-arguments
      let i = arguments.length;
      const args = new Array(i);
      while (i--) {
        args[i] = arguments[i];
      }
      /* Call the native array method */
      const result = original.apply(this, args);

      /* Insert into the array, and you need to observe again. */
      const ob = this.__ob__;
      let inserted;
      switch (method) {
        case "push":
          inserted = args;
          break;
        case "unshift":
          inserted = args;
          break;
        case "splice":
          inserted = args.slice(2);
          break;
      }
      if (inserted) ob.observeArray(inserted);

      // notify change
      Dep notifying all registered observers to respond */
      ob.dep.notify();
      returnresult; }); });Copy the code

How to implement an object.create

Create is an ES6 method. ES5 and below are not available, so you need to implement a polyfill.


Object.create = (proto, propertiesObject) = > {
  // If the attribute is null, throw an exception
  if (propertiesObject === null) throw 'TypeError'
  function F () {}
  // Specify the prototype object
  F.prototype = proto
  const o = new F()
  // Here is the second option to add properties
  if (typeofpropertiesObject ! = ='undefined') {
    Object.defineProperties(o, propertiesObject)
  }
  // If proto is null, we need to remove __proto__ and implement a clean map
  if (proto === null) o.__proto__ = null
  // Return the new object
  return o
}

Copy the code