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

This article mainly explains "analyzing the creation and inheritance of js in HTML5 development". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "analyze the creation and inheritance of js in HTML5 development".

When we use obj.xxx to access the properties of an object, the JavaScript engine first looks for the property on the current object, and if it can't find it, it looks for it on the prototype object, if it hasn't found it yet, it goes all the way back to the Object.prototype object, and finally, if it hasn't found it yet, it can only return undefined.

For example, create an Array object:

Var arr = [1,2,3]

Its prototype chain is:

Arr-> Array.prototype-> Object.prototype-> null

Array.prototype defines methods such as indexOf (), shift (), and so on, so you can call them directly on all Array objects.

When we create a function:

Function foo () {

Return 0

}

Function is also an object, and its prototype chain is:

Foo-> Function.prototype-> Object.prototype-> null

Because Function.prototype defines methods such as apply (), all functions can call the apply () method.

It's easy to think that if the prototype chain is long, accessing the properties of an object becomes slower because it takes more time to find it, so be careful not to make the prototype chain too long.

Constructor function

In addition to creating an object directly with {.}, JavaScript can also use a constructor method to create an object. Its use is to define a constructor first:

Function Student (name) {

This.name = name

This.hello = function () {

Alert ('Hello,' + this.name +'!')

}

}

You will ask, why, isn't this an ordinary function?

This is indeed a normal function, but in JavaScript, you can call this function with the keyword new and return an object:

Var xiaoming = new Student ('Xiao Ming')

Xiaoming.name; / / Xiao Ming

Xiaoming.hello (); / / Hello, Xiao Ming!

Note that if you don't write new, this is a normal function that returns undefined. However, if you write new, it becomes a constructor that binds the this that points to the newly created object and returns this by default, that is, you don't have to write return this at the end

The prototype chain of the newly created xiaoming is:

Xiaoming-> Student.prototype-> Object.prototype-> null

That is, the prototype of xiaoming points to the prototype of the function Student. If you create xiaohong and xiaojun again, the prototypes of these objects are the same as xiaoming:

Xiaoming ↘

Xiaohong-→ Student.prototype-> Object.prototype-> null

Xiaojun ↗

The object created with new Student () also gets a constructor property from the prototype, which points to the function Student itself:

Xiaoming.constructor = Student.prototype.constructor; / / true

Student.prototype.constructor = Student; / / true

Object.getPrototypeOf (xiaoming) = Student.prototype; / / true

Xiaoming instanceof Student; / / true

Are you dizzy? To show these messy relationships with a picture is:

The red arrow is the prototype chain. Note that the object Student.prototype points to is the prototype object of xiaoming and xiaohong, and the prototype object itself has a property constructor, which points to the Student function itself.

In addition, the function Student happens to have an attribute prototype that points to the prototype objects of xiaoming and xiaohong, but objects such as xiaoming and xiaohong do not have the attribute prototype, but they can be viewed using the non-standard usage of _ _ proto__.

Now we think that objects such as xiaoming and xiaohong "inherit" from Student.

However, there is a small problem, pay attention to observe:

Xiaoming.name; / / Xiao Ming

Xiaohong.name; / / 'Xiao Hong'

Xiaoming.hello; / / function: Student.hello ()

Xiaohong.hello; / / function: Student.hello ()

Xiaoming.hello = xiaohong.hello; / / false

It is true that xiaoming and xiaohong have different name, otherwise we won't be able to tell who is who.

The hello of xiaoming and xiaohong is a function, but they are two different functions, even though the function name and code are the same!

If we create a lot of objects through new Student (), the hello functions of these objects actually only need to share the same function, which saves a lot of memory.

To make the created object share a hello function, according to the principle of object property lookup, we just need to move the hello function to the common prototype of objects such as xiaoming and xiaohong, that is, Student.prototype:

Modify the code as follows:

Function Student (name) {

This.name = name

}

Student.prototype.hello = function () {

Alert ('Hello,' + this.name +'!')

}

Creating prototype-based JavaScript objects with new is as simple as that!

