search
HomeWeb Front-endJS TutorialUnderstanding of prototype chain and inheritance in js
Understanding of prototype chain and inheritance in jsSep 09, 2017 am 11:38 AM
javascriptunderstandinherit

The prototype chain in js is a part of knowledge that is difficult to understand, and inheritance depends on the prototype chain, so the prototype chain is something we must master. Before learning about the prototype chain, we need to introduce the prototype. It is recommended that this part focus on understanding, and rote memorization is not recommended.


1. Prototype

#In js, only function objects have prototypes, and prototypes are also objects. For example, we create a save function and check its type through typeof. The return value is "object", indicating that it is actually an object.

Figure 1 Function object
So what content does the prototype of the function contain? By printing the output, we can see that the prototype contains two parts, one is constructor, and the other is proto. Let’s first understand the constructor, and we will introduce proto later.
Understanding of prototype chain and inheritance in js
Figure 2 Prototype of Function Object
Anyone who has studied Java knows that constructor means constructor, which contains some information about the constructor, such as parameters, caller, etc.
As mentioned before, only function objects have prototypes, so do ordinary objects have prototypes? The following is verified through an example, and an object fileSave is constructed through save.
Understanding of prototype chain and inheritance in js
Figure 3 Ordinary Object
As can be seen from the above example, ordinary objects do not have prototypes, but they have proto attributes.
Summary: From the above analysis, we learned that function objects have prototype attributes, while ordinary objects do not have prototype attributes.

2. Prototype chain

The implementation of the prototype chain relies on the proto attribute, which can be understood as a pointer in C language, in java citation. In js, what does proto point to? Still throwing an instance, let’s print out the proto attribute of fileSave:
Understanding of prototype chain and inheritance in js
Figure 4 Object’s proto
Have you discovered anything? The proto value of fileSave is the same as the prototype of the save function object in Figure 2, that is, proto points to the prototype of save. We know that the fileSave object is created through new save();, so we conclude that fileSave's proto points to the prototype of its constructor object. In order to verify the result, we create an object imageSave through save again and take a look at its proto attribute value.
Understanding of prototype chain and inheritance in js
We found again that imageSave's proto points to the prototype of save. Therefore, we can know that the object's proto points to the prototype of its constructor. Then, save is also an object, and its prto should point to the prototype of its constructor, that is, the prototype of Function.
Understanding of prototype chain and inheritance in js
In addition, we know from the first section that the prototype is also an object, what is the direction of its proto attribute? Speaking with an example, the save.prototype.proto value is printed below.
Understanding of prototype chain and inheritance in js
Figure 5 save.prototype.proto
From Figure 5, we know that the value of save.prototype.proto is the prototype of Object. We are very curious about the value of proto of Obejct.prototype. Let’s print it out and see.
Understanding of prototype chain and inheritance in js
is null, which is understandable. After all, it is actually the top-level object.
From the above analysis, the following chain diagram is obtained:
Understanding of prototype chain and inheritance in js
Figure 6 Prototype Chain
Summary: Through the analysis of this section, we learned that the implementation of the prototype chain relies on objects protoProperties. If you create an object through a function object, the proto property of the object points to the prototype of its constructor.
3. Inheritance
Before talking about inheritance, let’s first learn about attribute search. In js, it will look for attributes according to the prototype chain. If it does not have it, it will look up according to the proto attribute. Let's first write a piece of example code.

save.fileName = "oo"save.prototype.fileName = "lili";fileSave.fileName = "haha";

Understanding of prototype chain and inheritance in js
If we print the value of fileSave.fileName at this time, it is obvious that what we get is "haha". But if I remove fileSave.fileName = "haha";, what will be output when printing again?
Understanding of prototype chain and inheritance in js
From the printing results, we know that the fileName attribute will be found according to the proto attribute, that is, the required attributes will be queried according to the chain diagram in Figure 5. Here, if there is no save.prototype.fileName = "lili"; this assignment code, what is printed is undefined, because there is no corresponding attribute in the prototype chain. Some people may ask why "oo" is not output. Indeed, we can see the assignment code save.fileName = "oo" from the code, but we need to know that save is a function object. When this code is executed, finName will Under the constructor, not in the prototype, similar to static properties in Java (here they cannot be accessed through the instance object).
Remember: when calling properties through ordinary objects, the search will only be found in the properties of the prototype, not in the constructor. If it is not found in the save prototype, it will be searched in save.proto, and so on.
If you know the property search method, then implementing inheritance is very simple. For example, we create an empty object saveDisk. If I want to access the fileName in save, we only need to set the value of proto of saveDisk equal to the prototype of save (simply understood as linking two unrelated iron objects) together).

saveDisk._proto_ = save.prototype

Understanding of prototype chain and inheritance in js

The above is the detailed content of Understanding of prototype chain and inheritance in js. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function