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

 2016年06月28日    494     声明


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类,该类有namesex两个属性和一个原型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类,它有有namesex两个属性和一个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()方法中调用了父类中的方法,并进行了一定的扩展。