Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand objects and prototype chains and function inheritance in JavaScript". In daily operations, I believe many people have doubts about how to understand objects and prototype chains and function inheritance in JavaScript. I have consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to understand objects and prototype chains and function inheritance in JavaScript". Next, please follow the editor to study!

1. Objects in JavaScript

JavaScript can be said to be an object-based programming language, why it is object-based rather than object-oriented, because JavaScript itself only implements encapsulation, not inheritance and polymorphism. Since he is object-based, let's talk about objects in js. Some people say that everything in js is an object, which is not entirely true. On the right side, he emphasizes the importance of objects in js, which are ubiquitous in js, including the functions that can construct objects themselves. On the other hand, there are some simple data types in js, including numbers, strings and Boolean values, null values, and undefined values, which are not objects. Then why are these types of values not objects? after all, they also have methods. So let's take a look at the definition of objects in JavaScript, there are two definitions.

(1) objects in JavaScript are variable keying sets (keyed collections) (this definition comes from the third chapter of Lao Tao's book)

(2) the object in JavaScript is a collection of unordered attributes, which can contain simple data types, objects, and functions; the functions stored in the properties of an object are also called methods of this object. (from 4.3.3 of ECMA-262) (Note: the attributes mentioned here can be created and accessed in js scripts (we call them explicit attributes), excluding internal attributes that the system automatically assigns to objects)

Then why is that simple data type not an object, mainly because the methods in the values of these data types are immutable, and the properties of an object should be changeable.

2. Prototype chain in object [[proto]]

Each object in JavaScript is automatically assigned a prototype property [[proto]] to connect to its prototype object when it is created. In JavaScript, the inheritance relationship of objects is realized through [[proto]] in each object. But the [[proto]] property of the object cannot be accessed and modified in JavaScript. It exists as an internal property and is automatically set by the system when the object is created.

When accessing a property of an object, if the property does not exist in the object, look for it in the properties of the prototype object referred to in his [[proto]], and return if it is found, otherwise continue to search along the [[proto]] chain until the connection of [[proto]] is null.

3. A function is also an object

The function in JavaScript is itself an object (so we often call it a function object), and it is arguably the most important object in js. The reason why it is called the most important object, on the one hand, it can play the same role as a function in other languages, it can be called and can be passed in parameters; on the other hand, it is also used as an object constructor, which can be combined with the new operator to create an object.

Since a function is an object, it must contain all the properties that the object has, including the prototype chain [[proto]] property that the object sets when it is created.

Let's see the difference between a function object and a normal object. As we said earlier, an object is an unordered collection of properties, so what's the difference between the properties of a function and those of an ordinary object? According to Section 13.2 in ECMA-262, when a function object is created, the system defaults to its creation of two properties [[call]] and [[constructor]]. When the function object is called as a normal function (for example, myFunc ()), the "()" operator indicates that the [[call]] property of the function object is executed when it is called as a constructor (for example, new myConst ()). His [[constructor]] attribute is executed, and the execution of [[cosntructor]] is described in the next section. In addition, when a function is created, the system creates a display property prototype for it by default and assigns a value of

This.prototype = {constructor:this}

The details can be included in the fifth chapter of the veteran book. The prototype property of this function object is also prepared for js to implement inheritance as a constructor, but this property can be accessed and modified in js scripts. What I want to emphasize here is that we must distinguish between the [[proto]] attribute in the object and the prototype attribute in the function object. I took a lot of detours at the beginning of my study because I didn't make a good distinction between the two.

4. Creation of object

There are two ways to create objects in js, one of which is achieved literally, such as

Var Person = {

"first_name": 'liang'

'last_name':'yang'

}

Another way is to create through the constructor

Var my = new Person ('liang','yang')

In fact, the creation process of the first way is equivalent to calling the Object constructor, as follows.

Var Person = new Object ()

Person.first_name = 'liang'

Person.last_name = 'yang'

So we can merge all the object creation in js to use the constructor. Let's explain in detail the process of creating the object by the constructor:

The first step is to create an empty object (without any properties) and point the object's [[proto]] to the prototype property object of the constructor function

The second step is to pass the empty object as a this pointer to the constructor function and execute

Third, if the above function returns an object, it returns the object, otherwise it returns the object created in the first step

Step 4, use the function as a class

As we can see from the above steps, generally speaking, the prototype of a function object points to a normal object, not a function object, and the attributes in this ordinary object can also be accessed in the object created by this function constructor. Our code can be designed in this way, assuming that a function can represent a class, and the object generated by the constructor function is the instance object of the class, then the properties and methods that should be in the instance object should be placed in the prototype of the constructor function, and the static methods of this class can be directly placed in the properties of the function as the object. The last function body is what we usually call the constructor in the object-oriented language (here we want to distinguish between the word "constructor" and "constructor function", the so-called constructor refers to the constructor of a class in a common object-oriented language, and the constructor function refers to a function in javascript that is used as a constructor).

We said in section 3 that the prototype object of each function always contains a constructor property, 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, so through the [[proto]] chain, every object generated by the constructor function has a constructor attribute pointing to the constructor function that generates it, so we can use this attribute to determine which constructor function this object is generated.

5. Function inheritance (class inheritance)

With all that said, it's time for us to talk about inheritance in javascript. Let's first consider what we need to do to implement class inheritance, suppose we inherit from superClass to the subclass subClass.

In order for the object generated by subClass to be able to access the properties in the object generated by superClass, you can make subClass.prototype the object generated by a superClass constructor.

Subclass.prototye = new superClass ()

But here's the problem: new superClass (), as we said in section 4, not only copies all the methods in superClass.prototype, but also runs the function superClass (), which acts as a constructor in the class. We know that the constructor of the parent class should be called in the constructor of the subclass to achieve initialization. To do this, we can create a function whose constructor is empty, but the prototype is consistent with the superClass prototype, and have subClass.prototype point to the object generated by this function.

Var F = function () {}

F.prototype = superClass.prototype

SubClass.protptype = new F ()

In this way, we can copy properties without calling the constructor at the same time. But there is another problem, that is, we have modified the prototype property of subClass, thus removing the constructor property, so we can't know which constructor function generated the object. We can assign him a value again.

SubClass.prototype.constructor = subClass

In this way, the problem of copying attributes is easily solved. But a new problem arises. In subClass, we can't know which constructor function his parent class is, so we can't call the constructor of the parent class in the constructor, so we can add an attribute to subClass to indicate his parent class.

SubClass.superClass = superClass.prototype

So we can use subClass.superClass.constructor in the constructor of the subclass to access the constructor of the parent class. Finally, we 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

}

At this point, the study on "how to understand the object and prototype chain and function inheritance in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.