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

Posted 2021-11-28 tangge

ES5中的类与类的继承

（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里面的继承 对象冒充实现继承

对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
``` javascript
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中的类