<ul id="wskyy"></ul>

ExtJS底層繼承機制實現

mayaohua 發布于2019-08-21 10:32 / 3336人閱讀

摘要：是個基于對象的語言，沒有類的概念。而且語言特點就是松散和自由，實現一個同樣的功能，可以有很多種方式面向對象編程絕大部分都是基于類的所以我們可以借助原型鏈繼承的方式來在中實現高級程序語言中的繼承機制關鍵點就是你一定要了解中的。

JavaScript是個基于對象的語言，沒有類的概念。而且JavaScript語言特點就是松散和自由，實現一個同樣的功能，可以有很多種方式.面向對象編程絕大部分都是基于類的.所以我們可以借助原型鏈繼承的方式,來在JavaScript中實現高級程序語言中的繼承機制.關鍵點就是你一定要了解js中的prototype。模擬ExtJS底層方法,來實現一個簡單的繼承機制

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();   //調用子類重載的方法

轉摘自我的博客：ExtJS底層繼承機制實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85714.html

聽飛狐聊JavaScript設計模式系列04

摘要：介一回，偶們來聊一下用中的類，有些盆友可能用過或者的，知道語法糖，可是在中并沒有，中需要用到構造函數來模擬類。而且要注意一點，構造函數沒有語句，是自動返回。本回內容介紹上一回聊到JS的Function類型，做了柯里化，數組去重，排序的題。介一回，偶們來聊一下用JS中的類，有些盆友可能用過ES6或者TypeScript的，知道Class語法糖，可是在ES5中并沒有，ES5中需要用到...

kgbook 2019-08-21 10:44 評論0 收藏0
extjs 事件執行

摘要：問題是解決了，但引發我猜想，我最初是以為多線程的原因，不然不能解釋這個現象程序肯定沒有順序執行。雖說現在已經有了多線程，但現在沒用到，就不在記錄之列了參考鏈接異步編程阮一峰緣起在項目中用到了extjs做后臺頁面展示，當時寫了一個product 模塊，在新增窗口里放了一個card布局器，里面有不同的表單，當然新增窗口還有保存，重置，關閉這三個按鈕。當時在保存時寫了下面代碼： ...

mylxsw 2019-08-21 10:17 評論0 收藏0
JavaScript_面向對象程序設計

摘要：構造函數用于檢測給定的屬性在當前對象實例中而不是原型中是否存在。返回對象的字符串表示。實現空函數的原型對象和超類的原型對象轉換原型繼承做善后處理。判斷父類的原型對象的構造器，防止簡單原型中給更改為還原父類原型對象的構造器類的創建于實例對象工廠模型創建對象 function CreatePerson ( name,sex,age ) { var obj = new ...

lingdududu 2019-08-19 18:34 評論0 收藏0
Extjs - model總結

摘要：數據讀取器相當于原始數據格式與標準數據格式之間的橋梁，它屏蔽了原始數據格式不同對程序開發造成的影響。零是有效的，但空字符串無效。用了Extjs快一年了，這里整理一下model。數據模型 showImg(https://segmentfault.com/img/bVzXAR); Extjs 中數據包總共包含了40多個類，其中有三個類比其他類有更重要的地位，它們分別是：model、st...

EastWoodYang 2019-08-22 10:34 評論0 收藏0
extjs-mvc結構實踐(三):完善基本頁面

摘要：上篇實現了基本的代碼架構，控制器動態加載功能以及一個基礎的頁面布局，本節開始，將陸續完善這個頁面。頁面底部區域，主要顯示版權信息等，也可以顯示個時間啥的。。。頭部和底部定義完畢后，需要在中引入對應位置。上篇實現了基本的代碼架構，控制器動態加載功能以及一個基礎的頁面布局，本節開始，將陸續完善這個頁面。目標如前所述，我們的頁面包含這么幾個區域： header: UI頂部區域，顯示系...

zhkai 2019-08-22 13:57 評論0 收藏0