回顾js中定义类
function Person(name){
this.name = name;
this.run = function(){
console.log(this.name);
}
}
var p = new Person('zhangsan');
p.run();
1、ts中定义class类
class Person {
name: string; //省略public关键词
constructor(name:string){ //构造函数,实例化类的时候触发的方法
this.name = name;
}
run():void {
alert(this.name)
}
getName():string{
return this.name;
}
setName(name:string): void {
this.name = name;
}
}
//实例化
var p = new Person('zhangsan');
p.run();//zhangsan
p.getName();//zhangsan
p.setName('lisi');
p.getName();//lisi
2、ts中实现继承类,extend、super
class Web extends Person {
constructor(name:string){
super(name);//初始化父类的构造函数
}
run():string {
return `${this.name} is running`
}
work(){
alert(`${this.name} is working`)
}
}
var w = new Web('李四');
//子类继承了父类的方法就可以使用父类的方法,并且可以拥有自己的方法
//子类和父类方法重复时会使用自己的方法
w.run();//李四 is running
w.work();//李四 is working
3、类的修饰符
ts定义了三种修饰符：
public 公有，在当前类里面，子类，类外面都可以访问
protected 保护类型，在当前类里面，子类可以访问，类外面不能访问
private 私有类型，在当前类里面可以访问，子类，类外面不能访问
默认不写就是public
关于public：
class Person {
public name: string;
constructor(name:string){
this.name = name;
}
run():string {
return `${this.name} is running`
}
}
//实例化
var p = new Person('zhangsan');
// 类里面可以访问
console.log(p.run());//zhangsan is running
// 类外可以直接访问public修饰符修饰的属性
console.log(p.name); //zhangsan
// 子类可以访问(不举例了)
关于protected：
//父类
class Person {
protected name: string;
constructor(name:string){
this.name = name;
}
run():string {
return `${this.name} is running`
}
}
//实例化
var p = new Person('zhangsan');
// 类里面可以访问
console.log(p.run());//zhangsan is running
// 类外面不能访问
console.log(p.name); //编译报错
//子类
class Web extends Person {
constructor(name:string){
super(name);//初始化父类的构造函数
}
}
var w = new Web('李四');
// 子类可以访问父类protected的属性
console.log(123,w.run());//李四 is running
ts文件是编译成js文件时会有报错信息，但是浏览器可以看到结果，因为浏览器执行的是编译后的js文件
关于private：
//父类
class Person {
private name: string;
constructor(name:string){
this.name = name;
}
run():string {
return `${this.name} is running`
}
}
//实例化
var p = new Person('zhangsan');
// 类里面可以访问
console.log(p.run());//zhangsan is running
// 类外面不能访问private的属性
console.log(p.name); //编译报错
//子类
class Web extends Person {
constructor(name:string){
super(name);//初始化父类的构造函数
}
work(){
// 子类不可以访问父类private的属性
alert(`${this.name} is working`);//编译报错
}
}
var w = new Web('李四');
4、类定义静态属性和静态方法
回顾js中类的静态属性和方法
function Person(){
//实例方法,实例化之后才能调用
this.run1 = function(){
return 'llll'
}
}
//静态属性和方法,不用通过实例化就可以调用
Person.name = 'hhh';
Person.run2 = function(){
}
console.log(Person.run2())
Person.run1();//编译报错
通过jquery理解的话就是
function $(element){
return new Base(element)
}
//$的静态方法,使用的时候直接调用
$.get = function(){}
$.get();
function Base(element){
this.element = element;
this.css = function(attr,value){
this.element.style.attr = value;
}
}
// 需要实例化调用css()
$('#box').css('color','red');
ts中的静态属性和方法
class Person{
name: string;
age: number;
//静态属性
static sex:string = 'boy';
constructor(name){
this.name = name;
}
run(){
return `${this.name} is running`
}
//静态方法
static print(){
return 'print '+Person.sex;
// 静态方法内部不能直接调用类里面的属性
// return 'print '+ age; //编译报错
}
}
//外部直接调用静态属性和方法
console.log(Person.sex);//boy
console.log(Person.print());//print boy
5、多态
多态: 父类定义一个方法不去实现,让继承他的子类去实现,每一个子类有不同的表现
多态属于继承
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 + ' 狗粮';
}
}
var dog = new Dog('汪汪汪');
console.log(dog.eat()); //汪汪汪 狗粮
6、抽象方法和抽象类
抽象类和抽象方法用来定义标准
-
抽象方法只能放在抽象类里面。
换句话说就是Animal这个类里面要定义eat抽象方法的话，就必须要求Animal这个类是抽象类
-
抽象类提供继承的基类，不能直接被实例化，直接实例化会报错。
-
用abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现且必须在子类中实现。
换句话说就是eat这个抽象方法具体要做什么不能在Animal里面写，要在它的子类里面写，所以子类必须包含eat方法
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() {
return this.name + ' 狗粮';//抽象方法必须在派生类里面实现
}
}
var d = new Dog('旺旺')
console.log(d.eat());//旺旺 狗粮
