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

This article introduces what distinguishes JavaScript from other languages. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Only by understanding prototype inheritance can you say that you understand JS and that prototypes affect the way objects work. Prototype inheritance is often asked in interviews because the interviewer can see how well you know JS.

1. Brief introduction

JavaScript has only basic types, null,undefined and object. In contrast to languages such as Java or PHP, JS has no concept of a class that can be used as a template for creating objects.

An object is a combinable structure that consists of multiple properties: key and value pairs.

For example, the following object cat contains two attributes:

Const cat = {sound: 'Meowboys, legs: 4}

Since I want to reuse the legs attribute in other objects, let's extract the legs attribute into a special object pet

Const pet = {legs: 4}; const cat = {sound: 'metrology'}

It looks good!

But I still want cat to have the properties of legs. How do you relate cat to pet?

Inheritance can help us!

two。 Prototype object

In JS, one object can inherit the properties of another object. Objects that inherit properties are called prototype, that is, prototypes.

According to the redefinition, we can use pet as the prototype of cat, which will inherit the legs property. When you use an object literal to create an object, you can also use the special property _ _ proto__ to set the prototype of the object you create.

Const pet = {legs: 4}; const cat = {sound: 'Meowboys, _ _ proto__: pet}; cat.legs; / / = > 4

The cat object now inherits legs from the prototype pet. Now we can use cat.legs, which has a value of 4.

The sound property, on the other hand, is a proprietary property because it is defined directly on the object.

JavaScript prototypes inherit essence: objects can inherit properties from other objects (prototypes).

You may wonder: why do you need inheritance in the first place?

Inheritance solves the problem of data and logic duplication. Through inheritance, objects can share properties and methods.

Const pet = {legs: 4}; const cat = {sound: 'Meowboys, _ _ proto__: pet}; const dog = {sound:' Barkyards, _ _ proto__: pet}; const pig = {sound: 'Gruntstones, _ _ proto__: pet}; cat.legs; / / = > 4 dog.legs; / / = > 4 pig.legs; / / = > 4

Both cat,dog and pig reuse the attribute legs.

Note: _ _ proto__ is obsolete, but I use it for simplicity. In a production environment, Object.create () is recommended.

2.1 own and inherited attributes

If the object's own property is the same as the inherited property name, JS takes precedence over its own property.

In the following example, the chicken object has its own property legs, but also inherits a property with the same name legs:

Const pet = {legs: 4}; const chicken = {sound: 'Cluckbacks, legs: 2, _ _ proto__: pet}; chicken.legs; / / = > 2

The cat object inherits legs from the prototype pet. You can now use the property accessor cat.legs, which has a value of 4.

The value of chicken.legs is 2. JavaScript selects its own attribute legs on inheritance.

If you delete your own attribute, JS selects the inherited property!

Const pet = {legs: 4}; const chicken = {sound: 'Cluckbacks, legs: 2, _ _ proto__: pet}; chicken.legs; / / = > 2 delete chicken.legs; chicken.legs; / / = > 4

3. Implicit prototype

When creating an object, the prototype is not explicitly set, and JS assigns an implicit prototype to the object type we created.

Let's look at the pet object again.

Const pet = {legs: 4}; pet.toString (); / / = > `[object Object]`

Pet has only one property, legs, but we can call the method pet.toString (). Where did this toString () come from?

After the pet object is created, JS assigns it an implicit prototype object. Pet inherits the toString () method from this implicit prototype:

The Object.getPrototypeOf () method returns the prototype of the specified object (the value of the internal [[Prototype]] property).

4. Prototype chain

Let's create a tail object and make it a prototype of pet as well:

Const tail = {hasTail: true}; const pet = {legs: 4, _ _ proto__: tail}; const cat = {sound: 'Meowfolk, _ _ proto__: pet}; cat.hasTail; / / = > true

Cat inherits the properties of legs from its prototype pet. But cat also inherits hasTail from its prototype, the prototype tail.

When accessing the property myObject.myProp, JS searches for myProp in the properties of myObject itself, the prototype of the object, the prototype of the prototype, and so on, until it encounters null as the prototype.

In other words, JavaScript looks for inherited attributes in the prototype chain.

5. But JavaScript has a class.

From the beginning of the JS with only objects and no classes, you may already be confused about what the heck you are talking about. This may be because you have already started using the class keyword in ES6.

For example, you can write a Pet class:

Class Pet {legs = 4; constructor (sound) {this.sound = sound;}} const cat = new Pet ('Moewalled'); cat.legs; / / = > 4 cat instanceof Pet; / / = > true

And create a cat when the class is instantiated.

In fact, the class syntax in JS is a grammatical sugar on top of prototype inheritance.

The above class-based snippet is equivalent to the following:

Const pet = {legs: 4}; function CreatePet (sound) {return {sound, _ _ proto__: pet};} CreatePet.prototype = pet; const cat = CreatePet ('Moewalled'); cat.legs; / / = > 4 cat instanceof CreatePet; / / = > true

The CreatePet.prototype = pet assignment is required to make the cat instanceof CreatePet value true.

In JavaScript, objects inherit properties from other objects (prototypes), which is a concept of prototype inheritance.

JS looks for inherited properties in the prototype of the object, also looks for inherited properties in the prototype, and so on.

So much for sharing what distinguishes JavaScript from other languages. I hope the above content can help you and learn more. If you think the article is good, you can share it for more people to see.

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.