TypeScript 中的类

发表于 更新于 分类于

es5 里面的类

最简单的类

1
2
3
4
5
6
function Person() {
  this.name = "张三";
  this.age = 20;
}
var p = new Person();
alert(p.name);

构造函数和原型链里面增加方法

1
2
3
4
5
6
7
function Person() {
  this.name = "张三"; /*属性*/
  this.age = 20;
  this.run = function () {
    alert(this.name + "在运动");
  };
}

//原型链上面的属性会被多个实例共享 构造函数不会

1
2
3
4
5
6
7
8
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};
var p = new Person();
// alert(p.name);
// p.run();
p.work();

类里面的静态方法

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {
  this.name = "张三"; /*属性*/
  this.age = 20;
  this.run = function () {
    /*实例方法*/

    alert(this.name + "在运动");
  };
}

Person.getInfo = function () {
  alert("我是静态方法");
};

//原型链上面的属性会被多个实例共享 构造函数不会

1
2
3
4
5
6
7
8
9
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};
var p = new Person();
p.work();

//调用静态方法
Person.getInfo();

es5 里面的继承 对象冒充实现继承

1
2
3
4
5
6
7
8
9
10
11
12
function Person() {
  this.name = "张三"; /*属性*/
  this.age = 20;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};

Web 类 继承 Person 类 原型链+对象冒充的组合继承模式

1
2
3
4
5
6
7
8
function Web() {
  Person.call(this); /*对象冒充实现继承*/
}

var w = new Web();
// w.run();  //对象冒充可以继承构造函数里面的属性和方法

w.work(); //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法

es5 里面的继承 原型链实现继承

1
2
3
4
5
6
7
8
9
10
11
12
function Person() {
  this.name = "张三"; /*属性*/
  this.age = 20;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};

Web 类 继承 Person 类 原型链+对象冒充的组合继承模式

1
2
3
4
5
6
7
8
9
function Web() {}

Web.prototype = new Person(); //原型链实现继承
var w = new Web();

//原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
//w.run();

w.work();

原型链实现继承的问题？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name, age) {
  this.name = name; /*属性*/
  this.age = age;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};

var p = new Person("李四", 20);
p.run();
1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age) {
  this.name = name; /*属性*/
  this.age = age;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};
1
2
3
4
5
6
7
8
9
function Web(name, age) {}

Web.prototype = new Person();

var w = new Web("赵四", 20); //实例化子类的时候没法给父类传参

w.run();

// var w1=new Web('王五',22);

原型链 + 对象冒充的组合继承模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Person(name, age) {
  this.name = name; /*属性*/
  this.age = age;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};

function Web(name, age) {
  Person.call(this, name, age); //对象冒充继承   实例化子类可以给父类传参
}

Web.prototype = new Person();

var w = new Web("赵四", 20); //实例化子类的时候没法给父类传参

// w.run();
w.work();

// var w1=new Web('王五',22);

原型链+对象冒充继承的另一种方式

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name, age) {
  this.name = name; /*属性*/
  this.age = age;
  this.run = function () {
    /*实例方法*/
    alert(this.name + "在运动");
  };
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
  alert(this.name + "在工作");
};
1
2
3
4
5
6
7
8
9
10
11
12
function Web(name, age) {
  Person.call(this, name, age); //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
}

Web.prototype = Person.prototype;

var w = new Web("赵四", 20); //实例化子类的时候没法给父类传参

w.run();
// w.work();

// var w1=new Web('王五',22);

typescript 中的类

ts 中类的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person {
  name: string; //属性  前面省略了public关键词

  constructor(n: string) {
    //构造函数   实例化类的时候触发的方法
    this.name = n;
  }

  run(): void {
    alert(this.name);
  }
}
var p = new Person("张三");

p.run();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Person {
  name: string;

  constructor(name: string) {
    //构造函数   实例化类的时候触发的方法
    this.name = name;
  }

  getName(): string {
    return this.name;
  }
  setName(name: string): void {
    this.name = name;
  }
}
var p = new Person("张三");

alert(p.getName());

p.setName("李四");

alert(p.getName());

ts 中实现继承 extends、 super

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}
// var p=new Person('王五');
// alert(p.run())

class Web extends Person {
  constructor(name: string) {
    super(name); /*初始化父类的构造函数*/
  }
}

var w = new Web("李四");
alert(w.run());

