ES2015系列：理解class与prototype继承

最新推荐文章于 2023-09-15 09:07:17 发布

原创最新推荐文章于 2023-09-15 09:07:17 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #继承 #javascript

ES6 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了ES6中Class的使用方法及其与ES5中Prototype继承的关系。通过实例对比了两种继承方式的实现过程，并介绍了Class的一些特性，如静态方法和属性赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节内容作为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()

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

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