本节内容作为ES2015系列的一部分,主要是讨论一下ES6中的关键词class的使用方法,和原有prototype继承之间的关系,并对于一些JavaScript继承的相关内容作了一些简单的分析和总结,欢迎大家一起探讨学习。
prototype继承
对于JavaScript ES5版本中的继承关系,在JavaScript高级编程指南书中作了详细的介绍,这里我们通过一个实例来探讨一下ES5版本中继承关系是如何实现的。
function Person(name){
this.name=name||"Default";
}
Person.prototype.toString=function(){
if(undefined===this.gender){
this.gender='Person';
}
return this.name+"---"+this.gender;
}
var p1=new Person('Bob');
console.log(p1.toString()); //Bob---Person
function Boy(name){
this.gender='Boy'
Person.apply(this,arguments);
}
Boy.prototype=Object.create(Person.prototype,{
toString:{
value:function(){
return this.name+"---"+this.gender;
}
}
})
Boy.prototype.constructor=Boy;
var b1=new Boy('Elf');
console.log(b1 instanceof Person) //true
console.log(b1.toString()); //Elf---Boy
首先 我们定义了一个Person对象,并且包含有一个原型方法toString(),对比与直接将该函数写入构造函数中,这样我们在生成该对象的实例的时候,就不需要每次都创建该方法了。对于第一个输出语句console.log(p1.toString()) 我们可以得出为*‘Bob—Person’*
我们定义了一个新的函数Boy该函数的构造函数中调用了Person函数的构造函数。相当于将Person函数中的this.name=name||'Default’引入该构造函数中,实现了父类的初始化。
prototype的继承关系通过对象的prototype属性实现,通过Object.create我们可以创建一个对象拥有参数中的原型和属性,
Object.create(proto[, propertiesObject])
函数定义如上,第一个参数为父类对象的原型,第二个参数为可选参数,默认为undefined,可传入一个对象,包含有可枚举的属性,创建的方法可参考Object.defineProperties()的第二个参数定义。
因为我们直接将原型赋予了Boy,所以现在Boy的原型构造函数指向的是Person的构造函数我们还要将其重新赋予自己的构造函数。这样一个经典的继承链就完成了。
ES6 class继承
经典的prototype继承可以让我们很清晰的理解每个对象的组成和继承链的实现,但是也伴随着编码的复杂度提升,上述环节中如果忘记其中某个步骤,则无法正常的使用继承关系。ES6为了进一步的缩减代码的编写,和简化代码的逻辑,引入了关键词 class。但class的实现也是在prototype的基础上,做了一层语法糖,上述的例子我们重新使用ES6版本编写如下:
class Person {
constructor(name) {
this.name=name||"Default";
}
toString(){
return 'Name:'+this.name;
}
}
var p1=new Person();
console.log(p1.name);
class Boy extends Person{
constructor(name){
super(name);
this.gende='Boy';
}
toString(){
return super.toString()+" - Gende:"+this.gende;
}
}
var b1=new Boy('Bob');
console.log(b1);
console.log(b1.toString());
上述代码中我们定义了一个Person类,构造函数为constructor(关键词)指代的函数,我们也定义了自己的toString方法(在这里定义的方法依旧是prototype方法)。
程序中子类的继承通过extends关键词实现,这里的extends会帮我们完成上述的传统继承中的所有步骤。
这里我们可以看到程序中我们调用了super.toString()来直接的调用函数的父类方法,这里的super等价于Person.prototype,只不过自动的绑定了当前的this指针。
静态方法
在ES5代码中为了实现一个静态方法,我们只需要直接添加该方法到该类中即可比如:
var Boy=function(name){
this.name=name;
this.gender='Boy'
}
Boy.getGenger=function(){
return 'gender is Boy';
}
该方法可以直接调用而不需要实例实现。而在ES6中我们只需要在初始定义类的时候声明为static即可
class Boy extends Person{
constructor(name){
super(name);
this.gende='Boy';
}
static getGender(){
return 'Gender is boy';
}
toString(){
return super.toString()+" - Gende:"+this.gende;
}
}
属性赋值
对于class的赋值,支持表达式计算赋值,也就是说我们可以设置一个属性的名字为一个变量值,这样的方式使得定义属性的名称更加的灵活:
[methodName+"_1"](){
return 'Function name is '+methodName+'_1';
}
...
console.log(b1.methodName_1()); //Function name is methodName_1
这种方式等价于使用Boy.prototype[methodName + “_1”]=function(){}来定义类属性。
另外还有一些关于class的总结如下:
- typeof Boy ===‘function’ 可见创建的class其实仍旧只是一个函数对象。
- class虽然是函数对象,但是不能直接调用必须使用new 方法调用
- class的使用必须是先声明再调用,而函数则只要在同一个域之内,可以后声明的方式
比如:
a()
//定义在后面
function a(name){
return name;
}
class在使用上述方式的时候将会抛出异常(由于extends在实现上的原因,必须先声明该类).
a()
//定义在后面 var a=function(name){ return name; } 这样也是会报错的 function a(){} 这样才会函数提升
感谢指正,应该是对于变量var a 被提升到作用域的顶部,而后面的匿名函数仍旧保持undefined,直到赋值地方才被正确的赋值给了函数。导致了前面的a()找不到。
楼主的这个es6系列挺好的,正在细读每一篇
class
类 讲解的很详细,收藏了
继承有两种方式,一是像java那种基于类的继承体系,二是js这样基于原型的继承体系。现在es6将两个格格不入的糅合一起不知道楼主你怎么看。我之前看过一个国外知名开发人员的视频,他强烈反对在js中使用class和基于类的继承,不知道是不是合理的
javascript这种要统一宇宙的语言,这么做是正确的,语言本身增加复杂度是没有问题的,语法糖加得越多,用户越开心,死粉就越多。没看到c++就是这种模式发展死粉的么?说c++不好那是要被圣战的。当大家理解了javascript的雄心之后自然就能理解他的设计了。
@youth7 ,我也觉得,这class把js改造的越来越像面向对象的语言了,真有点不习惯
赞!!!