ts 中继承的探讨 父类的方法和子类的方法一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}
// var p=new Person('王五');
// alert(p.run())

class Web extends Person {
  constructor(name: string) {
    super(name); /*初始化父类的构造函数*/
  }
  run(): string {
    return `${this.name}在运动-子类`;
  }
  work() {
    alert(`${this.name}在工作`);
  }
}

var w = new Web("李四");
// alert(w.run());

// w.work();

alert(w.run());

类里面的修饰符

typescript 里面定义属性的时候给我们提供了 三种修饰符

属性如果不加修饰符 默认就是 公有 （public）

  • public :公有 在当前类里面、 子类 、类外面都可以访问
  • protected：保护类型 在当前类里面、子类里面可以访问 ，在类外部没法访问
  • private ：私有 在当前类里面可以访问，子类、类外部都没法访问

public

公有 在类里面、 子类 、类外面都可以访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Person {
  public name: string; /*公有属性*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}
// var p=new Person('王五');
// alert(p.run())

class Web extends Person {
  constructor(name: string) {
    super(name); /*初始化父类的构造函数*/
  }
  run(): string {
    return `${this.name}在运动-子类`;
  }
  work() {
    alert(`${this.name}在工作`);
  }
}

var w = new Web("李四");

w.work();

类外部访问公有属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person {
  public name: string; /*公有属性*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}

var p = new Person("哈哈哈");

alert(p.name);

protected

保护类型 在类里面、子类里面可以访问 ，在类外部没法访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Person {
  protected name: string; /*公有属性*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}
var p = new Person("王五");
alert(p.run());

class Web extends Person {
  constructor(name: string) {
    super(name); /*初始化父类的构造函数*/
  }
  work() {
    alert(`${this.name}在工作`);
  }
}

var w = new Web("李四11");

w.work();

alert(w.run());

类外部没法访问保护类型的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person {
  protected name: string; /*保护类型*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}

var p = new Person("哈哈哈");

alert(p.name);

private

私有 在类里面可以访问，子类、类外部都没法访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Person {
  private name: string; /*私有*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}

class Web extends Person {
  constructor(name: string) {
    super(name);
  }

  work() {
    console.log(`${this.name}在工作`);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Person {
  private name: string; /*私有*/

  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在运动`;
  }
}

var p = new Person("哈哈哈");

alert(p.run());

静态属性 静态方法

1
2
3
4
5
6
7
8
9
10
11
function Person() {
  this.run1 = function () {};
}
Person.name = "哈哈哈";

Person.run2 = function () {
  // 静态方法
};
var p = new Person();

Person.run2(); // 静态方法的调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Per {
  public name: string;
  public age: number = 20;
  //静态属性

  static sex = "男";
  constructor(name: string) {
    this.name = name;
  }
  run() {
    /*实例方法*/

    alert(`${this.name}在运动`);
  }
  work() {
    alert(`${this.name}在工作`);
  }
  static print() {
    /*静态方法  里面没法直接调用类里面的属性*/

    alert("print方法" + Per.sex);
  }
}

// var p=new Per('张三');

// p.run();

Per.print();

alert(Per.sex);

多态

父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现
多态属于继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    // 具体吃什么  不知道，
    // 具体吃什么？继承它的子类去实现，每一个子类的表现不一样
    console.log("吃的方法");
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }
  eat() {
    return this.name + "吃粮食";
  }
}

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }

  eat() {
    return this.name + "吃老鼠";
  }
}

抽象类

它是提供其他类继承的基类，不能直接被实例化。
用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract 抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 标准：Animal 这个类要求它的子类必须包含 eat 方法
abstract class Animal {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract eat(): any; // 抽象方法不包含具体实现并且必须在派生类中实现。

  run() {
    console.log("其他方法可以不实现");
  }
}

// var a = new Animal(); /*错误的写法*/

class Dog extends Animal {
  // 抽象类的子类必须实现抽象类里面的抽象方法
  constructor(name: any) {
    super(name);
  }
  eat() {
    console.log(this.name + "吃粮食");
  }
}

var d = new Dog("小花花");
d.eat();

class Cat extends Animal {
  // 抽象类的子类必须实现抽象类里面的抽象方法
  constructor(name: any) {
    super(name);
  }
  run() {}
  eat() {
    console.log(this.name + "吃老鼠");
  }
}

var c = new Cat("小花猫");
c.eat();