ES6中的类的初步了解分析

ES6中的类的初步了解分析

---

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

定义

类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

先了解类声明：

// 类声明
class Star {
	constructor (uname,age){
		this.uname = uname;
		this.age = age;
	}
	// 方法
	sing () {
		console.log(this.name + '在唱歌');
	}
	say () {
		console.log(this.name + '说：我今年' + this.age + '岁了');
	}
}
// 实例化对象
var ldh = new Star('刘德华', 23);
ldh.sing();
ldh.say();

继承

extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类。

super 关键字用于调用对象的父对象上的函数。

// 子类继承父类(extends)
class Rap extends Star {
	constructor (uname, age, style) {
		// 属性继承
		super(uname, age);
		this.style = style;
	}
	sing () {
		// 方法继承
		super.sing();
	}
}

var zs = new Rap();
zs.sing();

三个注意点

1. 再ES6中没有变量提升，所以必须先定义类，才能通过类实例化对象
2. 类里面共有的属性和方法一定要加this使用
3. 类里面的this指向问题：constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者

<input type="button" value="点击" id="btn">
// 类声明
class Btn {
	constructor (id) {
		this.anniu = document.querySelector(id);
		// 如果添加事件：注意方法不准带括号
		this.anniu.onclick = this.show; // 此时show里面的this是<input>
	}

	show() {
		console.log(this);
	}
}

var n = new Btn('#Btn');