• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript - 4.es5与typescript的类与继承

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

(1)简单的类

   function Person() {

        this.name = '张三';
        this.age = 20;
    }
    var p = new Person();
    alert(p.name);

(2)构造函数和原型链里面增加方法

   function Person() {

        this.name = '张三';  /*属性*/
        this.age = 20;
        this.run = function () {
            alert(this.name + '在运动');
        }

    }
    //原型链上面的属性会被多个实例共享   构造函数不会
    Person.prototype.sex = "男";
    Person.prototype.work = function () {
        alert(this.name + '在工作');

    }
    var p = new Person();
    // alert(p.name);
    // p.run();
    p.work();

(3)ES5静态方法

function Person() {
    this.name = '张三';  /*属性*/
    this.age = 20;
    this.run = function () {  /*实例方法*/
        alert(this.name + '在运动');
    }
}

Person.getInfo = function () {
    alert('我是静态方法');
}

//调用静态方法
Person.getInfo();

(4)es5里面的继承 对象冒充实现继承

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

  function Person() {
       this.name = '张三';  /*属性*/
       this.age = 20;
       this.run = function () {  /*实例方法*/
           alert(this.name + '在运动');
       }

   }
   Person.prototype.sex = "男";
   Person.prototype.work = function () {
       alert(this.name + '在工作');

   }

   //Web类 继承Person类   原型链+对象冒充的组合继承模式

   function Web() {

       Person.call(this);    /*对象冒充实现继承*/
   }

   var w = new Web();
   // w.run();  //对象冒充可以继承构造函数里面的属性和方法

   w.work();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法

(5)es5里面的继承 原型链实现继承

原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法

        function Person() {
            this.name = '张三';  /*属性*/
            this.age = 20;
            this.run = function () {  /*实例方法*/
                alert(this.name + '在运动');
            }

        }
        Person.prototype.sex = "男";
        Person.prototype.work = function () {
            alert(this.name + '在工作');

        }

        //Web类 继承Person类   原型链+对象冒充的组合继承模式
        function Web() {

        }

        Web.prototype = new Person();   //原型链实现继承
        var w = new Web();
        //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
        //w.run();

        w.work();

(6)原型链继承的问题?有参数的情况

实例化子类的时候没法给父类传参

  function Person(name,age){
            this.name=name;  /*属性*/
            this.age=age;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }

    }      
    Person.prototype.sex="男";
    Person.prototype.work=function(){
            alert(this.name+'在工作');

    }
       
      
    function Web(name,age){

        
    }

    Web.prototype=new Person();

    var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参

    w.run();

    // var w1=new Web('王五',22);

(7)原型链+对象冒充的组合继承模式

有参数的的情况下,原型链+对象冒充,可以传参给子类

 function Person(name,age){
            this.name=name;  /*属性*/
            this.age=age;
            this.run=function(){  /*实例方法*/
                alert(this.name+'在运动');
            }

    }      
    Person.prototype.sex="男";
    Person.prototype.work=function(){
            alert(this.name+'在工作');

    }
       
      
    function Web(name,age){

        Person.call(this,name,age);   //对象冒充继承   实例化子类可以给父类传参
    }

    Web.prototype=new Person();

    var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参

    // w.run();
    w.work();

    // var w1=new Web('王五',22);

(8)原型链+对象冒充继承的另一种方式

Web.prototype=new Person();的另一种写法

Web.prototype=Person.prototype;

Typescript中的类与继承

(1)ts中类定义

           class Person{

                name:string;   //属性  前面省略了public关键词

                constructor(n:string){  //构造函数   实例化类的时候触发的方法
                    this.name=n;
                }

                run():void{

                    alert(this.name);
                }

            }
            var p=new Person('张三');

            p.run()

(2)ts中的继承:extends与 super

    class Web extends Person{
        constructor(name:string){

            super(name);  /*初始化父类的构造函数*/
        }
    }

    var w=new Web('李四');
    alert(w.run());

(3)类的修饰符

public

在当前类里面、 子类 、类外面都可以访问

protected:保护类型

在当前类里面、子类里面可以访问 ,在类外部没法访问

private :私有

在当前类里面可以访问,子类、类外部都没法访问

(4)静态属性与方法 static

    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);
        }
    }

(5)readonly修饰符

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

(6)抽象类 abstract

抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口,抽象类可以包含成员的实现细节。 abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。

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();




class Cat extends Animal{

    //抽象类的子类必须实现抽象类里面的抽象方法
    constructor(name:any){
        super(name)
    }
    run(){


    }
    eat(){

        console.log(this.name+'吃老鼠')
    }
    
}

var c=new Cat('小花猫');
c.eat();

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript安装发布时间:2022-07-18
下一篇:
安装TypeScript报错问题及解决方案发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap