一、传统方法与ES6"类"
JavaScript语言的传统方法是通过构造函数定义并生成新对象,如:
function User(name,pass){
this.name = name;
this.pass = pass;
}
User.prototype.showName = function(){
console.log(this.name);
}
var u1 = new User('jack','123');
u1.showName();
执行结果
上述写法与传统的面向对象语言(比如C++)的写法就有很大的差异,而ES6中就引入了Class(类)的概念作为对象的模板,通过class关键字可以定义类。不过需要注意的是新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。
上述代码通过ES6的"类"改写后,就是这样:
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
console.log(this.name);
}
}
var u1 = new User('jack','123456');
u1.showName();
执行结果
上面的代码定义了一个"类",可以看到里面有一个constructor方法,这就是构造函数,而this关键字则代表实例对象。也就是说,ES5的构造函数User对象ES6的User类的构造方法。除了构造方法以外,User类还定义了一个showName的方法,注意:定义"类"的方法时,前面不需要加上function这个保留字,同时方法之间不需要逗号隔开。
二、Class的继承
Class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承更加清晰和方便:
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
console.log(this.name);
}
}
class VipUser extends User {
constructor(name,pass,level){
super(name,pass);
this.level = level;
}
showLevel(){
console.log(this.level);
}
}
var v1 = new VipUser('jack','123456','3');
v1.showName();
v1.showLevel();
执行结果
上述代码中,super作为函数调用时代表父类的构造函数。ES6要求,子类的构造函数必须执行一次super函数。在执行过程中,super虽然代表了父类User的构造函数,但是返回的是子类VipUser的实例,即super内部的this指向的是VipUser,因此super()在这里相当于User.prototype.constructor.call(this)。需要说明的是:作为函数时,super()只能在子类的构造函数当中,否则会报错。
除此以外super还可以作为对象在普通方法中指向父类的原型对象;在静态方法中指向父类:
class A {
p(){
return 2;
}
}
class B extends A {
constructor(){
super();
}
show(){
console.log(super.p());
}
}
var b = new B();
b.show();
上面代码中,子类B中的super.p()就是当作一个对象来使用。这时super在普通方法之中指向A.prototype,所以super.p()就相当于A.prototype.p()
注意:由于super作为对象使用时是指向父类的原型对象,所以定义在父类实例上的方法或属性是无法通过super调用的。比如我们在A类的构造函数中添加一个属性attr:
class A {
constructor(){
this.attr = 'attr';
}
p(){
return 2;
}
}
A.prototype.x = 'x';
class B extends A {
constructor(){
super();
}
show(){
console.log(super.attr);
console.log(super.x);
console.log(super.p());
}
}
var b = new B();
b.show();
执行结果