当前位置:网站首页>Es classes and objects, prototypes
Es classes and objects, prototypes
2022-07-07 10:06:00 【When can Xiaobai advance to success】
One 、“ The front-end development ” The origin of the name
Web1.0 The era of web page making : Web pages are mainly static pages , Unable to interact with the server . Website development tools ( Page 3 Swordsman ):DreamWeaver、FireWorks、Flash.
- Web2.0 Front end development of the times : Now page development , There is no way from the development dimension or the development method , Closer to the traditional website background development , So it is no longer called “ Page making ”, It is “ The front-end development ”. New three swordsman :HTML、CSS and JavaScript.
- HTML: Hypertext Mark Language , yes A door Descriptive language .
- CSS: Cascading style surface , It's for Control the appearance of web pages A technique .
- JavaScript: namely JS, It's kind of embedded in HTML The scripting language in the page , By the browser Explain and execute .
HTML Used to control the structure of web pages ,CSS Used to control the appearance of web pages , and JavaScript Controlling the behavior of web pages .
Two 、ES Class and object of
1、Class keyword ;
2、constructor Constructors ;
3、 There is no need to function keyword ;
4、 There is no need for commas between methods
5、extends Inheritance and super() keyword :extends Represents inheritance (C Medium public)
<script type="text/javascript">
class Father{
constructor(x,y)
{
this.x = x;
this.y =y;
}
sum()
{
console.log("father's sum:"+(this.x+this.y));
}
song()
{
console.log("father is sing qinghuaci");
}
}
class Son extends Father{
constructor(x,y)
{
super(x,y); // Called the constructor in the parent class
}
}
var son1 = new Son(3,4);
son1.sum();
son1.song();
</script>
6、super keyword : In the constructor of the subclass , By calling super(), to Constructor for the parent class Middle pass parameter .
class Son extends Father{
constructor(x,y)
{
super(x,y); //1、 Called the constructor in the parent class , Assigned to the parent class this object
}
}
7、super keyword : By using “super. attribute ” or “super. Method ” The way , Display the properties and methods declared in the calling parent class .
class Son extends Father{
song()
{
console.log("son is sing qinghuaci");//2、 A subclass song Method
super.song();//3、 Calling the song Method
}
}
When subclasses call methods , First, traverse whether the subclass has this function , If there is , Then execute the function of the subclass . without , Then traverse the parent class , Execute the function of the parent class .
8、super Must be placed in subclass of this front
class Son extends Father{
constructor(x,y)
{
super(x,y); //1、 Called the constructor in the parent class , Assigned to the parent class this object
this.x = x; //2、 take x,y To pass on to oneself this object
this.y = y;
}
}
9、this Direction problem of
(1)constructor Inside this Refers to the instance object created ;
(2) Methods this It's the caller ; for example : In the following example ,sum Methods this It points to this button , Because the button calls this method .
<!DOCTYPE html>
<html>
<head>
<title>CanvasTest</title>
<meta charset="UTF-8">
<div class="items">
<button>Play</button>
</div>
</head>
<body>
<script type="text/javascript">
class Father{
constructor(x,y)
{
this.x = x;
this.y =y;
this.btn = document.querySelector("button");
this.btn.onclick = this.sum;
}
sum()
{
// This sum Methods this It points to this button , Because this button calls sum function
console.log(this);
console.log("father's sum:"+(this.x+this.y));
}
}
var f = new Father(2,5);
</script>
</body>
</html>
3、 ... and 、 Constructors and prototypes
1、 Methods of different objects will repeatedly apply for memory to create
function Star(){
this.name = uname;
this.age = age;
this.sing=function()
{
console.log("sing song");
}
}
var ldh = new Star(" Lau Andy ");
var zxy = new Star(" Jacky Cheung ");
ldh.sing();
zxy.sing();
console.log(ldh.sing() ==== zxy.sing());//false, It's two functions
ldh and zxy Of song Methods are at two addresses .
2、 Constructor prototype
Each constructor has one prototype attribute , This prototype It's an object , All the properties and methods of this object , Will be owned by constructors .
The function allocated by the constructor through the prototype is shared by all objects . You can put those constant methods , Directly defined in prototype On the object , In this way, all instances of objects can share these methods .
function Star(uname,age){
this.name = uname;
this.age = age;
}
//song Into the prototype object of the constructor .
Star.prototype.sing = function()
{
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star(" Jacky Cheung ");
ldh.sing();// Found on the prototype object of the constructor song Method
zxy.sing();
In general , our Public attribute definition to constructor Inside , We put the public method into the prototype object On the body .
3、 Object prototype __proto__
The instantiated object system automatically adds an attribute :__proto__, He pointed to The prototype object for the constructor prototype.
Object properties __proto__ And the prototype object of the constructor prototype Equivalent .
function Star(uname,age){
this.name = uname;
this.age = age;
}
Star.prototype.song = function()
{
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star(" Jacky Cheung ");
console.log(ldh.__proto__ === Star.prototype);//true;
ldh.sing();
Find the rules : First of all to see ldh Does the object have sing Method , If there is , Of the execution object sing Method . without , Go to the constructor prototype object to find .
4、constructor function
Object prototype (__proto__) Constructor prototype object (prototype) There's one in each constructor attribute ;constructor We call it constructors , Because it points back to the constructor itself .
Function one :constructor The main Used to record which constructor the object refers to , It can make Prototype object Re point to the original constructor .
function Star(uname,age){
this.name = uname;
this.age = age;
}
// Assign a new object to the prototype object
Star.prototype.sing(){
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star(" Jacky Cheung ");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
Running results :
Function two : In many cases , We need to use... Manually constructor This property refers back to the original constructor .
function Star(uname,age){
this.name = uname;
this.age = age;
}
// Assign a new object to the prototype object
Star.prototype = {
sing:function(){
console.log("sing song");
},
movie:function(){
}
}
var ldh = new Star("liudehua");
var zxy = new Star(" Jacky Cheung ");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
result :
Of a prototype object constructor It's not about Star, Because Star The prototype object of is covered , So in the prototype object constructor No more pointing Star.
resolvent :
function Star(uname,age){
this.name = uname;
this.age = age;
}
// Assign a new object to the prototype object
Star.prototype = {
constructor:Star,// Point back to the original constructor
sing:function(){
console.log("sing song");
},
movie:function(){
}
}
var ldh = new Star("liudehua");
var zxy = new Star(" Jacky Cheung ");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
result :
summary : If you modify the original prototype object , The prototype object is assigned an object , Must be used manually constructor Point back to the original structure .
5、 Constructors 、 example 、 The relationship among prototype objects
边栏推荐
- ORM模型--数据记录的创建操作,查询操作
- Internship log - day07
- 能源路由器入门必读:面向能源互联网的架构和功能
- 为什么安装mysql时starting service报错?(操作系统-windows)
- Introduction to uboot
- The combination of over clause and aggregate function in SQL Server
- [Frida practice] "one line" code teaches you to obtain all Lua scripts in wegame platform
- 使用BigDecimal的坑
- The new activity of "the arrival of twelve constellations and goddesses" was launched
- arcgis操作:dwg数据转为shp数据
猜你喜欢
Pit encountered by vs2015 under win7 (successful)
The landing practice of ByteDance kitex in SEMA e-commerce scene
ORM--数据库增删改查操作逻辑
First issue of JS reverse tutorial
Deep understanding of UDP, TCP
AI moves from perception to intelligent cognition
【无标题】
Detailed explanation of diffusion model
Arcgis操作: 批量修改属性表
JS reverse tutorial second issue - Ape anthropology first question
随机推荐
Win10安装VS2015
Some thoughts on the testing work in the process of R & D
Why are social portals rarely provided in real estate o2o applications?
CDZSC_ 2022 winter vacation personal training match level 21 (2)
PostgreSQL reports an error when creating a trigger,
第十四次试验
【原创】程序员团队管理的核心是什么?
基础篇:带你从头到尾玩转注解
Basic chapter: take you through notes
Can't connect to MySQL server on '(10060) solution summary
Main (argc, *argv[]) details
How to use Mongo shake to realize bidirectional synchronization of mongodb in shake database?
How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
JS reverse tutorial second issue - Ape anthropology first question
HCIP 第一天 笔记整理
ORM--查询类型,关联查询
有没有大佬帮忙看看这个报错,有啥排查思路,oracle cdc 2.2.1 flink 1.14.4
Writing file types generated by C language
Applet sliding, clicking and switching simple UI
MongoDB创建一个隐式数据库用作练习