typescript - 4.es5與typescript的類與繼承

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中的類與繼承

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