JS Object Related methods of the Object

This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Object.getPrototypeOf()

The object.getProtoTypeof method returns the prototype of the parameter Object. This is the standard way to get a prototype object.

var F = function () {};
var f = new F();
Object.getPrototypeOf(f) === F.prototype // true
Copy the code

In the code above, the prototype for instance object F is F.prototype.

The following are prototypes for several special objects.

GetPrototypeOf ({}) === object. prototype // true // Object.prototype is null Function. Prototype Function f() {} Object.getPrototypeOf(f) === Function.prototype // trueCopy the code

Object.setPrototypeOf()

The object. setPrototypeOf method sets the prototype for the parameter Object and returns the parameter Object. It takes two arguments, the first an existing object and the second a prototype object.

var a = {};
var b = {x: 1};
Object.setPrototypeOf(a, b);

Object.getPrototypeOf(a) === b // true
a.x // 1
Copy the code

In the code above, the object. setPrototypeOf method sets the prototype of Object A to Object B, so that A can share b’s properties.

The new command can be emulated using the object. setPrototypeOf method.

var F = function () { this.foo = 'bar'; }; var f = new F(); Var f = object.setProtoTypeof ({}, f.prototype); F.call(f);Copy the code

In the above code, the new command creates an instance object, which can actually be divided into two steps. The first step is to set the prototype of an empty object to the constructor’s prototype property (f.protoType, for example). The second step is to bind this inside the constructor to the empty object, and then execute the constructor so that methods and attributes defined on this (this.foo, for example) are transferred to the empty object.

Object.create()

A common way to generate instance objects is to make the constructor return an instance using the new command. But a lot of times, you can only get one instance object, it might not be generated by the constructor at all, so can you generate another instance object from one instance object?

JavaScript provides the object.create () method to fulfill this requirement. The method takes an object as an argument and returns an instance object based on it. This instance fully inherits the properties of the prototype object.

Var A = {print: function () {console.log('hello'); }}; Var B = object.create (A); Object.getPrototypeOf(B) === A // true B.print() // hello B.print === A.print // trueCopy the code

In the code above, the object.create () method generates an Object B from an Object A. B inherits all of A’s properties and methods.

In fact, the object.create () method can be replaced with the following code.

if (typeof Object.create ! == 'function') { Object.create = function (obj) { function F() {} F.prototype = obj; return new F(); }; }Copy the code

The above code shows that the object.create () method essentially creates an empty constructor F, sets the f. protoType attribute to point to the argument Object obj, and returns an instance of F that inherits obj’s attributes.

The new objects generated in the following three ways are equivalent.

var obj1 = Object.create({});
var obj2 = Object.create(Object.prototype);
var obj3 = new Object();
Copy the code

If you want to generate an Object that does not inherit any attributes (such as the toString() and valueOf() methods), you can set the argument to Object.create() to NULL.

var obj = Object.create(null);

obj.valueOf()
// TypeError: Object [object Object] has no method 'valueOf'
Copy the code

In the above code, the Object obj has a null prototype and does not have some of the properties defined on the object.prototype Object, such as the valueOf() method.

When using the object.create () method, you must provide an Object prototype, that is, the argument cannot be empty or is not an Object, otherwise an error will be reported.

Object.create()
// TypeError: Object prototype may only be an Object or null
Object.create(123)
// TypeError: Object prototype may only be an Object or null
Copy the code

The object.create () method generates a new Object that dynamically inherits the prototype. Any method added or modified to the prototype is immediately reflected in the new object.

var obj1 = { p: 1 };
var obj2 = Object.create(obj1);

obj1.p = 2;
obj2.p // 2
Copy the code

In the code above, modifying the object stereotype obj1 affects the instance object obj2.

In addition to the Object’s prototype, the object.create () method can take a second argument. This parameter is a property description object, and the properties it describes are added to the instance object as properties of the object itself.

var obj = Object.create({}, { p1: { value: 123, enumerable: true, configurable: true, writable: true, }, p2: { value: 'abc', enumerable: true, configurable: true, writable: true, } }); Var obj = object.create ({}); obj.p1 = 123; obj.p2 = 'abc';Copy the code

The object.create () method generates an Object that inherits the constructor of its prototype Object.

function A() {}
var a = new A();
var b = Object.create(a);

b.constructor === A // true
b instanceof A // true
Copy the code

In the code above, object B is prototyped from object A and therefore inherits its constructor, a.

Object.prototype.isPrototypeOf()

The isPrototypeOf method of an instance object that determines whether the object is a prototype of a parameter object.

var o1 = {};
var o2 = Object.create(o1);
var o3 = Object.create(o2);

o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true
Copy the code

In the code above, o1 and O2 are both prototypes of O3. This indicates that the isPrototypeOf method returns true whenever the instance object is on the prototype chain of the parameter object.

Object.prototype.isPrototypeOf({}) // true
Object.prototype.isPrototypeOf([]) // true
Object.prototype.isPrototypeOf(/xyz/) // true
Object.prototype.isPrototypeOf(Object.create(null)) // false
Copy the code

In the above code, because Object.prototype is at the top of the prototype chain, it returns true for all instances except for objects that inherit directly from NULL.

Object.prototype.__ proto __

Instance object’s __proto__ property (two underscores before and two underscores behind), returns the prototype of that object. This property is read and write.

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true
Copy the code

The code above sets the p object to be the prototype of the obj object via the __proto__ attribute.

According to the language standard, the __proto__ attribute is deployed only by browsers, and other environments may not have it. The underlining indicates that it is essentially an internal property and should not be exposed to the user. Therefore, use this property as little as possible, and instead use Object.getProtoTypeof () and Object.setProtoTypeof () for reading and writing prototyped objects.

The prototype chain can be represented intuitively by __proto__.