[toc]
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).
Analysis
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 (){ console.log(`1:`,1); } 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
Figure:
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.
Realization
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 } }
Check
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); console.log(`o1:`,o1); console.log(`o2:`,o2);
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