当前位置:网站首页>Do you really understand the things about "prototype"? [part I]
Do you really understand the things about "prototype"? [part I]
2022-07-05 10:45:00 【How's Kakashi doing】
List of articles :
1.2 Constructors new Implementation process of
1.3 Instance members and static members
Two : Prototype object prototype
2.1 Why are there prototype objects
2.2 The use of prototype objects
3、 ... and : Object prototype __proto__
3.1 What is an object prototype ?
3.2 About object prototypes __proto__ Points for attention
Four : Constructors constructor
4.1 Why? constructor It's also called a constructor
4.2 Manual return constructor The situation of
What is a prototype ? The prototype is JS Concepts we haven't mentioned in basic learning , Prototype is a general term , Mainly consists of Prototype object (prototype) , Object prototype (__proto__), Prototype chain wait , According to statistics, these concepts are also often asked in interviews , This article will take you to understand and master the relevant knowledge of prototype , Let everyone no longer be confused .
One : Constructors
We have learned many object-oriented languages , for example java c++ wait , however JavaScript The exception is , stay ES6 Before , There is no concept of a class , How do we create objects before ? Originally in ES6 Before , We are using Constructors To create an instantiated object , A constructor is a special function , Contains the common features of the object , To cooperate new It makes sense to use them together .
Constructor considerations :
- The first letter of the constructor name should be capitalized
- Constructors should match new Use it together
1.1 Constructor usage
<script>
function Animal(name,age){ // The constructor name is capitalized
this.name=name;
this.age=age;
this.eat=function(){
console.log(' I'm eating ');
}
}
var dog=new Animal(' Wangcai ',3) // To cooperate new Use together to create objects
console.log(dog.name);
console.log(dog.age);
dog.eat()
</script>
1.2 Constructors new Implementation process of
new There are the following execution processes :
- new An empty object will be created when
- In constructor this Point to this empty object
- Execute the code in the constructor to assign a value to the empty object , Add attribute method
- Return this object
1.3 Instance members and static members
Instance members :
- Instance members are for internal use this Added members
- Instance members can only be accessed through instantiated object calls , Cannot access through constructor name
<script> function Animal(name,age){ this.name=name; this.age=age; } var dog=new Animal(' Wangcai ',3) console.log(dog.name); console.log(Animal.name); </script>
Static members :
- Static members are members created by the constructor itself
- Static members can only be accessed through constructor names , Cannot access through instantiated objects
<script> function Animal(name,age){ this.name=name; this.age=age; } var dog=new Animal(' Wangcai ',3) Animal.color=' black ' console.log(Animal.color); console.log(dog.color); </script>
Two : Prototype object prototype
2.1 Why are there prototype objects
Before starting to prototype what the object is , Let's start with a case , It's the same one just now Animal class , We created multiple instantiated objects , A comparison of two methods of outputting instantiated objects , We found the output false, That is, the addresses of the two complex data types are different , What's the reason ?
<script> function Animal(name,age){ this.name=name; this.age=age; this.eat=function(){ console.log(' I'm eating '); } } var dog=new Animal(' Wangcai ',3) var cat=new Animal(' Mimi ',3) var pig=new Animal(' Hem ',3) var fish=new Animal(' Murmur ',3) var sheep=new Animal(' BAABAA ',3) console.log(dog.eat==cat.eat); </script>
In the process of creating instantiated objects ,new The process of creating a new object first , But complex data types will open up a space for storage ( object , Method ), This is This causes the same method in the constructor to be opened up countless blocks of memory , Caused extreme waste of memory
2.2 The use of prototype objects
Constructor prototype prototype Is an attribute in the constructor , Its attribute is a pointer , Point to an object , This object stores public methods , Methods that exist in this object , When you create an instantiated object through the constructor, you can make public use of this method , There is no need to open up multiple duplicate memory spaces for multiple complex data types . It is to solve the above problem of memory waste , It can also be directly referred to as the prototype object .
The above case solution :
Solution we use prototype objects to store public methods , And let the instantiated object call the method , And compare whether the addresses of the two are the same
<script>
function Animal(name,age){
this.name=name;
this.age=age;
}
Animal.prototype.eat=function(){
console.log(' I'm eating ');
}
var dog=new Animal(' Wangcai ',3)
var cat=new Animal(' Mimi ',3)
dog.eat()
cat.eat()
console.log(dog.eat==cat.eat);
</script>
We found that not only did we successfully call this method , And the addresses of the two methods are the same , This proves , Its common complex data types only open up a memory space , It reduces the waste of resources written in the constructor of public methods .
3、 ... and : Object prototype __proto__
3.1 What is an object prototype ?
Object prototype __proto__ The function of is to let you figure out a problem : Why is it given to constructors prototype Attribute adding method , Instantiated objects can use ? This is because every object has a __proto__ attribute ( Note that there are two underscores before and after ), This attribute is also a pointer , Refers to the prototype object of its corresponding constructor prototype, This explains why the instantiated object can call methods in the prototype object .
Or it can be understood as :
- Prototype object prototype Equivalent to Object prototype __proto__
3.2 About object prototypes __proto__ Points for attention
We should pay attention to the object prototype __protp__ The function of is only to provide a direction for finding the content in the prototype object , We don't need to use it , Just remember that it points to the prototype object of the corresponding constructor prototype that will do
Search principle of method :
- First, find out whether there is a target method on the constructor that instantiates itself , If there is one, call
- If there is no , Because the object itself has properties __protp__, It points to the prototype object of the constructor prototype, Will find out whether the prototype object has this method
Four : Constructors constructor
4.1 Why? constructor It's also called a constructor
Object prototype __proto__ Prototype object of body and constructor prototype I have one on me constructor attribute , The name constructor It's called a constructor , Because this attribute points to the corresponding constructor itself , It is mainly used to record which constructor the instantiated object refers to
Print both constructor attribute :
<script> function Animal(name,age){ this.name=name; this.age=age; } Animal.prototype.eat=function(){ console.log(' I'm eating '); } var dog=new Animal(' Wangcai ',4) console.log(dog.__proto__.constructor); console.log(Animal.prototype.constructor); </script>
We found that the printed result is indeed the constructor itself
4.2 Manual return constructor The situation of
More often, we need to return manually constructor Which constructor is pointed to , For example, when multiple public methods are stored as objects in the prototype object of the constructor , The following will happen :
<script> function Animal(name,age){ this.name=name; this.age=age; } Animal.prototype={ eat:function(){ console.log(' I'm eating '); }, run:function(){ console.log(' I'm running '); } } var dog=new Animal('wangchai',3) console.log(Animal.prototype.constructor); console.log(dog.__proto__.constructor); </script>
We found that it can't find the corresponding constructor , This is caused by the way we add methods to its prototype objects , The money we take is . Way to add , It is added on the original basis , It will not overwrite the original content inside . And we use = Methods of are added as objects , It is actually a process of assignment , The original content is also overwritten , This leads to prototype Internal original constructor Methods are overwritten
At this time, we need to return manually constructor To find out which constructor is returned
<script> function Animal(name,age){ this.name=name; this.age=age; } Animal.prototype={ constructor:Animal, eat:function(){ console.log(' I'm eating '); }, run:function(){ console.log(' I'm running '); } } var dog=new Animal('wangchai',3) console.log(Animal.prototype.constructor); console.log(dog.__proto__.constructor); </script>
So we can successfully get it constructor Which constructor is pointed to
The format for :
- constructor : Constructor name
That's all for this article , The next one is more wonderful !!
边栏推荐
- Based on shengteng AI Aibi intelligence, we launched a digital solution for bank outlets to achieve full digital coverage of information from headquarters to outlets
- Go-2-Vim IDE常用功能
- Write double click event
- Qt实现json解析
- Ad20 make logo
- 中职组网络安全C模块全漏洞脚本讲解包含4个漏洞的脚本
- PWA (Progressive Web App)
- [vite] 1371 - develop vite plug-ins by hand
- NAS and San
- 2022鹏城杯web
猜你喜欢
手机厂商“互卷”之年:“机海战术”失灵,“慢节奏”打法崛起
Solution of ellipsis when pytorch outputs tensor (output tensor completely)
In the year of "mutual entanglement" of mobile phone manufacturers, the "machine sea tactics" failed, and the "slow pace" playing method rose
Talk about the understanding of fault tolerance mechanism and state consistency in Flink framework
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
Implement the rising edge in C #, and simulate the PLC environment to verify the difference between if statement using the rising edge and not using the rising edge
C语言实现QQ聊天室小项目 [完整源码]
Comparative learning in the period of "arms race"
Web3基金会「Grant计划」赋能开发者,盘点四大成功项目
Pseudo class elements -- before and after
随机推荐
【SWT组件】内容滚动组件 ScrolledComposite
括号匹配问题(STL)
爬虫(9) - Scrapy框架(1) | Scrapy 异步网络爬虫框架
Taro advanced
Go-3-第一个Go程序
Implementation of wechat applet bottom loading and pull-down refresh
Share Net lightweight ORM
5g NR system architecture
脚手架开发进阶
Solution of ellipsis when pytorch outputs tensor (output tensor completely)
AD20 制作 Logo
【Vite】1371- 手把手开发 Vite 插件
Based on shengteng AI Aibi intelligence, we launched a digital solution for bank outlets to achieve full digital coverage of information from headquarters to outlets
[paper reading] kgat: knowledge graph attention network for recommendation
websocket
函数///
Qt实现json解析
运算符、、
小程序框架Taro
2022年危险化学品生产单位安全生产管理人员特种作业证考试题库模拟考试平台操作