摘要:是個基于對象的語言,沒有類的概念。而且語言特點就是松散和自由,實現(xiàn)一個同樣的功能,可以有很多種方式面向?qū)ο缶幊探^大部分都是基于類的所以我們可以借助原型鏈繼承的方式來在中實現(xiàn)高級程序語言中的繼承機制關(guān)鍵點就是你一定要了解中的。
JavaScript是個基于對象的語言,沒有類的概念。而且JavaScript語言特點就是松散和自由,實現(xiàn)一個同樣的功能,可以有很多種方式.面向?qū)ο缶幊探^大部分都是基于類的.所以我們可以借助原型鏈繼承的方式,來在JavaScript中實現(xiàn)高級程序語言中的繼承機制.關(guān)鍵點就是你一定要了解js中的prototype。模擬ExtJS底層方法,來實現(xiàn)一個簡單的繼承機制
function extend(sub,sup){ //實現(xiàn)只繼承父類的原型對象 //1.用一個空函數(shù)進行中轉(zhuǎn) var F = new Function(); //2.實現(xiàn)空函數(shù)的原型對象和超類的原型對象轉(zhuǎn)換 F.prototype = sup.prototype; //3.原型繼承 sup.prototype = new F(); //4.還原子類的構(gòu)造器 sub.prototype.constructor = sub; //5.保存一下父類的原型對象,一方面方便解耦,另一方面方便獲取父類的原型對象,實現(xiàn)方法重載 sub.superClass = sup.prototype; //自定義一個子類的靜態(tài)屬性,接收父類的原型對象 //6.判斷父類原型對象的構(gòu)造器 if(sup.prototype.constructor == Object.prototype.constructor){ sup.prototype.constructor = sup; //手動還原父類對象的構(gòu)造器 } } function Person(name,age){ this.name = name; this.age = age; } Person.prototype = { constructor: Person, //還原構(gòu)造器,這里其實可以不用還原,因為在extend方法中已經(jīng)實現(xiàn)了 sayHello: function(){ alert("hello world!"); } } function Boy(name,age,sex){ //綁定父類函數(shù)模版,實現(xiàn)構(gòu)造函數(shù)繼承,只復(fù)制了父類的模版 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); //實現(xiàn)方法重載,調(diào)用父類的方法 var b = new Boy("z3",20,"nan"); alert(b.name); alert(b.sex); b.sayHello(); //調(diào)用子類重載的方法
轉(zhuǎn)摘自我的博客:ExtJS底層繼承機制實現(xiàn)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/85714.html
摘要:介一回,偶們來聊一下用中的類,有些盆友可能用過或者的,知道語法糖,可是在中并沒有,中需要用到構(gòu)造函數(shù)來模擬類。而且要注意一點,構(gòu)造函數(shù)沒有語句,是自動返回。 本回內(nèi)容介紹 上一回聊到JS的Function類型,做了柯里化,數(shù)組去重,排序的題。 介一回,偶們來聊一下用JS中的類,有些盆友可能用過ES6或者TypeScript的,知道Class語法糖,可是在ES5中并沒有,ES5中需要用到...
摘要:問題是解決了,但引發(fā)我猜想,我最初是以為多線程的原因,不然不能解釋這個現(xiàn)象程序肯定沒有順序執(zhí)行。雖說現(xiàn)在已經(jīng)有了多線程,但現(xiàn)在沒用到,就不在記錄之列了參考鏈接異步編程阮一峰 緣起 在項目中用到了extjs做后臺頁面展示,當時寫了一個product 模塊,在新增窗口里放了一個card布局器,里面有不同的表單,當然新增窗口還有保存,重置,關(guān)閉這三個按鈕。 當時在保存時寫了下面代碼: ...
摘要:構(gòu)造函數(shù)用于檢測給定的屬性在當前對象實例中而不是原型中是否存在。返回對象的字符串表示。實現(xiàn)空函數(shù)的原型對象和超類的原型對象轉(zhuǎn)換原型繼承做善后處理。判斷父類的原型對象的構(gòu)造器,防止簡單原型中給更改為還原父類原型對象的構(gòu)造器 類的創(chuàng)建于實例對象 工廠模型創(chuàng)建對象 function CreatePerson ( name,sex,age ) { var obj = new ...
摘要:數(shù)據(jù)讀取器相當于原始數(shù)據(jù)格式與標準數(shù)據(jù)格式之間的橋梁,它屏蔽了原始數(shù)據(jù)格式不同對程序開發(fā)造成的影響。零是有效的,但空字符串無效。 用了Extjs快一年了,這里整理一下model。 數(shù)據(jù)模型 showImg(https://segmentfault.com/img/bVzXAR); Extjs 中數(shù)據(jù)包總共包含了40多個類,其中有三個類比其他類有更重要的地位,它們分別是:model、st...
摘要:上篇實現(xiàn)了基本的代碼架構(gòu),控制器動態(tài)加載功能以及一個基礎(chǔ)的頁面布局,本節(jié)開始,將陸續(xù)完善這個頁面。頁面底部區(qū)域,主要顯示版權(quán)信息等,也可以顯示個時間啥的。。。頭部和底部定義完畢后,需要在中引入對應(yīng)位置。 上篇實現(xiàn)了基本的代碼架構(gòu),控制器動態(tài)加載功能以及一個基礎(chǔ)的頁面布局,本節(jié)開始,將陸續(xù)完善這個頁面。 目標 如前所述,我們的頁面包含這么幾個區(qū)域: header: UI頂部區(qū)域,顯示系...
閱讀 2598·2021-10-25 09:45
閱讀 1257·2021-10-14 09:43
閱讀 2314·2021-09-22 15:23
閱讀 1542·2021-09-22 14:58
閱讀 1946·2019-08-30 15:54
閱讀 3554·2019-08-30 13:00
閱讀 1371·2019-08-29 18:44
閱讀 1585·2019-08-29 16:59