TS02 TS中的类（详解）

TS中的类

1.1 ES5中的类

• 1.最简单的类

function Person(){
    
    
    this.name = 'kjh';
    this.age= 20;
}

var newPerson = new Person();
console.log(newPerson)

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

function Person(){
    
    
    this.name = 'kjh';
    this.age= 20;
    this.sayHi = function(){
    
    
        console.log('hi')
    }
}

//也可以在圆形脸上增加方法和属性
Person.prototype.job = 'teacher'

var newPerson = new Person();
console.log(newPerson)
console.log(newPerson.sayHi());

• 3.构造函数的静态方法

function Person(){
    
    
    this.name = 'kjh';
    this.age= 20;
}

Person.qq = function(){
    
    
    console.log('861918672')
}

Person.qq();

• 4.ES5里面的继承(只举例一个简单的继承)

function Person(){
    
    
    this.name = 'kjh';
    this.age= 20;
}

function Son(){
    
    
    Person.call(this)
}

var newSon = new Son();
console.log(newSon.name)
console.log(newSon.age)

2.1 TS中的类

• TypeScript中的类

//TypeScript中的类

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

    run():void{
    
    
        console.log(this.name);
    }

    getName():string{
    
    
        return this.name;
    }

    setName(name:string):void{
    
    
        this.name = name;
    }

}

var p1 = new Person('康家豪');
p1.run();

console.log(p1.getName());
p1.setName('李四')
console.log(p1.getName());

• typeSctipt 中实现继承 extends 、super

//ts中实现继承
class Person {
    
    
    name:string;

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

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

var p = new Person('张三');
console.log(p.run());


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

var s = new Son('十分');
console.log(s.name)

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

/**
 * 属性如果不加修饰符 默认为public
 * public ： 公有      在类里面/子类/类外面都可以访问
 * protected ： 保护类型   在类里面\子类里面可以访问、在类外面不可以访问
 * private ： 私有 在类里面可以访问：子类，类外面都无法访问
 */


 //如果没有添加属性则默认为public
 class Person {
    
    
    name:string;
    age:number;

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

     //类内部访问公有属性
    sayHi():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age} ---父类（当前类）`
    }
 }

 class Son extends Person{
    
    
     constructor(name:string,age:number){
    
    
         super(name,age)
     }

     talk():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age}---子类`
    }
 }

 
//子类中访问公有属性
 var s1 = new Son('张三',99)
 console.log(s1.talk())
//  张三的年龄是99---子类

//当前类（父类）访问公有属性
 console.log(s1.sayHi());
//  张三的年龄是99 ---父类（当前类）

 //类外部访问公有属性
 var p1 = new Person('康家豪',21);
 console.log(p1.sayHi());
//  康家豪的年龄是21 ---父类（当前类）
 


 protected 保护类型
 class Person {
    
    
    protected name:string;
    protected age:number;

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

     //类内部访问公有属性
    sayHi():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age} --- 当前类（父类）`
    }
 }


 class Son extends Person{
    
    
     constructor(name:string,age:number){
    
    
         super(name,age)
     }

     talk():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age}---子类`
    }
 }
//子类中访问保护属性
 var s1 = new Son('张三',99)
 console.log(s1.talk())

//当前类中访问保护属性
console.log(s1.sayHi())

//类外部访问保护属性
 var p1 = new Person('康家豪',21);
 console.log(p1.name);

/**
 *  {
	"resource": "/c:/Users/86156/Desktop/Web --- TS/ts01/hello.ts",
	"owner": "typescript",
	"code": "2445",
	"severity": 8,
	"message": "属性“name”受保护，只能在类“Person”及其子类中访问。",
	"source": "ts",
	"startLineNumber": 87,
	"startColumn": 17,
	"endLineNumber": 87,
	"endColumn": 21 
    }
  保护类型在外部不能访问其属性，但是因为浏览器将代码转换为了ES5，所以可以访问。
 */


//private 私有类型
class Person {
    
    
    private name:string;
     age:number;

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

    sayHi():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age} --- 当前类（父类）`
    }
 }


 class Son extends Person{
    
    
     constructor(name:string,age:number){
    
    
         super(name,age)
     }

     talk():string{
    
    
        return `${
      
      this.name}的年龄是${
      
      this.age}---子类`
    }
 }
//子类中访问保护属性
 var s1 = new Son('张三',99)
 console.log(s1.sayHi())

//当前类访问保护属性
 var p1 = new Person('康家豪',21);
 console.log(p1.sayHi());

• 类中的静态属性，静态方法，抽象类，继承多态
  1.为什么需要静态方法
  静态方法通过static关键字来定义，但是静态方法中不能访问类里面的属性

//TS中静态属性和静态方法
class Person{
    
    
    public name:string;
    static number:number = 99;
    constructor(name:string){
    
    
        this.name = name;
    }

    run():void{
    
    
        alert(`${
      
      this.name} 在运动!`)
    }

    work():void{
    
    
        alert(`${
      
      this.name} 在工作!`)
    }

    //添加静态类
    static print(){
    
    
        console.log('我是静态类')
    }

    //静态类不能访问类上的属性
    static sayHi(){
    
    
        console.log(`${
      
      this.name} hello`);
        //类型“typeof Person”上不存在属性“name”。
    }

    //静态类可以访问静态属性
    static score(){
    
    
        console.log(`${
      
      this.number} hello`);
        //类型“typeof Person”上不存在属性“name”。
    }

}

var p = new Person('张三');
p.run()
p.work()

//调用静态类
Person.print();

Person.sayHi();


Person.score();

• TS中的多态（多态属于继承）

//TS中的多态
class Animal{
    
    
    name:string;

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

    eat():void{
    
    
        console.log('吃的方法');
    }
}

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

    eat():string{
    
    
        return `${
      
      this.name} 吃肉`
    }
}

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

    eat():string{
    
    
        return `${
      
      this.name} 吃老鼠`
    }
}

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

//TS中的抽象类

//给子类提供一个基类 （子类必须实现抽象类里面的抽象方法）
abstract class Animal{
    
    
    public name:string;

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

    abstract eat():any;
}


//var a = new Animal()
//报错

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

    eat(){
    
    
        console.log(this.name + '吃粮食')
    }
}

var d = new Dog('欢欢');
d.eat();