目录
1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。
3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。
一、创建类和对象
例子如下：
class Star { // 1、首字母大写，类名不要加()
constructor(name,age){ //无需加function
this.name = name;
this.age = age
}
}
// 2、利用类创建对象 new
var a = new Star('Nan',10); //生成的实例对象加()
var b = new Star('Chen',20);
console.log(a);
console.log(b);打印效果：
注意：
1、通过class创建类，类名最好首字母大写
2、constructor(){},用来接收传递的参数，并且返回实例对象
3、constructor(){} 一旦生成new实例对象时，就会自动调用这个函数，如果不写这个函数，其类也会生成这个函数
4、生成实例 new 不能省略
5、语法规范：创建类后的类名不要加小括号 ，生成实例对象的类名需要加()，构造函数无需加function
二、类中添加其方法
直接看代码：
// 1、创建类class
class Star {
// 类的共有属性放到 constructor 里面
constructor(name,age){
this.name = name;
this.age = age
}
listen(music){
console.log('姓名:'+this.name+'年龄：'+this.age+'爱听的音乐：'+ music);
}
}
// 2、利用类创建对象 new
var a = new Star('Nan',10);
var b = new Star('Chen',20);
a.listen('One Day');
b.listen('Whistle');
console.log(a);
console.log(b);打印效果：
三、类的继承
比如这里创建一个父类，用子类继承其父类的属性
看例子：
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
sum(){
console.log(this.a +this.b);
}
}
// 继承父类
class Son extends Father{
constructor(x,y) {
this.x = x;
this.y = y;
}
}
var son = new Son(10,12);
son.sum();这里会报错，这里没有办法继承，就需用到一个新的方法super
super()方法
语法：super([arguments]); // 调用 父对象/父类 的构造函数
super关键字用于访问和调用一个对象的父对象上的函数
在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前。super关键字也可以用来调用父对象上的函数。
正确继承写法如下：
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
sum(){
console.log(this.a +this.b);
}
}
// 继承父类
class Son extends Father{
constructor(x,y) {
super(x,y); // 调用父类中的构造函数
/* this.x = x;
this.y = y; */
}
}
var son1 = new Son(10,12);
var son2 = new Son(100,120);
son1.sum();
son2.sum();打印结果：
四、子类继承父类的方法同时扩展自己的方法
特别注意：super必须写在this的前面！
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
fn(){
console.log(this.a + this.b);
}
}
// 子类继承父类
class Son extends Father{
constructor(a,b) {
// super必须写在this前面
super(a,b);
this.a = a;
this.b = b;
}
fn2(){
console.log(this.b - this.a);
}
}
var son = new Son(5,8);
son.fn();
son.fn2();
// 可以用父亲的，也可以用自己的五、super关键字调用父类的普通函数
如果父类和子类都有一个相同的函数，那么会优先调用谁的呢？答：就近原则
看下面这个例子：
class Father{
fn1(){
console.log("I'm daddy");
}
}
class Son extends Father{
fn1(){
console.log("I'm a son")
}
}
var son = new Son();
son.fn1(); //I'm a son这里我创建了一个Father类和一个Son类，但是都有一个相同的函数fn1()，返回的只有Son函数
打印效果如下：
如果父类和子类都有一个函数，调用的话是按照就近原则（先调用儿子如果找不到儿子的这个方法再往上面找
如果想要继承父亲的话就要在Son中添加super
class Father{
fn1(){
return "I'm daddy"; //这里要替换成return，不然会显示undefined
}
}
class Son extends Father{
fn1(){
// console.log("I'm a son")
console.log(super.fn1() + '的son')
}
}
var son = new Son();
son.fn1();// I'm daddy的son打印效果如下：
六、使用类的注意事项
看下面这个例子：
//html部分
<button>点击</button>
//script部分
class Star {
constructor(name,age) {
//console.log(this);//这里的this指向的是Star这个类
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
// console.log(this);// 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(this.name); //这里获取不了name的值
}
}
var a = new Star('Nanchen',89);打印效果如下：
解决办法：定义一个初始化变量，使得this赋值给这个定义的变量，然后用这个变量替换其中的this即可
var that = null; //进行初始化
class Star {
constructor(name,age) {
console.log(this);
// 让把this赋值给that
that = this;
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
console.log(this);
console.log(that.name); //this替换成that
}
}
var a = new Star('Nanchen',89);打印效果：
对比上段代码：
还需注意一点：
这里新建一个tour方法，这里的tour方法中的this指向的是整个Star的内容
// 定义一个空值
var that = null;
var _that = null;
class Star {
constructor(name,age) {
console.log(this);
// 让把this赋值给that
that = this;
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
// 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(this);
console.log(that.name);
}
tour(){
_that = this;
console.log(this);
}
}
var a = new Star('Nanchen',89);
a.tour();
console.log(_that === a); // true
console.log(that === a); // ture打印效果如下：