Prototype and prototype chain of JavaScript interview and examination center

Time:2021-12-9

1. JavaScript prototype and prototype chain

1) Prototype

JavaScript is a prototype based language, that is, each object has a prototype object. When we try to access the properties of an object, we search not only the object, but also the prototype of the object and the prototype of the object prototype, and search layer by layer until we find or reach the end of the prototype chain.

These properties and methods are defined on the prototype property of the constructor function of the object, not the instance itself.

Functions can have properties.Each function has a special attribute called prototype.

a. EachFunction data type(ordinary functions and classes) have a self-contained attribute: prototype, and this attribute is the value of an object data type.

b. And on prototype, the browser adds a property constructor (constructor) to it, and the property value is the current function (class) itself;

c. EachObject data type(common object, instance, prototype) also comes with an attribute__ proto__, The property value is the prototype of the class to which the current instance belongs.

Prototype and prototype chain of JavaScript interview and examination center

Prototype and prototype chain of JavaScript interview and examination center

The prototype object has its own property constructor, which points to the function. The diagram is as follows:

Prototype and prototype chain of JavaScript interview and examination center

2) Prototype chain

When accessing a property of an object, it will first look up the property of the object itself. If it is not found, it will be deleted__ proto__ Find it on the implicit prototype, that is, the prototype of its constructor. If it is not found, it will be found in the prototype of the constructor__ proto__ In this way, layer by layer upward search will form a chain structure, which is called prototype chain.

Prototype and prototype chain of JavaScript interview and examination center

Prototype and prototype chain of JavaScript interview and examination center

The constructor person exists, and the prototype object is person prototype;

Constructor to generate the instance object person, person’s__ proto__ Point to the constructor person prototype object;

Person. prototype.__ proto__ Point to the built-in object because {person Prototype , is an object. By default, it is created by the , object function as a class, while , object Prototype} is a built-in object;

Person.__ proto__ Point to the built-in anonymous function, because person is a function object, which is created by function as a class by default.

Function. Prototype and function__ proto__ At the same time, it points to the built-in anonymous function anonymous, so that the end point of the prototype chain is null.

Summary:

__ proto__ Relationship with prototype:__ proto__ And constructor areobjectUnique. The prototype property isfunctionExclusive

__ proto__ As a bridge between different objects, it is used to point to the prototype object of the constructor that created it.

Prototype and prototype chain of JavaScript interview and examination center

Per object__ proto__ All point to the prototype object prototype of its constructor;

Prototype and prototype chain of JavaScript interview and examination center

The constructor is a function object, which is generated by the} function constructor;

Prototype and prototype chain of JavaScript interview and examination center

The prototype object itself is an ordinary object, and the constructor of ordinary objects is object;

Prototype and prototype chain of JavaScript interview and examination center

All constructors are function objects, which are generated by {function construction;

Prototype and prototype chain of JavaScript interview and examination center

The prototype object of object also has__ proto__ Property points to null, which is the top of the prototype chain.

Prototype and prototype chain of JavaScript interview and examination center

a. All objects inherit from the object object. The object {object directly inherits the root object null

b. All function objects (including {object} objects) inherit from} function} objects

c. Object} objects inherit directly from} function} objects

d. Function object__ proto__ It will point to its own prototype object and eventually inherit from the object object

Prototype and prototype chain of JavaScript interview and examination center

Examples__ proto__ === prototype

Prototype Constructor = = = constructor

Constructor Prototype = = = prototype

JS method for obtaining prototype:

p.proto

p.constructor.prototype

Object.getPrototypeOf(p)

Think: number prototype. constructor === Number. Are constructor results equal?

Prototype and prototype chain of JavaScript interview and examination center

The answer is not equal. becauseNumber.prototype.constructor You are looking for the constructor on your {number} prototype.Number isIf there is no constructor attribute, the prototype chain will be__ proto__ Look up the prototype of the upper class (here is the function), and the constructor of the function points to function. So it’s different.

2. JudgeDoes the property inherit from the prototype chain

On object prototype in JavaScriptHasownproperty () is used to determine whether a property is defined in the object itself rather than inherited from the prototype chain.

Prototype and prototype chain of JavaScript interview and examination center

Because JavaScript does not take hasownproperty as a sensitive word, we are likely to name a property of the object as hasownproperty. In this way, we can no longer use the hasownproperty method of the object prototype to judge whether the property comes from the prototype chain.

Prototype and prototype chain of JavaScript interview and examination center

Then we need to use the real hasownproperty method on the prototype chain

Prototype and prototype chain of JavaScript interview and examination center

3. Property traversal method

Object. Keys() methodWill return aAn array of property names that can enumerate their own properties, excluding properties inherited from the prototype and properties that cannot be enumerated.

