JavaScript learning notes-prototype inheritance

JavaScript is a prototype-based programming language that does not contain built-in class implementations. However, you can use Javascript to simulate a class.

Class
There are constructors and New operators in JavaScript. Constructor is used for instance objects and initialization attributes. Any JavaScript function can be used as a constructor. The constructor must use the new operator as the prefix to create a new instance.

JavaScript can directly use function functions to simulate a class.

1
Var Person = function (name ){
2
This. name = name;
3
}
4
 
5
// Instantiate Person
6
Var alice = new Person ('Alice ');
7
Console. log (alice. name );
Note the this keyword. The new operator changes the execution context of the function and the return behavior. When the new operator is used to call the constructor, execute context this to program an empty context from the global object. this context represents the new instance. Therefore, this points to the currently created instance.

So undefined will appear during code execution.

1
Var bob = Person ('bob ');
2
Console. log (bob. name );
Prototype
JavaScript itself is a prototype-based programming language. Its role is to differentiate classes and instances.

01
Var Animal = function (){}
02
 
03
Animal. run = function (){
04
Console. log ('animal run ')
05
}
06
 
07
Animal. prototype. breath = function (){
08
Console. log ('animal breath ');
09
}
10
 
11
Var Dog = function (){}
12
 
13
// Dog inherits from Animal
14
Dog. prototype = new Animal ();
15
 
16
Dog. prototype. wag = function (){
17
Console. log ('dog wag ');
18
}
19
 
20
Var dog = new Dog ();
21
Dog. wag ();
22
Dog. breath (); // inherited attributes
Output:

1
Dog wag
2
Animal breath
The methods or attributes defined by prototype of the class can be called the methods or attributes of all instances. Other methods and attributes are the methods and attributes of the class, which are similar to static variables in the java class.

Here is an agreement on the naming of the following things

Usually according to personal habits

Constructor/anonymous Function

1
Var Person = function (name ){
2
This. name = name;
3
}
Functions/classes

1
Function Person (){}
Object/instance

1
Var person = {name: 'hangsan', sex: 'male '}
What is prototype inheritance?
Let's make some changes to the Animal and Dog examples above.

01
Var animal = {
02
Breath: function () {console. log ('animal breath! ')},
03
};
04
 
05
Var Dog = function (){}
06
 
07
// Dog inherits from animal
08
Dog. prototype = animal;
09
 
10
Dog. prototype. wag = function (){
11
Console. log ('dog wag ');
12
}
13
 
14
Var dog = new Dog ();
15
Dog. wag ();
16
Dog. breath (); // inherited attributes
The result is the same as the preceding one.

In an example, we use Dog. prototype = new Animail; in this example, we use Dog. prototype = animal.

The difference is that Animal in the first example is an anonymous class. by calling the new operator to call its constructor, an animal instance is returned, in the second example, animal itself is already an instance/object. This is the role of the new operator.

Therefore, if a class needs to inherit from another class, it needs to inherit the instance of that class instead of the class itself (Function). Of course, we can try to use Dog directly. prototype = Animal, and the result is when dog is called. breath (); directly returns a Function object, which cannot fulfill the meaning of shared attributes.

A prototype object is a "template". attributes defined on the prototype are used to initialize a new object. Any object can be used as a prototype object of an object to share attributes.