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

赞 (2)
分享到:更多 ()

发表评论 0