学习Angular 2 , 《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音,这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。
类
传统的 JavaScript 程序是使用函数和基于原型(Prototype)继承来创建可重用的“类”,这对于习惯面向对象编程的开发者来说并不友好。TypeScript 中可以支持使用基于类的面向对象编程。
类的例子
示例代码如下:
class Car { engine: string; constructor(engine: string) { this.engine = engine; } drive(distanceInMeters: number = 0) { console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine); } }
上面声明了一个汽车类,这个类有三个类成员:
下面实例化一个Car的对象,通过执行构造函数对其初始化。
let car = new Car('petrol'); car.drive(100); // 输出:A car runs 100m powered by petrol
继承与多态
封装、继承、多态是面向对象的三个特性。上面的例子中把汽车的行为写到一个类中,即所谓的封装。在 TypeScript 中,使用 extends 关键字即可方便地实现继承。示例代码如下:
// 继承自前文的 Car 类 class MotoCar extends Car { constructor(engine: string) { super(engine); } } class Jeep extends Car { constructor(engine: string) { super(engine); } drive(distanceInMeters: number = 100) { console.log("Jeep...") retrun super.drive(distanceInMeters); } } let tesla = new MotoCar('electricity'); let landRover: Car = new Jeep('petrol'); tesla.drive(); // 调用父类的 drive() 方法 landRover.drive(200); // 调用子类的 drive() 方法
从上面的例子可以看到,MotoCar 和 Jeep 是基类Car的子类,通过 extends 来继承父类,子类可以访问父类的属性和方法,也可以重写父类的方法。Jeep 类重写了父类的 drive() 方法,这样 drive() 方法在不同的类中就具有不同的功能,这就是多态。
修饰符
在类中的修饰器可以分为公共(public)、私有(private)和受保护(protected)三种类型。
public 修饰符
在 TypeScript 里,每个成员默认为 public,可以被自由访问,我们也可以显式地给 Car 类里定义的成员加上 public 修饰符,示例代码如下:
class Car { public engine: string; public constructor(engine: string) { this.engine = engine; } public drive(distanceInMeters: number = 0) { console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine); } }
private 修饰符
当类成员被标记为 private 时,就不能在类的外部访问它,示例代码如下:
class Car { private engine: string; constructor(engine: string) { this.engine = engine; } } new Car('petrol').engine; // 报错:engine 属性是私有的,只能在类内部访问
protected 修饰符
protected 修饰符与 private 修饰符的行为很相似,但有一点不同,protected 成员在派生类中仍然可以访问,示例代码如下:
class Car { private engine: string; constructor(engine: string) { this.engine = engine; } drive(distanceInMeters: number = 0) { console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine); } } class MotoCar extends Car { constructor(engine: string) { super(engine); } drive(distanceInMeters: number = 100) { super.drive(distanceInMeters); } } let tesla = new MotoCar('electricity'); console.log(tesla.drive()); // 正常 console.log(tesla.engine); // 报错
静态属性
类的静态成员存在于类本身而不是类的实例上,我们使用 类名. 来访问静态属性。可以使用 static 关键字来定义类的静态属性,示例代码如下:
class Grid { static origin = {x: 0,y: 0}; constructor(public scale: number) {} calculateDistanceFromOrigin(point: {x: number; y: number;}) { let xDist = (point.x - Grid.origin.x); let yDist = (point.y - Grid.origin.y); return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale; } } let grid1 = new Grid(1.0); let grid2 = new Grid(5.0); // 输出:14.142... console.log(grid1.calculateDistanceFromOrigin({x: 10,y: 10})); // 输出:2.828... console.log(grid2.calculateDistanceFromOrigin({x: 10,y: 10}));
抽象类
TypeScript 有抽象类的概念,他是供其他类继承的基类,不能直接实例化。抽象类必须包含一些抽象方法,同时也可以包含非抽象的成员。abstract 关键字用于定义抽象类和抽象方法。抽象类中的抽象方法不包含具体实现,但是必须在派生类中实现,示例代码如下:
abstract class Person { abstract speak(): void; // 必须在派生类中实现 walking(): void { console.log('Walking on the road'); } } class Male extends Person { speak(): void { console.log('How are you?'); } } let person: Person; // 创建一个抽象类的引用 person = new Person(); // 报错,不能创建抽象类实例 person = new Male(); // 创建一个 Male 实例 person.speak(); person.walking();原文链接:https://www.f2er.com/angularjs/147597.html