typescript-类

 

一：es5类

Javascript本身并不支持面向对象，它没有访问控制符，它没有定义类的关键字class，它没有支持继承的extend或冒号，它也没有用来支持虚函数的virtual，不过，Javascript是一门灵活的语言，下面我们就看看没有关键字class的Javascript如何实现类定义，并创建对象

1：简单的类

function Person(){
    this.name='ew';
    this.age=23;
}

var p = new Person();

console.log(p.name)

2：类里的构造函数和原型链构造方法

//类
function Person(){
    this.name='ew';//属性
    this.age=23;
    this.run=function(){//实例方法
        alert(this.name);
    }
}
//原型链上的属性会被多个实例共享，构造函数不会
Person.prototype.sex='boy';//原型链
Person.prototype.work=function(){
    alert(this.name);
}

3：类里的静态方法

 

//类
function Person(){
    this.name='ew';//属性
    this.age=23;
    this.run=function(){//实例方法
        alert(this.name);
    }
}

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

4：继承

对象冒充实现继承

//类
function Person(){
    this.name='ew';//属性
    this.age=23;
    this.run=function(){//实例方法
        alert(this.name);
    }
}

function web(){
    Person.call(this);//对象冒充实现继承，无法继承原型链上的属性和方法
}

var w=new web();
w.run();

原型链实现继承

//类
function Person(){
    this.name='ew';//属性
    this.age=23;
    this.run=function(){//实例方法
        alert(this.name);
    }
}


function Web(){
    
}

Web.prototype=new Person();//原型链实现继承,可以继承构造函数和原型链上面的属性和方法

var w=new Web();
w.run();

原型链继承的问题

//类
function Person(name,age){
    this.name=name;//属性
    this.age=age;
    this.run=function(){//实例方法
        alert(this.name);
    }
}


function Web(name,age){
    
}

Web.prototype=new Person();
var w=new Web('张三',20);//实例化子类的时候无法给父类传参
w.run();

原型链+构造函数组合继承

 

//类
function Person(name,age){
    this.name=name;//属性
    this.age=age;
    this.run=function(){//实例方法
        alert(this.name);
    }
}


function Web(name,age){
    Person.call(this,name,age)//实现子类给父类传参
}

Web.prototype=new Person();
var w=new Web('张三',20);
w.run();

或者：

//类
function Person(name,age){
    this.name=name;//属性
    this.age=age;
    this.run=function(){//实例方法
        alert(this.name);
    }
}


function Web(name,age){
    Person.call(this,name,age)//实现子类给父类传参
}

Web.prototype=Person.prototype;
var w=new Web('张三',20);
w.run();

二：typescript类

1：typescript类定义

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}
//实例化
var obj = new Car("Engine 1")

2：typescript类的继承（extends）

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

继承类里的方法重写，super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

 

3：typescript类里面的修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。默认为public

• protected : 受保护，可以被其自身以及其子类和父类访问，类的外部无法访问。

• private : 私有，只能被其定义所在的类访问。

4：静态方法、静态属性（static）

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 　　//静态方法里面无法直接使用类里面的属性，如果想用，需要把属性设置为static
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

5：多态（类似于Java中的抽象类）

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

 

class Person{
    name:string;
    
    constructor(name:string){
        this.name=name;
    }
    run():string{
        return `在运动`;
    }
}


class Web extends Person{

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

6：抽象类和抽象方法

抽象类不能被实例化。用abstract定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，必须在派生类中实现。抽象方法只能出现在抽象类里面

 

abstract class Animal{ 
    public name: string;
    constructor(name:string) { 
        this.name = name;
    }
    abstract eat(): any;//抽象方法不包含具体的实现
}

//var a=new Anmial() 无法创建抽象类的实例

class Dog extends Animal { 
    //子类必须实现抽象类里面的抽象方法
    constructor(name:string) { 
        super(name);
    }
    eat(): void { 
        console.log(`${this.name}吃骨头`);
    };
}

var dog = new Dog('球球');

7：类和接口

类可以实现接口，使用关键字 implements

 

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )