JavaScript objects, functions, and inheritance _ javascript skills

JavaScript can be said to be an object-based programming language. Why is it object-based rather than object-oriented? Because JavaScript itself only implements encapsulation without inheritance and polymorphism. 1. Objects in Javascript
JavaScript can be said to be an object-based programming language. Why is it object-based rather than object-oriented? Because JavaScript itself only implements encapsulation without inheritance and polymorphism. Since it is object-based, let's talk about objects in js. Some people say that all JavaScript objects are objects. This sentence is not completely correct. The correct one is that he emphasizes the importance of objects in js, and objects are everywhere in js, including functions that can construct objects. On the other hand, js also has some simple data types, including numbers, strings and boolean values, null values, and undefined values, which are not objects. So why are these types of values not objects? After all, they also have methods. Let's take a look at the two definitions of objects in JavaScript.
(1) objects in JavaScript are variable keyed collections (this definition comes from chapter 3 of the old book)
(2) objects in JavaScript are unordered attribute sets. These attributes can contain simple data types, objects, and functions; A function stored in an object property is also called a method of this object. (4.3.3 from ECMA-262) (Note: The properties mentioned here can be created and accessed in js scripts (we call them explicit properties), excluding internal properties automatically assigned to the object by the System)
Why is that simple data type not an object? It is mainly because the methods in the values of these data types are immutable, and the attributes of an object should be changeable.
2. prototype chain in the object [[proto]
When each object in JavaScript is created, the system automatically assigns a prototype attribute [[proto] to connect to its prototype object. In JavaScript, [[proto] of each object is used to implement the object inheritance relationship. However, the [[proto] attribute of an object cannot be accessed or modified in JavaScript. It exists as an internal attribute, it is automatically set by the system when the object is created.
When accessing a certain attribute of an object, if this attribute does not exist in this object, it will be searched for in the property of the prototype object referred to by its [[proto]. If it is found, it will be returned, otherwise, the [[proto] link will continue until the [[proto] connection is null.
3. functions are also objects
In JavaScript, a function itself is an object (so we often call it a function object), and it can be said that it is the most important object in js. It is called the most important object. On the one hand, it can assume the same role as a function in other languages, can be called, and can be passed in parameters; on the other hand, it is also used as the constructor of the object, and can be used together with the new operator to create the object.
Since a function is an object, it must contain all the properties of the object, including the [[proto] attribute of the prototype chain set during object creation.
Let's take a look at the differences between function objects and common objects. As we have mentioned before, an object is a disordered set of attributes. What are the differences between the attributes of a function and that of a common object. As described in section 13.2 In the ECMA-262, when a function object is created, two properties [[call] and [[constructor] are created by default for it, when a function object is called as a common function (for example, myFunc (), the "()" operator specifies that the [[call] attribute of the function object is executed, when he is called as a constructor (such as new myConst (), his [constructor] attribute is executed, we will introduce the execution process of [[cosntructor] in the next section. In addition, when a function is created, the system creates a display attribute prototype for it by default and assigns it a value
This. prototype = {constructor: this}
You can take part in chapter 5 of the old book. The prototype attribute of this function object is also prepared for js to regard the function as the constructor for inheritance, but this attribute can be accessed and modified in the js script. One point to emphasize here is that you must distinguish between the [[proto] attribute in the object and the prototype attribute in the function object, at the beginning, I learned a lot of detours because I didn't distinguish these two things.
4. Object Creation
In js, there are two methods to create objects. One is implemented by literal, as shown in figure
Var Person = {
"First_name": 'liang ',
'Last _ name': 'yang'
}
Another method is to create a constructor.
Var my = new Person ('liang ', 'yang ');
In fact, the first method of creation is equivalent to calling the Object constructor, as shown below.
Var Person = new Object ();
Person. first_name = 'liang ';
Person. last_name = 'yang'
Therefore, we can combine the creation of all objects in js to use the constructor for implementation. Below I will explain in detail the process of creating objects in the constructor:
The first step is to create an empty object (without any attributes) and point the [[proto] of this object to the prototype attribute object of this constructor function.
Step 2: Pass the empty object as the this pointer to the constructor function and execute
Step 3: If the above function returns an object, this object is returned; otherwise, the object created in step 1 is returned.
Step 4: Use a function as a class
We can see from the above steps that the prototype of the function object generally points to a common object rather than a function object, the owner of this common object can also be accessed in the object created by this function constructor. Therefore, we can design our code in this way. Assume that a function can represent a class. The object generated by this constructor function is the instance object of this class, the attributes and methods in the instance object should be placed in the prototype of the constructor function, and the static methods of this class can be directly put into this function as the attributes of the object, finally, this function is the constructor we usually call in object-oriented language (here we need to distinguish between the connected words "constructor" and "constructor function ", the so-called constructor refers to the constructor of classes in common object-oriented languages, while the constructor function refers to a function in javascript that is used as a constructor ).
In section 3rd, we said that each function's prototype object always contains a constructor attribute, which is connected to our function itself. In addition, the [[proto] attribute of each object generated by this function points to the prototype object of the constructor function. Therefore, through the [[proto] chain, each object generated by the constructor function has a constructor attribute pointing to generating its constructor function, therefore, we can use this attribute to determine which constructor function is generated for this object.
5. Function inheritance (class inheritance)
After talking about this, we can finally discuss inheritance in javascript. Let's first consider what we have to do to implement class inheritance, suppose we want to inherit from superClass to subClass
To enable subClass to access attributes of objects generated by superClass, subClass. prototype can be used as an object generated by a superClass constructor.
Subclass. prototye = new superClass ();
But the problem arises. According to the new superClass () We mentioned in section 4th, not only superClass is copied. all methods in prototype, and the superClass () function is also run. This function serves as the constructor in the class. We know that the constructor of the parent class should be called in the constructor of the subclass to implement initialization. Therefore, we can create a constructor that is empty, but the prototype is the same as that of the superClass prototype, and point subClass. prototype to the object generated by this function.
Var F = function (){};
F. prototype = superClass. prototype;
SubClass. protptype = new F ();
In this way, we can copy attributes without calling the constructor. However, there is another problem, that is, we modified the prototype attribute of subClass and deleted the constructor attribute. In this way, we cannot know which constructor function generates the object. We can assign another value to him.
SubClass. prototype. constructor = subClass;
This solves the problem of copying attributes. But the new problem arises again. In subClass, we cannot know which constructor is its parent class, so we cannot call the constructor of the parent class in the constructor, therefore, we can add an attribute for subClass to indicate its parent class.
SubClass. superClass = superClass. prototype;
In this way, we can use subClass. superClass. constructor In the constructor of the subClass to access the constructor of the parent class. Finally, we will write the above ideas into a function.
MyPro. extend = function (subClass, superClass ){
Var F = function (){};
F. prototype = superClass. prototype;
SubClass. protptype = new F ();
SubClass. prototype. constructor = subClass;
SubClass. superClass = superClass. prototype;
SuperClass. prototype. constructor = superClass;
}