一、创建类和对象
例子如下：
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
打印效果如下：
使用类的注意事项总结：
1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。
2. 类里面的共有的属性和方法一定要加this使用。
3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。
