ExtJS底層繼承機制實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    function extend(sub,sup){
        //實現只繼承父類的原型對象

        //1.用一個空函數進行中轉
        var F = new Function();
        //2.實現空函數的原型對象和超類的原型對象轉換
        F.prototype = sup.prototype;
        //3.原型繼承
        sup.prototype = new F();
        //4.還原子類的構造器
        sub.prototype.constructor = sub;
        //5.保存一下父類的原型對象,一方面方便解耦,另一方面方便獲取父類的原型對象,實現方法重載
        sub.superClass = sup.prototype; //自定義一個子類的靜態屬性,接收父類的原型對象
        //6.判斷父類原型對象的構造器
        if(sup.prototype.constructor == Object.prototype.constructor){
            sup.prototype.constructor = sup; //手動還原父類對象的構造器
        }
    }

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor: Person,    //還原構造器,這裏其實可以不用還原,因爲在extend方法中已經實現了
        sayHello: function(){
            alert('hello world!');
        }
    }
    function Boy(name,age,sex){
        //綁定父類函數模版,實現構造函數繼承,只複製了父類的模版
        Boy.superClass.constructor.call(this,name,age);
        this.sex = sex;
    }
    extend(Boy,Person);
    //給子類添加一個原型對象方法
    Boy.prototype.sayHello = function(){
        alert('hello,javascript');
    }
    Boy.superClass.sayHello.call(b);    //實現方法重載,調用父類的方法
    var b = new Boy('z3',20,'nan');
    alert(b.name);
    alert(b.sex);
    b.sayHello();   //調用子類重載的方法
  </script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章