1、class类的实现
class的基本结构
定义及用法：class关键字定义类，创建构造函数，类名首字母大写
语法结构：
class 类名{constructor(参数1,参数2){// 构造函数体，添加实例对象成员}方法名(){// 添加原型对象成员}static 方法名{// 添加静态成员，只能用类调用}
}
var d=new 类名
ES5中，使用function定义一个类，并使用它来创建对象
function Person(name, age){//实例成员this.name = name;this.age = age;
}
Person.prototype.doWork = function(){console.log("ES5中在原型对象上添加方法")；
}
var p = new Person("Neld", 10);
在ES6中，使用class关键字定义同样的类
class Person{constructor(name,age){this.name = name;this.age = age;}doWork(){console.log("ES6中在原型对象上添加方法");}
}
var p = new Person("Neld",10);
console.log(p);
ES6中使用class定义类只是一种语法糖（语法糖能够增加程序的可读性，从而减少程序代码出错的机会的一种语法），底层最终还是转换成ES5中使用的function类定义类，以及其中的实例成员和原型成员。
class使用的细节
（1）constructor方法是创建对象的构造方法，通常在这里为实例对象定义属性（方法也是可以的），new 之后会自动调用。
（2）constructor方法外面的方法是对象的原型方法。
（3）在之前外面还为构造方法添加过成员（静态成员），前面要加static。
class Person{constructor(name,age){this.name = name;this.age = age;}static doWork(){console.log("ES6中在原型对象上添加方法");}
}
Person.doWork()
2、创建类和生成实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>创建类和生成实例</title>
</head>
<body><script type="text/javascript">class Start{constructor(name,age,year){this.name=name;this.age=age;this.year=year;}}var zs = new Start('张三','25','750');var ls = new Start('李四','30','750');console.log(zs.age);console.log(ls.name);</script>
</body>
</html>3、类中添加共有方法
（1）类的共有属性放在constructor里面
（2）多个函数方法之间不需要添加逗号分隔
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>类中添加共有方法</title>
</head>
<body><script type="text/javascript">class Start{constructor(name,age,year){this.name=name;this.age=age;this.year=year;}sing(song){console.log(this.name +"唱"+ song);}}var zs = new Start('张三','25','750');var ls = new Start('李四','30','750');console.log(zs.age);console.log(ls.name);zs.sing('娘子')ls.sing('啊哈')</script>
</body>
</html>4、类继承extends和super关键字
extends：继承
super：调用了父类中的构造函数（传值到父类中使用父类的方法）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>类继承extends和super关键字</title>
</head>
<body><script type="text/javascript">// class Father{// constructor(){// }// money(){// console.log(100);// }// }// class Son extends Father{// }// var son = new Son();// son.money();class Father{constructor(x,y){this.x = x;this.y = y;}sum(){console.log(this.x + this.y);}}class Son extends Father{constructor(x,y){super(x,y);//调用了父类中的构造函数}}var son = new Son(22,54);son.sum();</script>
</body>
</html>5、super调用父类普通函数以及继承中属性方法查找原则
继承中的属性或方法查找原则：就近原则
（1）继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法
（2）继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>super调用父类普通函数以及继承中属性方法查找原则</title>
</head>
<body><script type="text/javascript">class Father{say(){return "我是粑粑";}}class Son extends Father{say(){console.log(super.say() + "的儿子");//super.say()就是调用父类中的普通函数 say()}}var son = new Son();son.say();</script>
</body>
</html>6、super必须放到子类this之前
子类在构造函数中使用super，必须放在this前面（必须先调用父类的构造方法，在使用子类构造方法）
subtract()：减法操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>super必须放到子类this之前</title>
</head>
<body><script type="text/javascript">class Father{constructor(x,y){this.x = x;this.y = y;}add(){console.log(this.x + this.y);}}//子类继承父类加法方法 同时扩展减法方法class Son extends Father{constructor(x,y){//利用super调用父类的构造函数//super必须在子类this之前调用super(x,y);this.x = x;this.y = y;}subtract(){console.log(this.x - this.y);}}var son = new Son(98,5);son.add();son.subtract();</script>
</body>
</html>7、使用类2个注意点
1.在ES6中，类没有变量提升，所以必须先定义类，才能通过实例化对象
2.类里面的共有的属性和方法一定要加this使用
3.constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用类2个注意点</title>
</head>
<body><button>点击</button><script type="text/javascript">var that;var _that;class Star{constructor(uname,age){this.uname = uname;this.age = age;// this.sing();this.btn = document.querySelector('button');this.btn.onclick = this.sing;console.log(this);that = this;}sing(){//这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数console.log(this);console.log(that.uname);//that里面存储的是constructor里面的this}dance(){//这个_that里面的this 指向的是实例对象 ldh 因为 ldh 调用了这个函数_that = this;console.log(this);}}var ldh = new Star('离歌笑',20);console.log(that === ldh);ldh.dance();console.log(_that === ldh);// 1. 在 ES 6 中类没有变量提升 所以必须先定义类 才能通过实例化对象// 2. 类里面的共有的属性和方法一定要加this使用// 3. constructor 里面的this指向实例对象 方法里面的this指向这个方法的调用者</script>
</body>
</html>
)
