ES6学习 — Class

传统的JavaScript面向对象编程，是通过构造函数原型来实现的。例子：

function Num(n, m){
   this.n = n;
   this.m = m;
}
Num.prototype.sum = function(){
   return this.n + this.m;
}
var num = new Num(4, 5);
console.log(num.sum());  //9

在ES6规范里扩展了“class”的概念，基本写法如下：

//定义类
class Num {
    //构造方法
   constructor(n, m){
   	this.n = n;
   	this.m = m;
   }
    //定义方法
   sum(){
   	return this.n + this.m;
   }
}
var num = new Num(4, 5);
console.log(num.sum());  //9

与其他面向对象语言一样，ES6的class也有自己的构造方法。创建类时会构造一个默认方法，并且在new时立即执行它：

class Num {
   	 	
}
//等同于
class Num {
	constructor(){
		
	}
}

修改构造方法：

class Num {
	constructor(){
		console.log(9+9);
	}
}
var num = new Num();  //18

class通过new关键字实例化，如果忘记new关键字会报错。

class Num {
	constructor(){
		console.log(9+9);
	}
}

var num = Num();  //报错 Class constructor Num cannot be invoked without 'new'

var num = new Num();  //18

要注意的是，如果通过表达式去接收一个class之后类名就是表达式名字，再去new老类名就会报错。

var MyNum = class Num {
	constructor(){
		console.log(9+9);
	}
}
var num =  new Num();  //报错 Num is not defined

上面的例子里，Num只能在“class”内部使用，不能再被当做“类”来初始化
通过表达式还可以完成立即执行的“class”

var num = new class {
	constructor(){
		console.log(9+9);
	}
}
// 18

在“class”里有“set”和“get”两个关键字，可以实现get，set方法。

class MyClass {
	get name(){
		return '李四';
	}
	set name(val){
		console.log(val);  //张三
	}
}
var myclass = new MyClass();
console.log(myclass.name);  //李四
myclass.name = '张三';

“class”通过“extends”关键字实现继承，例如：

class Fruit {
	constructor(name){
		this.name = name;
	}
	show(){
		console.log(this.name);  //红富士
	}
}
class Apple extends Fruit {
	
}
var apple = new Apple('红富士');
apple.show();

如果子类需要修改constructor方法，则必须在constructor方法中调用super方法，否则就会报错。这是因为在实例化子类时没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

class Fruit {
	constructor(name){
		this.name = name;
	}
	show(){
		console.log(this.name);
	}
}

class Apple extends Fruit {
	constructor(name){
		//不调用super方法报错 this is not defined
	}
}

class Apple extends Fruit {
	constructor(name){
		super(name);
	}
}
var apple = new Apple('红富士');
apple.show();

上面例子中的super指向父类，还可以通过super调用父类的方法。
super关键字可以做为函数，也可以作为对象使用。上面例子中是作为函数使用，如果super作为函数使用，只能用在子类的构造函数之中，用在其他地方就会报错。
下面的例子是作为对象使用，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class Fruit {
	constructor(name){
		this.name = name;
	}
	showName(){
		return '父类的'+this.name;
	}
}
class Apple extends Fruit {
	constructor(name){
		super(name);
	}
	show(){
		return super.showName();
	}
	
}
var apple = new Apple('红富士');
console.log(apple.show());

欢迎分享本文，转载请保留出处：前端ABC » ES6学习 — Class