TypeScript与ES6中 - 类(Class)的区别

前言

今天学习TypeScript继承章节，然后阅读了阮一峰老是的ES6入门，发现十分有必要针对TypeScript类与ES6标准类进行系统的总结。TypeScript的出现就是为了贴近面向对象的语法，并且TypeScript参考ES6规范，通过TypeScript编译器编译成标准ES5代码。正是由于TypeScript的定位，导致了很多语法与ES6语法相似，但又有些许不同，正是由于这种特征使人无法清楚的区分哪些是ES6已有的特性，而哪些又是TypeScript所特有的。

接下来本文将对TypeScript特有语法以及ES6已有语法进行归类总结，希望以下内容能帮助到大家。

JavaScript中何为类？

既然是对类的探究，那么我们就必须先知道，在JavaScript的世界中，什么是类，类又是从何而来的。

首先ES5中是不存在类(class)的概念的，而只存在方法(function)，以下便是ES5中对于一个方法的声明

function Person(name){
   
	this.name = name;
}
Person.prototype.sayName = function(){
   
	console.log('I am' + this.name);
}

var bob = new Person('Bob');

可见ES5中的方法是可以使用new进行实例化的，正是由于ES5中写法与传统的面向对象语言比如(C++ 和 Java)的差异很大，于是乎ES6就提供了接近传统语言的写法，引入了类class的概念。

但是我们要知道ES6的类(class)在很多非现代浏览器上是无法支持的，于是就需要将ES6的类转化成ES5的代码以便支持传统浏览器，并且使用ES5现有的特性来模拟很多类的特性，比如继承、静态方法、访问限定符等。

TypeScript就是一个基于ES6语法的编译器，其可将以ts结尾的TypeScript代码编译成ES5代码。

弄清楚了上述关系之后，我们首先就来看看ES6规范中对于类是如何定义的，并且支持些什么吧：

ES6中的类

ES6中的类与传统面向对象的语法就极为相似，以下就是上述Person类在ES6中的写法：

class Person{
   
	constructor(name){
   
		this.name = name;
	}
	sayName(){
   
		console.log('I am' + this.name);
	}
}

let bob = new Person('Bob');

以上示例代码中有一个constructor方法，还有一个sayName方法，其中constructor方法对应于ES5中的Person构造函数，而sayName对应于ES5中原型链上的sayName方法。

参照阮一峰老师的ES6入门 - 构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面，ES6的类方法与ES5的类方法唯一的不同就是ES6的方法是non-enumerable(不可枚举)的，而ES5由于是直接使用class.prototype.xxx = function(){}，因此ES5的方法是可枚举的。并且constructor中的this无论是ES5还是ES6都是指向的实例对象。

TypeScript中的类

见过了ES5与ES6中对于类的定义之后，那么TypeScript中是如何定义类的呢？请看以下代码：

class Person{
   
	name:string;//需要指明属性类型
	constructor(name:string){
   //需要指明参数类型
		this.name = name;
	}
	sayName(){
   
		console.log('I am' + this.name);
	}
}

let bob = new Person('Bob');

可见TypeScript的类定义与ES6十分相似，只不过TypeScript中增加了属性类型定义。

以下将针对我认为ES6与TypeScript中区别最大的部分，和最重要的部分进行描述，如果希望知道更多细节，请阅读TypeScript文档和ES6入门

访问限定符

在传统面向对象语言中，我们最常见的访问限定符有private,public,protected，但是在ES6中针对访问限定符的定义还是处于提案阶段，现也没给出合适的解决方案，以下内容截取自ES6入门：

---

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装，但 ES6 不提供，只能通过变通方法模拟实现。

class Widget {
   <