typeScript面试必备之-通识五:typeScript中的静态属性 静态方法 抽象类 多态

1、静态属性静态方法 在es5中 // 静态属性 静态方法

    function Person(){
        this.run1=function(){
        }
    }
    Person.name='哈哈哈';
    Person.run2=function(){  静态方法
    }
    var p=new Person();
   Person.name//静态属性的调用
   Person.run2(); 静态方法的调用
复制代码

静态方法的使用还是很广泛的,我们经常使用的jquery的设计思想也是存在静态方法。当我们用到

$('#box').css('color','red')
和$.ajax的时候是否有过疑问他是如何实现的呢
$.get $.post,$.、、、都是静态方法,$().css等是实例化方法是在构造函数中定义的方法。
复制代码

demo 构造函数

function Base(element){
            this.element=获取dom节点;
            this.css=function(arr,value){
                this.element.style.arr=value;
            }
        }
       function $(element){
            return new Base(element)
        }
复制代码

静态方法

$.get('url',function(){ })、$.post('url',function(){ })
复制代码

在es6

  class Per{
        public name:string;
        public age:number=20;
        //静态属性
        static sex="男";
        constructor(name:string) {
                this.name=name;
        }
        run(){  /*实例方法*/

            alert(`${this.name}在运动`)
        }
        static print(){  /*静态方法  里面没法直接调用类里面的属性*/
            alert('print方法'+Per.sex);//访问静态属性
        }
    }
    Per.print();//访问静态方法
    alert(Per.sex);//访问静态属性
复制代码

2、多态:父类定义一个方法不去实现,让继承它的子类去实现 每一个子类有不同的表现 ,多态属于继承

            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+'吃老鼠'
                }
            }
复制代码

3、typescript中的抽象类

 它是提供其他类继承的基类,不能直接被实例化。
 用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
复制代码

abstract抽象方法只能放在抽象类里面 抽象类和抽象方法用来定义标准 。 标准:Animal 这个类要求它的子类必须包含eat方法

abstract class Animal{   
    public 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()
复制代码

感谢: 参考学习:https://www.itying.com:
自己总结到有道云笔记里面有更加清楚的标注方便查阅:
* Typescript 介绍
http://note.youdao.com/noteshare?id=c3e0d5810580041ade028a345519ce96&sub=E882CE350AC94C5596B146908C406274 * typeScript中的数据类型
http://note.youdao.com/noteshare?id=a07dd9a55779068d9409b79014a9a409&sub=CE3DA74B1A27412792DF9BB8F74E8E24 * typeScript中的函数
http://note.youdao.com/noteshare?id=adc64e95404f3c382c7549f05841c7b2&sub=65D365DE900049A28DD4697B61A5544A * 对象+继承
http://note.youdao.com/noteshare?id=7f82be21375761c13ccad1981510a614&sub=7856743A59934A59A1AA608AA78497F0 * 类的定义、继承、类里面的修饰符 http://note.youdao.com/noteshare?id=a4420ac729d8cc7c1eb72fc47198f00b&sub=399974DBD9FA4EC2A99548D8837CB61F * 静态属性 静态方法 抽象类多态
http://note.youdao.com/noteshare?id=efad91320514e4f21e07ec77a9bcfd7c&sub=DC3868B8459940CA884DC5B80EE25443
* typeScript中的接口
http://note.youdao.com/noteshare?id=ae4c7f13bec8e35b3fda4e326d7e7055&sub=6001FADE75904080A15395886608D366 * 可索引接口(数组,对象)+类类型接口
http://note.youdao.com/noteshare?id=aebf26ab922044a69cae082866ce8d86&sub=F73FB04DD10C4BA796173FBE40280B21
* 接口的继承、接口的扩展
http://note.youdao.com/noteshare?id=93e1dff481b8e299ee9c925e8e3a8b4a&sub=3C96456BFAA34C28BA6BB4E0B0C1E77B * 泛类
http://note.youdao.com/noteshare?id=6d9e0ec4cdb17249bf1bb11fae2e44ec&sub=B0C47B2089AC42E48C2E1BAAAD3FE9EF * 泛型接口
http://note.youdao.com/noteshare?id=49af2ba1bd6173467e7c7b844def959b&sub=F16F0C2857E347C0B8FB69522D5DEFA2
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值