`Object.create()`Analysis and Implementation


Role of the Object.create() method : Create a new object that uses an existing object to provide the u proto_u of the newly created object (returns a new object with the specified prototype object and attributes).


By default, the implicit prototype u proto_u of an object in js points to its constructor's display prototype (which in this case points to the relationship between attributes and values)

// Literal Create Object
let obj1 = {}
obj1.__proto__ === Object.prototype; // true

// Built-in constructors create objects.Equivalent to new Object();
let obj2 = Object();
obj2.__proto__ === Object.prototype; // true

// Custom constructor to create instance object
let Ctr = function(){};
let obj3 = new Ctr();
obj3.__proto__ === Ctr.prototype; // true

Objects created by the Object.create() method can be implicitly prototyped as a function or object.

// First customize a constructor and initialize an instance object.
function Base(){
    this.name = 'cuixiaodao'
Base.prototype.say = function (){

var base = new Base();

// Create a new object specifying that its implicit prototype is Base
var o1 = Object.create(Base);
o1.__proto__ === Base; // true

// Create a new object, specifying its implicit prototype as base
var o2 = Object.create(base);
o2.__proto__ === base; // true


As you can see, the main logic of the Object.create method is to create an object, manually set its implicit prototype_u proto_u property as an incoming parameter, and then return the object.

This makes the implementation easier.However, the Object.create() method also accepts the second parameter, which is used to add enumerable attributes to newly created objects, just like the second parameter of the Object.defineProperies method.


Here, on the principle of understanding the main process of the Object.create method, we briefly implement its main function without considering the second parameter.

function _create(paramProto){
     var isObject = (typeof paramProto === 'object') || (typeof paramProto === 'function');
     var isUndefined = typeof paramProto === 'undefined';
     if (isUndefined || !isObject){
         throw new TypeError('Object prototype may only be an Object or null: ' + paramProto)
     function F() { }
     F.prototype = paramProto;
     return new F();

The last three lines of code above return an instance object of F, temporarily referred to as f, which is f. u proto_== F.prototype, and F.prototype = paramProto, which is f. u proto_=== paramProto.

It can also be understood as

function _create(paramProto) {
    return {
        __proto__: paramProto


Object.create() parameter is the difference between object and function

Customize a constructor and instantiate it, creating o1 and o2 objects with 1Object.create(), respectively.

function Base() {
    this.name = 'cuixiaodao'
Base.age = '18';
Base.prototype.say = function () {
    console.log(`1:`, 1);

let base = new Base();

let o1 = Object.create(Base);
var o2 = Object.create(base);

You can see that the implicit prototype of o1 is Base, and the implicit prototype of o2 is baese

o1.__proto__ === Base; // true
o2.__proto__ === base; // true

o2 can access the name property on the base and the base's say method inherited from u proto_.

o2.name;  // cuixiaodao
o2.say(); // 1

But neither o1 is accessible

o1.name;  // 'Base'
o1.say;  // undefined

The function has its own name attribute, which is the name of the function, so the name of the function Base is returned here.Similarly, length denotes the number of function parameters, and arguments denotes all parameters received by the function.

Mainly because prototype chain inheritance is achieved through the u proto_u property of an object: when accessing an object's properties, first look in the basic properties, if not, then look up along the u proto_u chain, which is the prototype chain.Although o1. u proto_u === Base, the say method is undefined because it is defined on the Base prototype and is not accessible through o1. u proto_.O1 is accessible by defining attributes directly on Base.

o1.age; // 18

Object.crete(null) and {}

Object.crete(null) returns a pure object and does not inherit methods such as toString, valueof, and so on, which have built-in Objects.

Reference resources

How the new operator and Object.create() work in JavaScript
new Operator, Bid, Object.create Implementation Principle
Explain the differences between Object.create(null) and new

Keywords: Javascript Attribute

Added by jimdidr on Sat, 28 Sep 2019 11:17:30 +0300