当前位置：网站首页>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 .