Quickly understand JavaScript object-oriented programming-prototype inheritance

In general, the JS language is the façade to the object programming language, the concept of objects almost throughout the whole JS learning.

Object

　Two ways to create objects: (to generate an object instance you must call the constructor)

1. var obj = {name: "Jer", age:12}; (The preset object () constructor is called inside JS)

Access: alert (obj.name);//"Jer"

Alert (obj["name"]);//"Jer"

2. var obj = new Object ();

Obj.name= "Jer";　　　

Printing results:

　　　　　　　　

1> These are the prototype object properties and methods that are traversed through the prototype chain.

2> prototype specifies which object (instance) The instance of this constructor inherits

3> obj. Object.prototype can access the properties under this inherited object

4>_proto_: The prototype link, which is the attribute of the instance. Its value is determined by prototype, and modifying the value of prototype can manipulate the direction of the prototype chain.

Focus on the second approach:

var obj = new Object ();

Object () is a constructor

Obj is an instance of this constructor

This constructor can also have more instances: var obj1 = new Object (); var obj2 = new Object ();

Features of Obj1 and Obj2:

1, together inherit the object () This constructor method and properties (object is the basic type of all objects. So that's why many objects have a common inheritance attribute);

　　　　　　　　　　

2. modifying the properties of the constructor of a obj1 instance does not affect that property of Obj2 ( the property obtained from the constructor becomes the property of the instance, modifies the attributes on each instance, and does not affect each other )

　　　　　　　　　　　　　

3, they have a common prototype object: Object.prototype

　　　　　　　　　　　　

　　　　　　　　　　4. Modifying Obj1 's prototype properties does not affect OBJ2

　　　　　　　　　　

　　　　　　　　　　5, the prototype method of this point to the constructor of the instance object

　　　　　　　　　　

　　　　　　Better Understanding by Printing:

　　　　　　　　

　　　　　　　Printing results:

　　　　　　　　

The first prototype chain points to the prototype object of per, which consists of two properties and an inherited prototype object, which is an object instance (also the property and method of the object constructor) .

　　　　　　Per.prototype.constructor returns the constructor, Per1.prototype returns undefined because prototype is the property of the constructor

constructor is a property of a prototype object that is used to point to a constructor

There is also a way to encapsulate the prototype object properties, which is a rewrite of the prototype object:

　　　　　　　　　　

　　　　　　　　　　in the instance to add this notation, the instance does not access the properties of the prototype object

The following example is an instance created before overriding a prototype object:

　　　　　　　　

Print

　　　　　　　　　　

　　　　　　　　　　Because the instance does not give the attribute, it looks up directly to the properties of the constructor that are printed, including the properties defined within the constructor and the properties on the prototype chain

Expand

　　　　　　　　　　

　　　　　　　　　　The properties on the prototype chain have prototype object properties name and built-in properties constructor (point to constructor) and an inherited object instance

constructor refers to a constructor that contains the properties of the function itself and the redefined prototype object (prototype property) . The prototype object should be re-encapsulated on the prototype chain, and the new prototype object will inherit object

Focus: Back two printed all return undefined

The first undefined is because the instance is defined before the overridden prototype object, overriding the prototype object means cutting off the connection between the instance and the original prototype, and the instance inherits the properties of the new prototype object

The second undefined is because prototype is the property of the constructor

overriding: Placing a new instance under the overridden prototype object

　　　　　　　　

　　　　　　　Print:

　　　　　　　　　　

　　　　　　　　　Because the instance is defined after overriding the prototype object, the instance has access to the properties in the new prototype object. Another interesting thing is that this instance inherits the constructor of the prototype inside only the overridden prototype object's properties, per.prototype.name= "cuz";

　　　　　　　　If an instance can inherit a prototype object that encapsulates a constructor, its prototype property is only in this object

Deep understanding of constructors:

Let's look at an example:

　　　　　　

Print

　　　　　　　　

　　　The knowledge points extracted from the above examples are:

　　　　　　　　1. The newly created property with the constructor name is not used.

2, set the properties of the prototype function statement inside the function or outside the same effective

3. Instance new attribute placement is also accessed after the instance is created (because it is a global property, although the Start method is called after the first printed instance)

　　　　　

These knowledge frameworks do not matter object, object contains attribute method, this property method also contains object, Object ... Each property method has a different knowledge structure, and then various access calls a variety of features, composed of JS programming a large network, do not forget that the function is actually an object. Constructors are not distinguished from other functions, but are used to generate object instances.

　　　　　　

　　　　　　

　　　　　　　　

　　　　　　　　

　　　　

Quickly understand JavaScript object-oriented programming-prototype inheritance