JavaScript prototypes and prototype chains

First, the data type
JavaScript's data types can be categorized into basic data types and reference data types.

1. Basic data type (6 types)

• String
• Number
• Boolean
• Null
• Undefined
• Symbol (ES6)

1. Reference data type

• Object

Second, object-oriented programming

1. constructor function
   • The first step in object-oriented programming is to generate objects. As mentioned earlier, objects are abstractions of a single object. Typically, a template is required to represent the common characteristics of a class of objects, and then the object is generated based on the template.
   • The JavaScript language uses the constructor (constructor) as the template for the object. The so-called "constructors" are functions that are specifically used to generate instance objects. It is the template of the object that describes the basic structure of the instance object. A constructor that can generate multiple instance objects that have the same structure.

• A constructor is a normal function, in order to distinguish it from a normal function, the first letter of the constructor name is usually capitalized.

  There are two characteristics of a constructor.

  • The This keyword is used internally in the function body to represent the object instance to be generated.
  • Use the new command to generate the object.

2. New command
The function of the new command is to execute the constructor and return an instance object.

The principle of the new command

1. Creates an empty object as an instance of the object that will be returned.
2. The prototype of this empty object, pointing to the prototype property of the constructor.
3. Assign the empty object to the This keyword inside the function.
4. Begins executing code inside the constructor.

If there is a return statement inside the constructor and a return followed by an object, the new command returns the object specified by the return statement, otherwise the this object is returned.

var Fn=function(){    this.name=‘xxx‘;    this.old=18;}var f1=new Fn();console.log(f1.name);//xxxconsole.log(f1.old);//18

The above code uses the new command to have the constructor FN generate an instance object, which is stored in the variable F1. This newly generated instance object, from the constructor FN, gets the name and the old property. When the new command executes, this inside the constructor represents the newly generated instance object, and THIS.name and This.old are properties of the instance object.

var Fn2=function(){    name=‘xxx‘;    old=18;}var f2=new Fn2();console.log(f2.name);//undefinedconsole.log(f2.old);//undefinedf2.name=‘yyy‘;console.log(f2.name);//yyy

Three, prototype and prototype chain

An object is created by a function, but a function is an object. is also a collection of properties that can be customized for a function.
Each function has a property called prototype.
The property value of this prototype is an object, the default is only a property called constructor, pointing to the function itself.

var Fn=function(){    this.name=‘xxx‘;    this.old=18;}

Back to the second of the principles of the new command above, you can see the prototype of the object from this diagram, pointing to the prototype property of the constructor.

f1.__proto__The prototype property that points to the constructor is the prototype of the object. Sof1.__proto__===Fn.prototype为true

The property value of prototype is an object, and the default is only a property called constructor, which points to the function itself.

The left is the FN function, and the right is its prototype.

The results you see above are f1.__proto__===Fn.prototypetrue
__proto__Is the prototype property that points to the constructor, which Fn.prototype is the prototype of the object

That is, each object created by the constructor has a __proto__ property that points to the prototype of the function that created the object.

Based on the above, we get an important formula
var 对象名 = new 函数名()
对象名.__proto__=== 函数名.prototype

Summary

1. 自定义函数.__proto__指向Function.prototype
2. Object.__proto__指向Function.prototypeThatObject.__proto__ === Function.prototype//true

3. Function.__proto__指向Function.prototype: function is also a function, which is an object and has a __proto__ property. Since it is a function, it must be created by functions. So function is created by itself. So its __proto__ points to its own prototype.

4. Function.prototype.__proto__===Object.prototype//true

5. Object.prototype is indeed a special case-its __proto__ points to null

Summarize

1. An object is created by a function, but a function is an object. is also a collection of properties
2. Each function has a property called prototype.
3. The prototype of the prototype object that points to the constructor's property.
4. The property value of prototype is an object, and the default is only a property called constructor, which points to the function itself.
5. Since the prototype is a collection of properties as an object, you can customize the addition of many properties.

In short, here are a few points to remember

1. Object objects are created by function functions.
2. All functions are created by function, which is also the object
3. The important formula

• var 对象名 = new 函数名()
• 对象名.__proto__=== 函数名.prototype

1. The prototype property value of the normal function is an object, and this object has only one property constructor, and there is no __proto__ this property.
2. Function.prototype has __proto__ this attribute
3. Object.prototype.__proto__===nullResult istrue

JavaScript prototypes and prototype chains