What if I forget to write new?

What if a function is defined as a constructor for creating an object, but forgets to write new when calling it?

In strict mode, this.name = name will report an error because this is bound to undefined, while in non-strict mode, this.name = name does not report an error, because this is bound to window, so the global variable name is inadvertently created and undefined is returned, which is even worse.

So don't forget to write new when calling the constructor. In order to distinguish between a normal function and a constructor, by convention, the first letter of the constructor should be capitalized, while the first letter of the ordinary function should be lowercase, so that some syntax checking tools such as jslint will help you detect missing new.

Finally, we can write a createStudent () function that encapsulates all new operations internally. A common programming mode looks like this:

Function Student (props) {

This.name = props.name | | 'anonymous'; / / default is' anonymous'

This.grade = props.grade | | 1; / / default is 1

}

Student.prototype.hello = function () {

Alert ('Hello,' + this.name +'!')

}

Function createStudent (props) {

Return new Student (props | | {})

}

This createStudent () function has several huge advantages: one is that it does not need to be called by new, and the other is that the parameters are very flexible and can be passed either unpassed or like this:

Var xiaoming = createStudent ({

Name: Xiao Ming

})

Xiaoming.grade; / / 1

If the object created has many properties, we only need to pass some of the properties we need, and the rest of the properties can be used with default values. Since the parameter is an Object, we do not need to remember the order of the parameters. If you happen to get an object from JSON, you can create a xiaoming directly.

Inherit

In traditional Class-based languages such as Java and C++, the essence of inheritance is to extend an existing Class and generate a new Subclass.

Because of the strict classification and instances of such languages, inheritance is actually an extension of types. However, because JavaScript uses prototype inheritance, we cannot directly extend a Class because there is no such type as Class.

But there is still a way. Let's review the Student constructor first:

Function Student (props) {

This.name = props.name | | 'Unnamed'

}

Student.prototype.hello = function () {

Alert ('Hello,' + this.name +'!')

}

And the prototype chain of Student:

Now that we want to extend PrimaryStudent based on Student, we can first define PrimaryStudent:

Function PrimaryStudent (props) {

/ / call the Student constructor to bind the this variable:

Student.call (this, props)

This.grade = props.grade | | 1

}

However, calling the Student constructor does not mean inheriting the prototype of the object created by Student,PrimaryStudent:

New PrimaryStudent ()-> PrimaryStudent.prototype-> Object.prototype-> null

We must find a way to change the prototype chain to:

New PrimaryStudent ()-> PrimaryStudent.prototype-> Student.prototype-> Object.prototype-> null

In this way, the prototype chain is right, and the inheritance relationship is right. The new PrimaryStudent-based object can call not only the methods defined by PrimaryStudent.prototype, but also the methods defined by Student.prototype.

If you want to do this in the simplest and roughest way:

PrimaryStudent.prototype = Student.prototype

It won't work! If so, PrimaryStudent and Student share a prototype object, so why define PrimaryStudent?

We must implement the correct prototype chain with the help of an intermediate object whose prototype points to Student.prototype. To achieve this, refer to the code of Douglas, the one who invented JSON, and the intermediate object can be implemented with an empty function F:

/ / PrimaryStudent constructor:

Function PrimaryStudent (props) {

Student.call (this, props)

This.grade = props.grade | | 1

}

/ / empty function F:

Function F () {

}

/ / point the prototype of F to Student.prototype:

F.prototype = Student.prototype

/ / point the prototype of PrimaryStudent to a new F object, and the prototype of F object exactly points to Student.prototype:

PrimaryStudent.prototype = new F ()

/ / fix the constructor of the PrimaryStudent prototype to PrimaryStudent:

PrimaryStudent.prototype.constructor = PrimaryStudent

/ / continue to define methods on the PrimaryStudent prototype (that is, the new F () object):

PrimaryStudent.prototype.getGrade = function () {

Return this.grade

}

/ / create a xiaoming:

Var xiaoming = new PrimaryStudent ({

Name: Xiao Ming

Grade: 2

})

