2-2+2-3+2-4+2-5【原型】-深度透彻掌握原型

慕课TS高级课程

第二章 深度掌握TypeScript OOP

2-10 TS 类 和 ES6 类对比

1. 为什么要理解 TS 类和 ES6 类的区别

 TS 类和 ES6 类 看着很像，但又有很多不同，区分 TS  类 和 ES6 类，既可以让我们 对 TS 类 的优势印象更深刻，也会减少 TS 类 和 ES6 类 概念上的混淆。

2. 定义类属性的方式不同

（1）TS 类有多种定义属性的方式，如下：

方式1：先在类中定义属性然后在构造函数中通过 this 赋值；

方式2：构造函数直接为参数增加 public，给构造器的参数如果加上 public，这个参数就变成了一个属性,

默认构造函数会给这个属性赋值[隐式操作]，以上节课的 Order 类为例，具体代码如下：

class Order {
    constructor(public orderId: number, public date: Date,public custname: string,
        public phone: string, public orderDetailArray: Array) {
        // 无需this赋值
     }
     ......
 }    

（2）ES6 依然沿袭了 JavaScript 赋值的方式，在构造函数直接 this 来定义属性并赋值，代码如下：

class Order {
    constructor(orderId, date, custname, phone, orderDetailArray) {
        this.orderId = orderId;
        this.date = date;
        this.custname = custname;
        this.phone = phone;
        this.orderDetailArray = orderDetailArray;
    }
}

3. ES6类没有访问修饰符，TS类自带访问修饰符

ES6类暂时还没有访问修饰符【public protected private】这也让 ES6 类设置访问权限变的异常麻烦，即使借助call 方法或者 symbol 类型设置了访问权限局限性也很大，其实也并没有真正彻底解决访问权限的问题。这点让ES6类在项目中对属性和方法的权限控制很受限制。 TS 类却自带 public protected private 三种访问权限，设置访问权限轻松自如。【不设置默认访问权限为 public 】 理解访问修饰符很简单，后面我们讲解完继承后再讲解，大家很快会理解。

4. TS 类是静态类型语言的类，而 ES6 类按照 JavaScript 的一个语法标准设计而成

TS 是静态类型语言，具有类型注解和类型推导的能力，项目上线后隐藏语法和类型错误的的风险几乎为零，而ES6 是 JavaScript 的一个语法标准，没有数据类型检查的能力，举一个简单例子来说明问题。

  // ES6
  const x = 3;
  x = 10; // ES6没有任何语法错误提示
  
  // TS
  const x = 3;
  x = 10;//无法分配到 "x" ，因为它是常数。

5. TS类可以生成ES5或ES6或以上版本的js文件

通过设置 tsconfig.json 文件的 target 属性值为 ES6，那么生成的js文件就是 ES6 版本的js文件