typescript基础(4)

类:

ES5的类和继承

  function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }
  //原型链
        //通过原型链添加属性
        // 注意:原型链上的属性会被多个实例共享,构造函数的属性不会
        Person.prototype.sex='男';
        //通过原型链添加方法
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //静态方法
        Person.getInfo=function(){
            alert('我是静态方法')
        }

        var p=new Person();

        alert(p.name)   //张三
        p.run();   //张三在跑步
        调用原型链上的方法
        p.work()  //张三在工作
        调用静态方法
        Person.getInfo()

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

​ 对象冒充可以继承构造函数的属性和方法

​ 对象冒充可以继承构造函数的属性和方法,但是没办法继承原型链的属性和方

 function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }

        Person.prototype.sex='男';
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //web类  继承person类  原型链UI想冒充组合继承模式
        function Web(){
            Person.call(this)   /* 对象冒充实现继承*/
        }
        var w=new Web();
        // w.run();      
        w.work();    

es5继承 原型链继承

​ 好处:原型链实现继承既可以实现构造函数里的属性和方法的继承,又可以实现原型链里的继承

 function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }

        Person.prototype.sex='男';
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //web类  继承person类  原型链UI想冒充组合继承模式
        function Web(){
           
        }
        Web.prototype=new Person()   //原型链实现继承
        var w=new Web();
        // w.run();    //张三在跑步
        w.work();      //张三在工作

TS中类:

//ts类中的定义和使用
class aa{
	//定义属性
	name:string
	age:number
	sex:string
	//定义构造函数
	constructor(name:string='花花',age:number=18,sex:string='女'){
		this.name=name
		this.age=age
		this.sex=sex
	}
	//定义实例方法
	bb(){
		console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`)
	}
}
//实例化对象
const cc=new aa()
cc.bb() //我是花花,今年18岁,性别女

TS实现继承

class cc{
	//定义属性
	name:string
	age:number
	//定义构造函数
	constructor(name:string,age:number){
		//更新属性
		this.name=name
		this.age=age
	}
	//定义实例方法
	aa(){
		console.log(`我是${this.name},今年${this.age}`)
	}
}

定义一个类,作为子类,继承

//定义一个类,作为子类
class dd extends cc{
	constructor(name:string,age:number){
		//调用父类中的构造函数,使用super
		super(name,age)
	}
	//调用父类中的方法
	aa(){
		console.log('我是子类中的aa方法')
		//调用父类中的aa方法
		super.aa()
	}
}

实例化

//实例化父
const person=new cc('父',11)
person.aa()
//子
const stu=new dd('子',1)
stu.aa()

类里面的修饰符

public :公有 在类里面,子类,类外面都可以访问;

protected:保护类型 在类里面和子类里面可以访问,类外面不能访问;

private :私有 在类里面可以用,类外面和子类不能用

.注意:属性如果不写修饰符默认是公有的(public)

public :

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

class aa{
	public name:string
    public constructor(name:string){
        this.name=name
    }
}
const b=new aa('张三')
console.log(b.name) //张三

protected:

保护类型 在类里面和子类里面可以访问,类外面不能访问;

class aa{
	protected name:string
    constructor(name:string){
        this.name=name
    }
}
class bb extends aa{
	constructor(name:string){
		super(name)
	}
	cc(){
		console.log('hello',this.name) 
	}
}
const c=new bb('李四')
c.cc() //hello 李四

private :

私有 类中的成员如果使用private来修饰,那么外部是无法访问到这个成员的

class aa{
	private name:string
    public constructor(name:string){
        this.name=name
    }
}
const b=new aa('张三')
console.log(b.name) //报错属性"name"为私有属性,只能在类"aa"中访问

子类也不能访问:

class bb extends aa{
	constructor(name:string){
		super(name)
	}
	cc(){
		console.log('hello',this.name) //报错属性"name"为私有属性,只能在类"aa"中访问
	}
}

readyonly修饰符:

​ 使用readyonly关键字将属性设置为只读;

​ 注意:只读属性必须在声明时或构造函数里被初始化.

class aa {
    readonly name: string;
    constructor (name: string) {
        this.name = name;
    },
	cc(){
		console.log(this.name)
		}
}
let bb = new aa("hello");
bb.cc()  //hello
bb.name = "修改"; // 错误! name 是只读的.

参数属性:

参数属性可以方便地让我们在一个地方定义并初始化一个成员。

readonly修饰类中的构造函数中的参数(参数属性)

构造函数中name,使用readonly修饰,name参数就叫name属性,类中有了name的属性成员,外部无法修改name属性成员的值

构造函数中的name,使用public修饰,类中就有了公共的name属性成员

构造函数中的name,使用private修饰,类中就有了私有的name属性成员

构造函数中的name,使用protected修饰,类中就有了受保护的name属性成员,只能在本类和子类中使用

存取器

​ 让我们可以有效的控制对对象的成员的访问,通过getters和setters操作

class aa {
    firstName: string  //姓氏
    lastName: string    //名字
    constructor(firstName:string,lastName:string){
        this.firstName=firstName
        this.lastName=lastName
    }
    //读取器
    get fullName() {
      return this.firstName + '-' + this.lastName
    }
    //设置器
    set fullName(val) {
      const names = val.split('_')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
//   获取
  const p = new aa('张三','李四')
  console.log(p.fullName)  //张三-李四
  //设置
  p.fullName='王五_赵六'
  console.log(p.fullName)//

静态属性:

静态成员:在类中通过static修饰的属性或方法,那么静态的属性以及方法,也被称为静态成员

注意:静态成员在使用的时候,要在属性前面加类名来访问

class aa {
    name1: string = 'yes'
    static name2: string = 'no'
  }
  const a=new aa()
  console.log(a.name2) //error 属性"name2"在类型"aa中不存在
  console.log(aa.name2) //no

抽象类:

​ 包含抽象方法,也可以包含实例方法,抽象类是不能被实例化,为了让子类进行实例化及实现内部的抽象方法

abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。

作用:是为了子类服务

//定义一个抽象类
abstract class aa {
	//抽象方法
  abstract bb()
  run() {
    console.log('run()')
  }
}
//定义一个子类
class cc extends aa {
  bb() {
    console.log(' cc bb()')
  }
}
const c = new cc()
c.bb() // cc bb()
//调用抽象类中的实例方法
c.run() //run()

总结:
详细并举例说明了typescript 的类,以及继承,修饰符,he静态属性,想要知道下面的知识,等待我的更新;