定义类
TypeScript中使用关键字class来定义类
构造方法
//定义类
class User{
//定义属性，默认省略public修饰符。
id:number;
name:string;
//构造函数:实例化类时触发的方法
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
//成员方法
run():void{
console.log(this.id, this.name);
}
}
//实例化
var user = new User(1, "junchow");
user.run();//1 "junchow"
存取器
//定义类
class User{
//定义属性，默认省略public修饰符。
id:number;
name:string;
//存取器封装
getId():number{
return this.id;
}
getName():string{
return this.name;
}
setId(id:number):void{
this.id = id;
}
setName(name:string):void{
this.name = name;
}
//构造函数:实例化类时触发的方法
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
//成员方法
run():void{
console.log(this.id, this.name);
}
}
//实例化
var user = new User(1, "junchow");
console.log(user.getId(), user.getName());//1 "junchow"
user.run();//1 "junchow"
user.setId(10);
user.setName("jc");
user.run();//10 "jc"
实现继承
TypeScript中类的继承主要通过关键字extends和super来实现
//定义类
class User{
//定义属性，默认省略public修饰符。
id:number;
name:string;
//存取器封装
getId():number{
return this.id;
}
getName():string{
return this.name;
}
setId(id:number):void{
this.id = id;
}
setName(name:string):void{
this.name = name;
}
//构造函数:实例化类时触发的方法
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
//成员方法
run():void{
console.log(this.id, this.name);
}
}
//继承类
class Member extends User{
status:boolean;
constructor(id:number, name:string, status:boolean){
super(id, name);
this.status = status;
}
run():void{
console.log(this.id, this.name, this.status);
}
}
//测试
var member = new Member(1, "junchow", true);
member.run();//1 "junchow" true
console.log(member.getId(), member.getName());
member.setId(10);
member.setName("jc");
member.run();//10 "jc" true
修饰符
TypeScript类定义成员属性时提供了三种修饰符，分别是public、private、protected，属性如果不加修饰符则默认为public公有。
-
public表示公有，在类里面、子类、类外部都可以访问。 -
protected表示保护，在类里面，子类中可以访问，类外部无法范围呢。 -
private表示私有，在类里面、子类和类外部无法访问。
//定义类
class User{
//定义属性，默认省略public修饰符。
private id:number;
public name:string;
//存取器封装
getId():number{
return this.id;
}
getName():string{
return this.name;
}
setId(id:number):void{
this.id = id;
}
setName(name:string):void{
this.name = name;
}
//构造函数:实例化类时触发的方法
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
//成员方法
run():void{
console.log(this.id, this.name);
}
}
//继承类
class Member extends User{
status:boolean;
constructor(id:number, name:string, status:boolean){
super(id, name);
this.status = status;
}
run():void{
console.log(this.name, this.status);
}
}
//测试
var member = new Member(1, "junchow", true);
member.run();//junchow true
console.log(member.getId(), member.getName());// 1 junchow
member.setId(10);
member.setName("jc");
member.run();//true
静态成员
- 静态属性
- 静态方法
ES5定义类的静态属性和方法的方式
//ES5定义类
function User(id, name, nick){
//定义实例属性
this.id = id;
this.name = name;
this.nick = nick;
//定义实例方法
this.run = function(){
console.log(this.id, this.name, this.nick);
};
}
//ES5定义静态属性
User.name = "name";
User.nick = "nick";
//ES5定义静态方法
User.run = function(status){
console.log(this.id, this.name, this.nick,status);
};
//调用实例方法
var user = new User(1, "alpha", "a");
user.run();//1 "alpha" "a"
//调用静态方法
console.log(User.name, User.nick);//User nick
User.run(true);//undefined "User" nick true
通过对jQuery的源码分析可以发现静态方法在其中的应用。
function Base(selector){
this.element = document.querySelector(selector);
this.css = function(attr, value){
this.element.style.attr = value;
};
}
function $(element){
return new Base(element);
}
$.get = function(url, callback){
};
$("#box").css("color", "red");
$.get("/user/create", function(){
});
TS中静态成员使用static关键字修饰，静态方法只能访问静态属性无法访问实例属性。
//TS定义类
class User{
//TS定义类的实例属性
private id:number;
private name:string;
//TS定义类的静态属性
static status:boolean = true;
//TS构造函数，无需返回值。
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
//TS定义实例方法
run():void{
console.log(`id = ${this.id} name = ${this.name}`);
}
//TS定义静态方法
static run():void{
//静态方法只能访问静态属性
console.log(`status = ${this.status} `);
}
}
//TS实例化对象
let user = new User(1, "alpha");
//TS调用实例方法
user.run();//id = 1 name = alpha
//TS调用静态方法
User.run();//status = true
多态
多态是指父类定义一个不去实现的方法，通过子类继承实现，因此每个子类可以拥有不同的表现。多态也是继承的一种方式，因此多态也属于多态。
class User{
id:number;
name:string;
constructor(id:number, name:string){
this.id = id;
this.name = name;
}
run(status?:any, ...params:any):any{}
}
class Member extends User{
constructor(id:number, name:string){
super(id, name);
}
run(status?:number):void{
console.log(this.id, this.name, status);
}
}
class Admin extends User{
constructor(id:number, name:string){
super(id, name);
}
run(status?:boolean, remark?:string):void{
console.log(this.id, this.name, status, remark);
}
}
var member = new Member(1, "alpha");
member.run();//1 "alpha" undefined
member.run(1);//1 "alpha" 1
var admin = new Admin(2, "beta");
admin.run();//2 "beta" undefined undefined
admin.run(true);//2 "beta" true undefined
admin.run(true, "this is a test");//2 "beta" true "this is a test"
抽象
- TS中的抽象类是提供其他类继承的基类，不能直接被实例化。
- TS中使用
abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，而且必须在派生类中实现。 - TS中使用
abstract定义的抽象方法只能放在抽象方法中 - 抽象类和抽象方法主要是用来定义标准使用
//抽象类
abstract class Base{
public id:number;
//构造函数
constructor(id:number) {
this.id = id;
}
//非抽象方法
run():any{};
//抽象方法
abstract start():any;
}
//抽象类派生类，必须使用抽象父类的抽象方法。
class User extends Base{
constructor(id:number){
super(id);
}
/*
//抽象类的派生类可以不用实现抽象类中的非抽象方法
run():void{
console.log("user run");
}
*/
//抽象类的派生类必须实现父类抽象类中的抽象方法
start():void{
console.log(`id = ${this.id}`);
}
}
let user = new User(1);
//user.run();//user run
user.start();//id = 1