ES2015系列:Class与prototype继承
发布于 2 年前 作者 zhangmingkai4315 3451 次浏览 最后一次编辑是 1 年前 来自 分享

本节内容作为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的总结如下:

  1. typeof Boy ===‘function’ 可见创建的class其实仍旧只是一个函数对象。
  2. class虽然是函数对象,但是不能直接调用必须使用new 方法调用
  3. class的使用必须是先声明再调用,而函数则只要在同一个域之内,可以后声明的方式

比如:

a()

//定义在后面
function a(name){
	return name;
}

class在使用上述方式的时候将会抛出异常(由于extends在实现上的原因,必须先声明该类).

8 回复

a()

//定义在后面 var a=function(name){ return name; } 这样也是会报错的 function a(){} 这样才会函数提升

感谢指正,应该是对于变量var a 被提升到作用域的顶部,而后面的匿名函数仍旧保持undefined,直到赋值地方才被正确的赋值给了函数。导致了前面的a()找不到。

楼主的这个es6系列挺好的,正在细读每一篇

class类 讲解的很详细,收藏了

继承有两种方式,一是像java那种基于类的继承体系,二是js这样基于原型的继承体系。现在es6将两个格格不入的糅合一起不知道楼主你怎么看。我之前看过一个国外知名开发人员的视频,他强烈反对在js中使用class和基于类的继承,不知道是不是合理的

@youth7

javascript这种要统一宇宙的语言,这么做是正确的,语言本身增加复杂度是没有问题的,语法糖加得越多,用户越开心,死粉就越多。没看到c++就是这种模式发展死粉的么?说c++不好那是要被圣战的。当大家理解了javascript的雄心之后自然就能理解他的设计了。

@youth7 ,我也觉得,这class把js改造的越来越像面向对象的语言了,真有点不习惯

回到顶部