Xiaoming.name; / / Xiao Ming

Xiaoming.grade; / / 2

/ / verify the prototype:

Xiaoming.__proto__ = PrimaryStudent.prototype; / / true

Xiaoming.__proto__.__proto__ = Student.prototype; / / true

/ / verify the inheritance relationship:

Xiaoming instanceof PrimaryStudent; / / true

Xiaoming instanceof Student; / / true

A diagram is used to represent the new prototype chain:

Note that function F is only used for bridging, we have only created an instance of new F (), and we have not changed the prototype chain of the original Student definition.

If you wrap the inheritance action with an inherits () function, you can also hide the definition of F and simplify the code:

Function inherits (Child, Parent) {

Var F = function () {}

F.prototype = Parent.prototype

Child.prototype = new F ()

Child.prototype.constructor = Child

}

The inherits () function can be reused:

Function Student (props) {

This.name = props.name | | 'Unnamed'

}

Student.prototype.hello = function () {

Alert ('Hello,' + this.name +'!')

}

Function PrimaryStudent (props) {

Student.call (this, props)

This.grade = props.grade | | 1

}

/ / implement the prototype inheritance chain:

Inherits (PrimaryStudent, Student)

/ / bind other methods to the PrimaryStudent prototype:

PrimaryStudent.prototype.getGrade = function () {

Return this.grade

}

Summary

The prototype inheritance implementation of JavaScript is as follows:

Define a new constructor and internally call the constructor that you want to "inherit" with call (), and bind this

Prototype chain inheritance is realized with the help of intermediate function F, preferably through encapsulated inherits functions.

Continue to define new methods on the prototype of the new constructor.

Class inheritance of ES6

The new keyword class has been officially introduced into JavaScript since ES6. The goal of class is to make it easier to define classes.

Let's first review the method of implementing Student with functions:

Function Student (name) {

This.name = name

}

Student.prototype.hello = function () {

Alert ('Hello,' + this.name +'!')

}

If you write Student with the new class keyword, you can write it like this:

Class Student {

Constructor (name) {

This.name = name

}

Hello () {

Alert ('Hello,' + this.name +'!')

}

}

By comparison, you can see that the definition of class includes the constructor constructor and the function hello () defined on the prototype object (note that there is no function keyword), thus avoiding the scattered code of Student.prototype.hello = function () {.}.

Finally, the code to create a Student object is exactly the same as in the previous section:

Var xiaoming = new Student ('Xiao Ming')

Xiaoming.hello ()

Class inheritance

Another big benefit of defining objects in class is that inheritance is more convenient. Think about the amount of code we need to write to derive a PrimaryStudent from Student. Now, the intermediate object inherited by the prototype, the constructor of the prototype object, and so on, do not need to be considered, and are directly implemented through extends:

Class PrimaryStudent extends Student {

Constructor (name, grade) {

Super (name); / / remember to call the constructor of the parent class with super!

This.grade = grade

}

MyGrade () {

Alert ('I am at grade'+ this.grade)

}

}

Note that the definition of PrimaryStudent is also implemented by the class keyword, while extends indicates that the prototype chain object comes from Student. The constructor of the subclass may be quite different from that of the parent class. For example, PrimaryStudent requires two parameters, name and grade, and the constructor of the parent class needs to be called through super (name), otherwise the name property of the parent class cannot be initialized properly.

PrimaryStudent has automatically obtained the hello method of the parent class Student, and we have defined a new myGrade method in the subclass.

What is the difference between the class introduced by ES6 and the original JavaScript prototype inheritance? In fact, there is no difference between them, and the purpose of class is to let the JavaScript engine implement the prototype chain code that we originally need to write ourselves. In short, the advantage of using class is that it greatly simplifies the prototype chain code.

Thank you for your reading, the above is the content of "analyzing the creation and inheritance of js in HTML5 development". After the study of this article, I believe you have a deeper understanding of the problem of analyzing the creation and inheritance of js in HTML5 development. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.