American.y = '静态属性y'; Person.x; // 静态属性x Person.foo(); // 类 Person 有一个 静态属性x Chinese.x; // 静态属性x Chinese.foo(); // 类 Chinese 有一个 静态属性x Chinese.bar(); // 类 Chinese 的父类是 Person American.x; // 静态属性x American.y; // '静态属性y American.foo(); // 类 American 有一个 静态属性x American.bar(); // 类 American 有自己的 静态属性y ，还继承了父类 Person 的 静态属性x const p = new Person('Lucy', 20, '女'); const c = new Chinese('韩梅梅', 18, '女', '咏春拳'); const a = new American('特朗普', 72, '男', 'Donald J. Trump'); c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了 c.martial(); // 韩梅梅 正在修炼 咏春拳 a.sayHello(); // 你好我是 特朗普先生 ,我 72 岁了 a.sendTwitter('推特治国'); // 特朗普 : 推特治国
ES6 之前的 class
ES5 的继承，实质是先创造子类的实例对象 this，
然后再将父类的方法添加到 this 上面 Parent.apply(this) 。
ES6 的继承机制完全不同，实质是先创造父类的实例对象 this，所以必须先调用 super 方法，
然后再用子类的构造函数修改this。
为了实现继承，我们需要先实现一个 extendsClass 函数，它的作用是让子类继承父类的静态成员和实例成员。
function extendsClass(parent, child) { // 防止子类和父类相同名称的成员被父类覆盖 var flag = false; // 继承静态成员 for (var k in parent) { flag = k in child; if (!flag) { child[k] = parent[k]; } } // 继承父类prototype上的成员 // 用一个新的构造函数切断父类和子类之间的数据共享 var F = function () { } F.prototype = parent.prototype; var o = new F(); for (var k in o) { flag = k in child.prototype; if (!flag) { child.prototype[k] = o[k]; } } }
function Person(name, age, gender) { this.name = name; this.age = age; this.gender = this.gender; // 如果将 getter/setter 写在 prototype 会获取不到 Object.defineProperty(this, 'fullName', { get: function () { var suffix = this.gender === '男' ? '先生' : '女士'; return this.name + suffix; }, set: function () { console.log('你已改名为 ' + value + ' '); }, }); } Person.x = '静态属性x'; Person.foo = function () { console.log('类 ' + this.name + ' 有一个 ' + this.x); } Person.prototype = { constructor: Person, // get fullName() { }, // set fullName(value) { }, sayHello: function () { console.log('你好我是 ' + this.fullName + ' ,我 ' + this.age + ' 了'); }, };
function Chinese(name, age, gender, kungfu) { // 用call改变this指向，实现继承父类的实例属性 Person.call(this, name, age, gender); this.kungfu = kungfu; } Chinese.bar = function () { console.log('类 ' + this.name + ' 的父类是 ' + Person.name); Person.foo(); } Chinese.prototype = { constructor: Chinese, martial: function () { console.log(this.name + ' 正在修炼 ' + this.kungfu + ' '); } }; extendsClass(Person, Chinese);
function American(name, age, gender, twitter) { Person.call(this, name, age, gender); this.twitter = twitter; } American.y = '静态属性y'; American.bar = function () { console.log('类 ' + this.name + ' 有自己的 ' + this.y + ' ，还继承了父类 ' + Person.name + ' 的 ' + Person.x); } American.prototype = { constructor: American, sendTwitter: function (msg) { console.log(this.name + ' : '); console.log(' ' + msg); } }; extendsClass(Person, American);
TypeScript 中的 class
讲完了 JavaScript 中的类，还是没有用到 抽象类，抽象方法，私有方法这三个概念，由于 JavaScript 语言的局限性，想要实现这三种概念是很困难的，但是在 TypeScript 可以轻松的实现这一特性。
首先我们稍微修改一下例子中的描述，Person 是抽象类，因为一个正常的人肯定是有国籍的，Person 的 sayHello 方法是抽象方法，因为每个国家打招呼的方式不一样。另外一个人的性别是只能读取，不能修改的，且是确定的是，不是男生就是女生，所以还要借助一下枚举。
enum Gender { female = 0, male = 1 };
abstract class Person { private x: string = '私有属性x，子类和实例都无法访问'; protected y: string = '私有属性y，子类可以访问，实例无法访问'; name: string; public age: number; public readonly gender: Gender; // 用关键字 readonly 表明这是一个只读属性 public static x: string = '静态属性x'; public static foo() { console.log(`类 ${this.name} 有一个 ${this.x}`); } constructor(name: string, age: number, gender: Gender) { this.name = name; this.age = age; this.gender = gender; } get fullName(): string { const suffix = this.gender === 1 ? '先生' : '女士'; return this.name + suffix; } set FullName(value: string) { console.log(`你已改名为 ${value} `); } // 抽象方法，具体实现交由子类完成 abstract sayHello(): void; }