/**
* 1、类的定义
* 2、继承
* 3、类里面的修饰符
* 4、静态属性 静态方法
* 5、继承多态、抽象类、抽线方法
*/
1、ts中定义类
es5：
function Person(nanme){
this.name = name;
this.run = function(){
console.log(this.name)
}
}
var p = new Person('张三');
p.run()
typescript：
class Person{
name:string; //属性 前面省略了public关键词
constructor(n:string){ //构造函数 实例化类的时候出发的方法
this.name = n;
}
run():void{
alert(this.name+'在做运动');
}
}
var p = new Person("张三");
p.run();
typescript给类中添加方法：
class Person{
name:string;
constructor(name:string){
this.name = name;
}
getName():string{//定义方法取值
return this.name;
}
setName(name:string):void{//方法传值 改变属性
this.name = name;
}
}
var p = new Person("张三");
alert(p.getName());
p.setName('李四');
alert(p.getName());
2、ts中实现继承 extends super
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{
return `${this.name}在运动`
}
}
var p = new Person('王五');
alert(p.run())
class Web extends Person{
constructor(name:string){
super(name);//初始化父类的构造函数
}
}
var w = new Web('李四');
alert(w.run())
// ts中继承的探讨 父类的方法和字类的方法一致
class Person{
name:string;
constructor(name:string){
this.name = name;
}
run():string{
return `${this.name}在跑步`
}
}
class Web extends Person{//继承父类的属性和方法
constructor(name:string){
super(name);//初始化父类的构造函数
}
// 现在字类里面找 再去父类里面找
run():string{
return `${this.name}在跑步-字类`
}
// 还能扩展自己的方法
work(){
alert(`${this.name}在工作`)
}
}
var w = new Web('李四');
w.work();
w.run();
先在子类里面找 再去父类里面找
3、类里面的修饰符
typescript里面定义属性的时候给我们提供了三种修饰符
/*
public：共有 在类里面、字类、类外面都可以访问
protected：保护类型 在类里面、字类里面可以访问，在类外部没法访问
private：私有 在类里面可以访问、字类和类外部没法访问
注： 属性如果不加修饰符 默认时public
*/
class Person{
public name:string;
constructor(name:string){
this.name = name;
}
run():string{
return `${this.name}在运动`
}
}
class Web extends Person{
constructor(name:string){
super(name);//初始化父类的构造函数
}
// 还能扩展自己的方法
work(){
alert(`${this.name}在工作`)
}
}
// public
var w = new Web('王五');//public name:string;
w.work();
// protected
var w = new Web('李四111');//protected name:string;
alert(w.work());//李四111在工作 在字类中可以访问
alert(w.run());//李四111在运动 在父类中可以访问
var p = new Person('哈哈哈');alert(p.name)//p.name可以编译 但是会报错，控制台上也有提醒，name是保护类型。
// private
4、静态属性 静态方法
es5静态方法和属性
function Person(){
this.run1=function(){
}
}
Person.name='哈哈哈';//静态属性
Person.run2=function(){//静态方法
}
var p=new Person();
Person.run2();//静态方法的调用
$('#box').css('color','red');
function $(ele){
return new Base(ele);
}
function Base(ele){
this.ele = 获取dom节点;
this.css=function(arr,val){//实例方法
this.ele.style.arr = val;
}
}
// 静态方法调用
$.get('url',function(){
})
// 定义静态方法
$.get=function(){
}
ts中的静态方法和属性
class Person {
name:string;
static age:number=20;//静态属性
constructor(name:string) {
this.name = name;
}
run(){//实例方法
alert(`${this.name}在运动`)
}
work(){//实例方法
alert(`${this.name}在共工作`)
}
static print(){//静态方法
// 没法直接调用类里面的属性
alert('静态方法'+this.name);
// 需要定义静态属性才能访问Person.age
alert('静态方法'+Person.age);
}
}
Person.print();//静态方法调用
alert(Person.age);//静态属性调用
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+'吃粮食';
}
}
class cat extends Animal {
constructor(name:string) {
super(name);
}
eat(){
return this.name+'吃老鼠';
}
}
抽象方法 抽象类
typeScript中的抽象类：他是提供其他类继承的基类，不能直接被实例化。
var a =new Animal();//无法创建抽象类的实例
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且在派生类中实现。
class Animal { //抽象方法只能放在抽象类中
abstract eat():any;
}
// 抽象类和抽象方法来定义标准
// Animal这个类要求其他的字类必须包含eat方法
// 抽象方法实现多态
abstract class Animal {
name:string;
constructor(name:string){
this.name = name;
}
abstract eat():any;//抽象类中的抽象方法不包含具体实现并且在派生类中实现。
run(){
console.log('其他方法可以不实现');
}
}
//var a =new Animal();//错误写法 无法创建抽象类的实例
class Dog extends Animal {
constructor(name:any){
super(name);
}
// 抽象类的子类必须实现抽象类里面的抽象方法
eat(){
console.log(this.name + '吃粮食')
}
}
var d=new Dog('小黑');
d.eat();
class Cat extends Animal {
constructor(name:any){
super(name);
}
// 抽象类的子类必须实现抽象类里面的抽象方法
eat(){
console.log(this.name + '吃老鼠')
}
}
var c=new Cat('小花猫');
c.eat();