es6 class类和继承_es6中class类的超类

console.log(date.constructor===Date);//true

var reg=/a/g;
console.log(reg.constructor===RegExp);//true

var div=document.createElement("div");
console.log(div.constructor===HTMLDivElement);//true

  

##### 3、类中除了函数中的局部变量就是类中的属性，类中的this就是实例化对象

//以下代码只为解释定义一个人类的类,并且去如何使用它,中文编程万万不可以
class man{
eyes=2;
mouse=1;
ear=2;
hands=2;
foots=2;
name;//创建了一个man的类,有以上属性
constructor(_name){
this.name=_name;
}
walk(){//man的类有walk() run() eat() fire()的方法
console.log(this.name+“走”)
}
run(){
console.log(this.name+“跑”)
}
eat(){
console.log(this.name+“吃”)
}
fire(){
console.log(this.name+“生火”)
}
}

var xiaoming=new man(“小明”);
//创建一个xioaming的实例化对象，具备这个man的类的所有方法和属性，可以直接使用
xiaoming.eat();
xiaoming.run();
var xiaohua=new man(“小花”);
//创建了一个xioahua的实例化对象
xiaohua.run();
xiaohua.fire();

1. 通过构造函数实例化的对象，就是这个类的实例对象(比如上述代码xiaohua就是通过构造函数实例化的对象，它就是这个类的实例对象)
2. 因此这个实例对象就具备了类所有属性和方法，比如上述代码xiaohua就具备man这个类的所有属性和方法
3. 这个实例对象就可以调用他自身的方法和属性了
4. **因为构造函数默认生成实例化对象，因此不能在构造函数中使用return 返回其他内容，构造函数不允许写return**
5. **谁调用方法，在类的函数中this就是那个实例对象**


  

##### 4、这里进行一个小练习，习惯一下面向对编程的思维,下面有生成10个随机小方块的两个不同的代码,看看有什么不同


第一种:

function randomColor(){
var col=“#”;
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}

class Rect{//类名首字母大写,驼峰式命名
elem;
constructor(w,h,c){
this.elem=this.createRect(w,h,c);//这里的this指该类
}
createRect(w,h,c){//创建div的方法
let div=document.createElement(“div”);
Object.assign(div.style,{
width:w+“px”,
height:h+“px”,
backgroundColor:c,
float:‘left’
});
return div;
}
appendTo(parent){//把创建的div添加到父元素中
parent.appendChild(this.elem);
}
play(){
console.log(“aaa”);
}
run(){
console.log(“1”);
}
}

for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let rect=new Rect(w,w,randomColor());//实例化10个对象,随机生成宽高和颜色
rect.appendTo(document.body);//添加到body中
}

第二种:

function randomColor(){
var col=“#”;
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}
class Rect1{
elem;
w=50;
h=50;
c=“red”;
constructor(){
this.elem=this.createRect();
}
createRect(){
let div=document.createElement(“div”);
Object.assign(div.style,{
width:this.w+“px”,
height:this.h+“px”,
backgroundColor:this.c
});
return div;
}
appendTo(parent){
parent.appendChild(this.elem);
}
setWH(w,h){
this.elem.style.width=w+“px”;
this.elem.style.height=h+“px”;
}
setBg(color){
this.elem.style.backgroundColor=color;
}

}

for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let rect=new Rect1();//实例化10个对象,随机生成宽高和颜色
rect.setWH(w,w);
rect.setBg(randomColor())
rect.appendTo(document.body);//添加到body中
}

两种实现的效果都一样,第一种已经算是半个面向对象的编程方式了，第二种把每个变量当成属性放在类中，更能体现面向对象的编程思想  
 ![生成十个随机div](https://img-blog.csdnimg.cn/2020011120384443.png)


##### 5、继承



> 
> **Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。**
> 
> 
> 


比如,要继承Rect1类，只需要使用extends就可以继承过来Rect1的属性和方法了，继承父类后，必须在构造函数中使用super()调用超类的构造函数，超类的是什么，这个就执行的是什么

class Circle1 extends Rect1{
constructor®{
// 继承父类后,必须在构造函数中调用超类的构造函数
super();//超类的构造函数,超类是什么,这个就是什么
//超类的构造函数如果有参数的，在这里子类中必须传入这个需要参数

   }

}

比如，现在我要创建十个圆形，只需在上述创建的10的方块的代码中添加部分属性就可以做到，那就不用新写一个类了，可以在原有的类上继承它的属性，然后再添加新的属性就可以做到



> 
> 上述代码第一种方法
> 
> 
> 

//随机生成颜色函数
function randomColor(){
var col=“#”;
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}

//创建父类
class Rect{
elem;
constructor(w,h,c){
this.elem=this.createRect(w,h,c);//这里的this指该类
}
createRect(w,h,c){//创建div的方法
let div=document.createElement(“div”);
Object.assign(div.style,{
width:w+“px”,
height:h+“px”,
backgroundColor:c,
float:‘left’
});
return div;
}
appendTo(parent){//把创建的div添加到父元素中
parent.appendChild(this.elem);
}
play(){
console.log(“aaa”);
}
run(){
console.log(“1”);
}
}

//继承
class Circle extends Rect{
constructor(w,h,c,r){
super(w,h,c);//超类的构造函数是有参数的,因此在这里子类中必须传入这个需要参数
this.elem.style.borderRadius=r+“%”;
}
setBorder(w,c){
this.elem.style.border=w+"px solid "+c;
}
// 因为子类的方法与父类的方法相同,因此会覆盖
play(){
console.log(“bbb”);
}
run(){
super.run();//执行超类的run方法,在继续执行下面的内容
console.log(“2”);
}
}

//实例化
for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let c=new Circle(w,w,randomColor(),50);
c.setBorder(2,“red”)
c.appendTo(document.body);
c.play();
c.run();
}

> 
> 上述代码第二种方法
> 
> 
> 

//随机生成颜色函数
function randomColor(){
var col=“#”;
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}

//创建父类
class Rect1{
elem;
w=50;
h=50;
c=“red”;
constructor(){
this.elem=this.createRect();
}
createRect(){
let div=document.createElement(“div”);
Object.assign(div.style,{
width:this.w+“px”,
height:this.h+“px”,
backgroundColor:this.c
});
return div;
}
appendTo(parent){
parent.appendChild(this.elem);
}
setWH(w,h){
this.elem.style.width=w+“px”;
this.elem.style.height=h+“px”;
}
setBg(color){
this.elem.style.backgroundColor=color;
}
play(){
console.log(“aaa”);
}
run(){
console.log(‘1’);
}

}

//继承
class Circle extends Rect1{
constructor(){
super();//使用super()调用超类的构造函数
}
borderR®{
this.elem.style.borderRadius=r+“%”;
}
setBorder(w,c){
this.elem.style.border=w+"px solid "+c;
}
// 因为子类的方法与父类的方法相同,因此会覆盖
play(){
console.log(“bbb”);
}
run(){
super.run();//执行超类的run方法,在继续执行下面的内容