Reflect.ownKeys()returnAll ownedProperty key, whether enumerable or not, butExcludes properties inherited from the prototype

for inIt is mainly used to traverse the objectEnumerable propertiesIncluding self owned attributes and attributes inherited from the prototype

Object. Assign() / / ignore the attribute whose enumerable is false, and only copy the enumerable attributes of the object itself.

Prototype and prototype chain of JavaScript interview and examination center

Use object The defineproperty () method sets enumerable, object The defineproperty (obj, prop, descriptor) method has three parameters

Obj: target object

Prop: target attribute, string

Descriptor: the behavior of the target attribute, which is placed in the object

If enumerable is true, it means enumerable; if enumerable is false, it means enumerable;

Prototype and prototype chain of JavaScript interview and examination center

Each object has a propertyisenumerable () method, which can determine whether the specified property is enumerable. The propertyisenumerable method is only valid for the properties of the object itself (added by the object itself and instantiated by the constructor), but not for the inherited properties on the prototype.

obj. Propertyisenumerable (“property name”);

1) This property must belong to the instance and not to the prototype.

2) This property must be enumerable.

3) If the object does not have the specified property, the method returns false

Prototype and prototype chain of JavaScript interview and examination center

4. Understanding of new

The new operator is used to create an instance object of a given constructor.

New process:

a. Create a new object obj;

b. Connect the object and the construction function through the prototype chain;

c. Bind this in the build function to the newly created object obj;

d. Judge according to the return type of the build function. If it is the original value, it will be ignored. If it is the return object, it needs to be handled normally. (After the new keyword is executed, an object will always be returned, either an instance object or an object specified in the return statement

Prototype and prototype chain of JavaScript interview and examination center

When the constructor returns an object unrelated to this at last, the new command will directly return the new object instead of the this object generated by the new execution step.

Prototype and prototype chain of JavaScript interview and examination center

However, it is required that the constructor must return an object. If the returned object is not an object, the newly generated object will be returned according to the implementation steps of new.

Prototype and prototype chain of JavaScript interview and examination center

Handwritten NEW

a. Use object Create points the proto of obj to the prototype of the constructor;

b. Use the apply method to point this in the constructor to obj;

c. When create returns, the ternary operator is used to determine the returned result.

If the constructor has an explicit return value and the return value is an object type, the return result of the constructor is no longer the target instance

Prototype and prototype chain of JavaScript interview and examination center

5. Inherit

Prototype and prototype chain of JavaScript interview and examination center

1) Prototype inheritance

Directly let the prototype object of the child class point to the parent class instance. When the child class instance cannot find the corresponding properties and methods, it will find its prototype object, that is, the parent class instance, so as to inherit the properties and methods of the parent class.

Disadvantages:It is inherited by chain. It is a reference type. It is not a copy,The modification of the instance property of the reference replica will inevitably lead to the modification of the instance property of other replicas.

Prototype and prototype chain of JavaScript interview and examination center

2) Call inheritance (constructor inheritance)

Constructor inheritance, that is, execute the constructor of the parent class in the constructor of the child class, bind the this of the child class, and let the constructor of the parent class hang the member properties and methods to the this of the child class, which can not only avoid sharing a prototype instance between instances, but also pass parameters to the constructor of the parent class.

Copy one. Each instance of the subclass gets a copy of the constructor, which belongs to value passing. Therefore, the property modification between subclasses is irrelevant and has nothing to do with the parent class.

Disadvantages: you cannot inherit the properties and methods on the parent class prototype.

Prototype and prototype chain of JavaScript interview and examination center

3) Combinatorial inheritance

Prototype inheritance + call inheritance. In the constructor of a subclass, pass parent Call (this) inherits the properties of the parent class, and then changes the prototype of the child class to new parent () to inherit the functions of the parent class.

Prototype and prototype chain of JavaScript interview and examination center

Disadvantages:Each time a subclass instance is created, the constructors (parent. Call() and new parent()) are executed twice. Although this does not affect the inheritance of the parent class, when a subclass creates an instance, there will be two identical properties and methods in the prototype

4) Parasitic combinatorial inheritance

In order to solve the problem that the constructor is executed twice every time a subclass instance is created, only the private ones are taken, and call is used. Shared only takes shared, using object Create().

Prototype and prototype chain of JavaScript interview and examination center

Recommended Today

[fluent 3-5] advanced tutorial of fluent – using Lottie animation in fluent

By VladSource Vlad (official account: fulade_me) Lottie animation In mobile development, we always need to show some animation effects. As programmers, we are not very good at animating with code. Even if some animations can be realized, the animation will be displayed differently in various platforms due to the differences of APIs in the process […]