js實現繼承的各種方法及缺點
1.建構函式實現繼承
程式碼:
function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } Parent.prototype.bye = function(){ alert(this.username+": Goodbye!"); }; function Child(username,password){ this.father = Parent; this.father(username);//最關鍵的一行 delete this.father; //以上3行等價於Parent.call(this,username)或Parent.call(this,[username]) this.password = password; this.world = function(){ alert(this.password); } } var parent = new Parent("zhangsan"); var child = new Child("lisi","123456"); parent.hello();//zhangsan child.hello();//lisi child.world();//123456 parent.bye(); //zhangsan :Goodbye child.bye();// Error: child.bye is not a function
缺點:由於方法在建構函式內建立,不能做到函式複用而降低效率,並且不能繼承父類的prototype定義的屬性與方法。
2.原型鏈方式:子類通過prototype將所有在父類中通過prototype追加的屬性和方法都追加到Child,從而實現了繼承程式碼:
缺點:由於prototype是各個子類的例項共享的,故對某一個子類prototype中的屬性進行修改,也會體現在所有子類上(如以上程式碼,Child.prototype 繼承了Parent的例項,故Child.prototype.elements為所有Child的例項共享),另外本方法還有一個缺點是不能想超類的建構函式傳引數。function Parent(){ this.elements=["ul","li","p"]; } Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function(){ alert(this.hello); } function Child(){ } Child.prototype = new Parent();//這行的作用是:將Parent中將所有通過prototype追加的屬性和方法都追加到Child,從而實現了繼承 Child.prototype.world = "world"; Child.prototype.sayWorld = function(){ alert(this.world); } var c = new Child(); c.sayHello();//hello c.sayWorld();//world alert(c.elements);//ul,li,p c.elements.push("div"); c.hello="div"; var c2 = new Child(); c2.sayHello();//hello alert(c2.elements);//ul,li,p,div
3.組合繼承:結合以上兩種方式,用prototype繼承超類的prototype的屬性、方法,用建構函式繼承超類的例項的屬性、方法。
程式碼:function Parent(username){ this.elements =["li","ul","p"]; this.username = username; this.hello = function(){ alert(this.username); } } Parent.prototype.hello = "hello"; Parent.prototype.bye = function(){ alert(this.username+": Goodbye!"); }; function Child(username,password){ Parent.call(this,[username]); this.password = password; this.word = function(){ alert(this.password); } } Child.prototype=new Parent(); var parent = new Parent("zhangsan"); var child = new Child("lisi","123456"); parent.hello();//zhangsan child.hello();//lisi child.word();//123456 child.elements.push("div"); var child2 = new Child("wangwu","111111"); alert(child2.elements);//ul,li,p
缺點:與建構函式模式相比,函式複用問題未解決。
4.寄生式繼承:寄生式繼承是建立一個僅用於封裝繼承過程的函式,該函式在內部以某種方式來增強物件,最後再返回物件。var person = {name : "Nicholas", friends :["shelby","Court","Van"], sayGoodbye :function(){alert("Goodbye");}}; function createSon(original){ var clone = original;//通過呼叫函式建立一個新物件 clone.sayHi =function(){ //以某種方式來增強這個物件 alert("hi"); }; return clone;//返回這個物件 } var son = createSon(person); son.sayHi();//"hi" son.sayGoodbye();
缺點:與建構函式模式類似,不能做到函式複用而降低效率。
5.寄生組合式繼承:本質上,就是使用寄生式繼承來繼承超型別的prototype,然後再將結果指定給子型別的prototype。
程式碼:
function inheritPrototype(subType, superType) { var prototype = superType.prototype; prototype.constructor = subType; subType.prototype = prototype; } function Parent(name) { this.name = name; this.elements=["ul","li","p"]; } Parent.prototype.sayName = function() { alert(this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } inheritPrototype(Child, Parent); Child.prototype.sayAge = function() { alert(this.age); } var parent = new Parent("zhangsan"); var child = new Child("lisi","12"); parent.sayName ();//zhangsan child.sayName ();//lisi child.sayAge();//12 child.elements.push("div"); var child2 = new Child("wangwu","22"); child2.sayAge();//22 alert(child2.elements);//li,ul,p
相關推薦
js實現繼承的各種方法及缺點
本篇文章主要介紹了js中繼承的幾種用法總結。 1.建構函式實現繼承 程式碼: function Parent(username){ this.username = username; this.hello = function(){ aler
Js實現繼承的方法
fine new eat mce sco clas 高級 裏的 xiaomi 原型的作用:1.將公共部分放入原型中,這樣構造出的多個實例對象的公共部分只會占用一個公共空間,實現數據共享和節省內存空間 2.通過原型實現繼承:構造函數模擬 "類"這個面向對象的
原生JS實現AJAX、JSONP及DOM載入完成事件,並提供對應方法
JS原生AJAX ajax:一種請求資料的方式,不需要重新整理整個頁面; ajax的技術核心是 XMLHttpRequest 物件; ajax 請求過程:建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料; 下面簡單封裝一個函式,之後稍作解釋
js中實現繼承的方法
[TOC] ## 借用建構函式 這種技術的基本思想很簡單,就是在子型別建構函式的內部呼叫超型別的建構函式。另外,函式只不過是在特定環境中執行程式碼的物件,因此通過使用apply()和call()方法也可以在新建立的物件上執行建構函式。 ``` js function Box(name){ this.nam
JS實現繼承的幾種方式(轉)
多繼承 logs 影響 .cn sta 初始化 定義 附錄 style 轉自:幻天芒的博客 前言 JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢?讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承,那麽首先我們得有一個父類,
JS實現繼承的幾種方式
簡單 成員 類構造 缺陷 屬性 con html 但是 內存 JS實現繼承的幾種方式 前言 JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢?讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承,那麽首先我們得有一個父類,代碼如
js實現繼承
this super() 實現 urn 使用 log -s 創建 復用 js作為一種弱類型語言,繼承也是其較大的功能之一 首先定義一個父類 // 定義一個教師類 function Teacher (name) { // 屬性 this.name = name |
JS實現繼承的方式
一、原型繼承 要實現繼承,首先需要一個父類。 定義一個動物類: 核心: 將父類的例項作為子類的原型 function Animal(name){ this.name=name ||"animal"; //屬性 this.ea
原生js替換jQuery各種方法-中文版
You Don't Need jQuery 前端發展很快,現代瀏覽器原生 API 已經足夠好用。我們並不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行,直接操作 DOM
Jquery、Js實現網頁列印,及列印樣式的自定義
<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Title</title> &
瞎分類之JS——js實現div大小設定及Cannot set property 'cssText' of undefined問題處理
今天趁著奇怪的時間開始總結最近看到的,學習到的,一些問題。僅僅是解決了問題,以我現在淺薄瞭解,只負責解決問題,希望以後會自我欣賞的時候再看看,內容是否需要修改。萬一哪位有經驗的看到了,可以及時指點,在這裡先謝了。js完成div的大小設定背景是接手的程式碼用js生成各種div,
JS實現繼承 JavaScript
定義一個父類: // 定義一個動物類 function Animal (name) { // 屬性 this.name = name || ‘Animal’; // 例項方法 this.sleep = function(){ console.log(this.name + ‘正在睡覺!’); } }
JavaScript面向物件(三)——繼承與閉包、JS實現繼承的三種方式
前 言 JRedu 在之前的兩篇部落格中,我們詳細探討了JavaScript OOP中的各種知識點(JS OOP基礎與JS 中This指向詳解 、 成員屬性、靜態屬性、原型屬性與JS原型鏈)。今天我們來繼續探討剩餘的內容吧。 我們都知道,面向物件的三大特徵——封裝、繼承、多型。 封裝無非就是屬性和
原生JS實現AJAX、JSONP及DOM載入完成事件
JS原生Ajax ajax:一種請求資料的方式,不需要重新整理整個頁面; ajax的技術核心是 XMLHttpRequest 物件; ajax 請求過程:建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料; 下面簡單封裝一
使用jquery.form.js實現檔案上傳及進度條前端程式碼
1、背景 ajax的表單提交只能提交data資料到後臺,沒法實現file檔案的上傳還有展示進度功能,這裡用到form.js的外掛來實現,搭配css樣式簡單易上手,而且高大上,推薦使用。 2、靜態頁搭建 html程式碼如下 <div clas
js實現上拉載入及下拉重新整理效果
微信小程式開發時,上拉載入和下拉重新整理效果讓人眼前一亮,挺棒的。不過小程式裡只需要在js檔案用onPullDownRefresh命名的方法就可以實現了,忒方便。在微信開發或者手機端網頁開發呢。 1.藉助外掛 dropload mui 後者是做前臺/手機端app的一個框架
JS實現PHP ksort方法
參考程式碼: http://phpjs.org/functions/ksort/ https://github.com/kvz/phpjs/blob/master/functions/array/ksort.js function ksort(inputArr, sort_
js----js實現繼承的方式及其優缺點
-a 價格 才會 nts argument 小明 方法 父類 delete js實現繼承的方式 1.繼承方式一 -------------- 通過改變父類的執行環境(不常用) 2.call()繼承------------只能繼承原型的屬性和方法 3.ap
JS實現動態瀑布流及放大切換圖片效果(js案例)
整理了一下當時學js寫的一些案例,再次體驗了一把用原生JS實現動態瀑布流效果的樂趣,現在把它整理出來,需要的小夥伴可以參考一下。 該案例主要是用HTML+CSS控制樣式,通過JS實現全域性瀑布流以及點選圖片放大、上下切換效果。HTML佈局寫的很簡單,圖片載入主要是在JS中通過訪問自定義的JSON字串來實現。
js中實現繼承的不同方式以及其缺點
但是 scrip UC .proto 就是 圖片 問題 inf 引用 1.利用call和apply,借助構造函數 fucntion P(){ this.name = "P"; } fucntion C1(){ P.call(this); }