JavaScript中模拟类与ES6新增的Class的比较

作者: admin 发布日期: 2026-05-19T02:44 阅读: 400


JavaScript使用函数模拟类，并基于原型实现继承。自ECMAScript 2015(ES6)开始，JavaScript 中有了类(class)的概念，这这并不是说JavaScript可以像其它面向对象语言一样，可以基于类实现继承。JavaScript中的类只是对现有的基于原型的继承模型的一种语法包装，也就是说是一种语法糖，其本质上类还是一个函数。但它能让我们可以用更简明的语法实现继承，也使代码的可读性变得更高，同时为以后的JavaScript语言版本添加更多的面向对象特征打下基础。

  1. 类的定义
  2. 声明与表达式
  3. 静态方法
  4. 继承与扩展
  5. 访问父类方法

1. 类的定义

ES6中新增了class，这使我们可以使用类声明或类表达式的方式定义类。在而ES6之前，只能使用函数来模似类定义。

1.1 模拟类定义

在ES6之前，可以像下面这样模拟一个类。定义类时，还可以通过ES5中的Object.defineProperty来指定属性的可配置性、可访问性等：

function Person(name, sex) {
  this.name = name;
  Object.defineProperty(this, 'sex', {
    get: function() { return sex; }
  });
}

Person.prototype.sayName = function() {
  return this.name;
}

var person = new Person('王二小', '男');

console.log(person.sex);  // 男
console.log(person.sayName()); // 王二小
console.log(person.__proto__===Person.prototype); // true

这样我们就定义一个Person类，该类有name和sex两个属性和一个原型sayName方法，而sex属性是只读属性。


1.2 class类定义

使用ES6中类语句，可以像下面这样定义：

class Person {
  constructor(name, sex) {
    this.name = name;
    this._sex = sex;
  }

  get sex() {
    return this._sex;
  }

  sayName() {
    return this.name;
  }
}

var person = new Person('王二小', '男');

console.log(person.sex);  // 男
console.log(person.sayName()) // 王二小
console.log(person.__proto__===Person.prototype); // true

这定义了一个同样的Person类，它有有name和sex两个属性和一个sayName方法，而sex也是一个只读属性，这个只读属性使用get关键字定义，这是一种便捷方式。如果需要定义只读属性之外的，如：可配置、可枚举性等仍然需要使用defineProperty。


1.2 类和继承的本质

JavaScript是基于原型的语言，其继承是基于原型链实现的。无论ES6之前的类模拟，还是ES6中class类定义，其本质还是原型链继承。

在JavaScript的原型链继承中，需要继承到子类的属性(方法可以认为是一种特殊的属性)需要添加到原型链prototype对象上。通过new创建对象实例后，其本质是将类prototype对象上的属性复制到实例__proto__属性中。访问对象属性时，如果存在实例属性则返回实例属性，如果实例属性不存在，则在__proto__属性中查找有继承的原型属性。

所以，在前面模拟类，并创建实例后，进行person.__proto__===Person.prototype判断时，其返回值为true。

ES6中class类定义只是一种语法糖，只是看起来像类、用起来更方法，其本质上还是原型链继承。所在，在前面class定义类并创建实例后，进行person.__proto__===Person.prototype判断时，其返回值为true。

更新多关于原型链继承的介绍请参考：从prototype和__proto__理解Javascript的原型链继承


2. 声明与表达式

模拟类与class类定义都支持声明和表达式两种定义形式。

2.1 模拟类

在使用函数模拟类时，可以使用函数声明，或函数表达式两种定义形式。

使用函数声明：

function Person(name, sex) {
}

var person = new Person();

使用函数表达式：

var Person = function(name, sex) {
}

var person = new Person();


2.2 类定义

使用class定义类时，同样支持类声明或类表达式两种形式。

使用类声明：

class Person {
}

var person = new Person();

使用类表达式可以是匿名或指定名称的：

var Person = class {
}
// 或
var Person = class PersonClass{
}

var person = new Person();

两者的不同

类声明不同于函数声明，它没有作用域的提升。也就是说，必须在引用之前声明它。

对于函数模拟类来说可以来说，可以先引用再声明：

var person = new Person();

function Person(name, sex) {
}

但类声明没有作用域的提升，先引用会产生ReferenceError异常：

var person = new Person();  // 抛出 ReferenceError

class Person {
}


3. 静态方法

在面向对象语言中，静态方法是指不需要实例化，可以通过类名直接调用的方法，但静态方法不会继承到类实例中。静态方法经常用来作为工具函数。

在使用函数模拟类时，可以像下面这样定义静态方法：

function Person(name, sex) {}

Person.walk = function() {
	console.log('我会走路')
}

Person.walk();  // 我会走路
var person = new Person();
person.walk();  // TypeError

在ES6class类定义中，可以使用static关键字定义：

class Person {
  constructor() {}

  static walk(){
  	console.log('我会走路')
  }
}
Person.walk();  // 我会走路
var person = new Person();
person.walk();  // TypeError


4. 继承与扩展

一个类可以继承自另一个类，并可以扩展一些父类中没有方法。在原型继承中，实现比较复杂：

function Person(name, sex) {
  this.name = name;
  Object.defineProperty(this, 'sex', {
    get: function() { return sex; }
  });
}

Person.prototype.sayName = function() {
  return this.name;
}

function Student(name, sex) {
	Person.call(this, name, sex);
}	

Student.prototype = Object.create(Person.prototype);

Student.prototype.constructor = Student;

var student = new Student('王二小', '女');
console.log(student.sayName());  // 王二小

而在ES6的类继承中，可以使用extends扩展子类。语法非常简单明了：

class Person {
  constructor(name, sex) {
    this.name = name;
    this._sex = sex;
  }

  get sex() {
    return this._sex;
  }

  sayName() {
    return this.name;
  }
}

class Student extends Person {
  constructor(name, sex) {
    super(name, sex);
  }
}

var student = new Student('王二小', '女');
console.log(student.sayName());  // 王二小


5. 访问父类方法

在ES6之前，我们会像下面这样访问父类中的构造函数、方法等：

function Student(name, sex) {
  Person.call(this, name, sex);
} 

Student.prototype = Object.create(Person.prototype);

Student.prototype.constructor = Student;

Student.prototype.sayName = function() {
  // 调用父类中的 sayName 方法
  Person.prototype.sayName.call(this);
}

var student = new Student('王二小', '女');
student.sayName();  // 王二小

ES6的类定义中，还增加了super关键字，通过该关键字，使用我们可以访问父类的构造函数或方法等：

class Person {
  constructor(name, sex) {
    this.name = name;
    this._sex = sex;
  }

  get sex() {
    return this._sex;
  }

  sayName() {
    return this.name;
  }
}

class Student extends Person {
  constructor(name, sex) {
    super(name, sex);
  }

  sayName () {
    return '我是' + super.sayName() +' 我是一个学生';
  }
}

var student = new Student('王二小', '女');
console.log(student.sayName());  // 我是王二小 我是一个学生

ES6的类定义中，还增加了super关键字会非常有用。在上例中，我们通过它调用父类的构造函数，在子类sayName()方法中调用了父类中的方法，并进行了一定的扩展。