ES6学习

一、“前端开发”名称的由来

Web1.0时代的网页制作：网页主要是静态页面，无法和服务器进行交互。网站开发工具（网页三剑客）：DreamWeaver、FireWorks、Flash。

Web2.0时代的前端开发：现在的页面开发，无法从开发维度还是开发方式上，更接近传统的网站后台开发，因此不再叫做“页面制作”，而是“前端开发”。新三剑客：HTML、CSS和JavaScript。
HTML：超文本标记语言，是一门描述性语言。
CSS：层叠样式表，是用来控制网页外观的一种技术。
JavaScript：即JS，是一种嵌入到 HTML页面中的脚本语言，由浏览器一边解释一边执行。

HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。

二、ES的类和对象

1、Class关键字；

2、constructor构造函数；

3、方法前不需要function关键字；

4、方法之间不需要逗号

5、extends继承和super()关键字：extends表示继承（C中的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);  //调用了父类中的构造函数
        }
        
    }
 
    var son1 = new Son(3,4);
    son1.sum();
    son1.song();     
</script>

6、super关键字：在子类的构造器中，通过调用super()，则向父类的构造函数中传递参数。


class Son extends Father{
    constructor(x,y)
    {
        super(x,y);  //1、调用了父类中的构造函数,赋值给父类的this对象
    }
}

7、super关键字：通过使用“super.属性”或“super.方法”的方式，显示调用父类中声明的属性和方法。


class Son extends Father{
 
    song()
    {
        console.log("son is sing qinghuaci");//2、子类的song方法
        super.song();//3、调用父类的song方法
    }
        
}

子类调用方法时，先遍历子类是否有该函数，如果有，则执行子类的函数。如果没有，则遍历父类，执行父类的函数。

8、super必须放在子类的this前面


class Son extends Father{
    constructor(x,y)
    {
        super(x,y);  //1、调用了父类中的构造函数,赋值给父类的this对象
        this.x = x;  //2、将x,y传递给自己的this对象
        this.y = y;
    }
}

9、this的指向问题

（1）constructor里面的this指向的是创建的实例对象；

（2）方法中的this指向的是调用者；例如：下面的例子中，sum方法中的this指向的是这个按钮，因为按钮调用了这个方法。


<!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()
        {
            //这个sum方法中的this指向的是这个按钮，因为这个按钮调用了sum函数
            console.log(this);
            console.log("father's sum:"+(this.x+this.y));
        }
    }
    var f = new Father(2,5);
    </script>
</body>
</html>

三、构造函数和原型

1、不同对象的方法会重复申请内存进行创建


class Star{
    constructor(uname)
    {
         this.name = uname;
    }
    sing()
    {
        console.log("sing song");
    }        
}
var ldh = new Star("刘德华");
var zxy = new Star("张学友");
 
ldh.sing();
zxy.sing();
console.log(ldh.sing() ==== zxy.sing());//false,是两个函数

ldh和zxy的song方法分别在两个地址。

2、构造函数原型

每一个构造函数都有一个prototype属性，这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

构造函数通过原型分配的函数是所有对象所共享的。可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。


class Star{
   constructor(uname)
    {
        this.name = uname;
     }         
}
//song放到了构造函数的原型对象里面了。
Star.prototype.sing = function()
{
    console.log("sing song");
 
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
 
ldh.sing();//在构造函数的原型对象上找到song方法
zxy.sing();

一般情况下，我们的公共属性定义到构造函数里面，公共方法我们放到原型对象身上。

3、对象原型 __proto__

实例化后的对象系统自动添加一个属性：__proto__，他指向构造函数的原型对象prototype。

对象的属性__proto__和构造函数的原型对象prototype等价。


class Star{
	constructor(uname)
	{
		this.name = uname;
	}         
}
Star.prototype.song = function()
{
	console.log("sing song");
 
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
 
console.log(ldh.__proto__ === Star.prototype);//true;
 
ldh.sing();

查找规则：首先看ldh对象身上是否有sing方法，如果有，执行对象的sing方法。如果没有，去构造函数原型对象身上查找。

相关阅读:
LabVIEW光电在线测振系统
 基于springboot+vue的中小企业财务管理系统（源码+论文）
JS常用事件，使用方法
 Qt——升级系列（Level Two）：Hello Qt 程序实现、项目文件解析、
Redis实战篇一（短信登录）
2022-06-17 网工进阶（九）IS-IS-原理、NSAP、NET、区域划分、网络类型、开销值
 Self -Attention、Cross-Attention？
通过java实体类逆向生成sql
Latex中也能展示动态图？
jQuery_五角星评分/链式编程
原文地址：https://blog.csdn.net/qq_34754747/article/details/125483944