javascript 用函數實現“繼承”

来源:http://www.cnblogs.com/zhiying/archive/2016/05/27/5534487.html
-Advertisement-
Play Games

一、知識儲備: 1、枚舉屬性名稱的函數: (1)for...in:可以在迴圈體中遍歷對象中所有可枚舉的屬性(包括自有屬性和繼承屬性) (2)Object.keys():返回數組(可枚舉的自有屬性) (3)Object.getOwnPropertyNames():所有的自有屬性 3、屬性的特性:數據屬 ...


一、知識儲備:

1、枚舉屬性名稱的函數:

(1)for...in:可以在迴圈體中遍歷對象中所有可枚舉的屬性(包括自有屬性和繼承屬性)

(2)Object.keys():返回數組(可枚舉的自有屬性)

(3)Object.getOwnPropertyNames():所有的自有屬性

3、屬性的特性:數據屬性和存取器屬性

(1)數據屬性:可寫(writable)  可枚舉(enumerable)  可配置(configurable)  值(value)

    數據屬性只有一個簡單的值;

(2)存取器屬性: 寫入(set)  讀取(get)  可枚舉(enumerable)  可配置(configurable)

    存取器屬性不可寫(即沒有writable特性)。

    屬性有set方法,那這個屬性是可寫的,有get方法,那這個屬性就是可讀的。

4、定義屬性特性的方法:Object.defineProperty(對象,屬性,描述符對象)

5、獲取屬性的描述符對象:Object.getOwnPropertyDescriptor(對象,屬性)

二、示例

1、根據for...in的用法,我們可以寫出模擬“繼承”的方法:

<script type="text/javascript">
	var child={};
	var mother={
		name:"zhangzhiying",
		lastAge:21,
		sex:"女"
	};
	function extend(target,source){
	    for(var p in source){
		  target[p]=source[p];
	    }
	    return target;
	}
	extend(child,mother);
	console.log(child);     //Object {name: "zhangzhiying", lastAge: 21, sex: "女"}
</script>

2、使用for in來迴圈遍歷原型對象的屬性,然後一一賦值給我們的空對象,從而實現了“繼承”。這個思路很正確,下麵我們來對以上示例進行改造:

<script type="text/javascript">
	var child={};
	var mother={
		name:"zhangzhiying",
		lastAge:21,
		set age(value){
			this.lastAge=value;
		},
		get age(){
			return this.lastAge+1;
		}, 
		sex:"女"
	};
     mother.age=15; //有set方法,具有可寫性 function extend(target,source){     for(var p in source){   target[p]=source[p];     }     return target; } extend(child,mother); console.log(child); //Object {name: "zhangzhiying", lastAge: 15, age: 16, sex: "女"} </script>

可以看到代碼中使用了一對set,get;其中age是一個存取器屬性。

運行的結果:一個不包含set,get的普通對象。 

結論:for  in實現的“繼承”不處理set和get ,它把存取器屬性(age)轉換為一個靜態的數據屬性。

3、給mother對象設置數據屬性

<script type="text/javascript">
	var child={};
	var mother={
		name:"zhangzhiying",
		lastAge:21,
		set age(value){
			this.lastAge=value;
		},
		get age(){
			return this.lastAge+1;
		}, 
		sex:"女"
	};
	Object.defineProperty(mother,"lastAge",{writable:false});  //把lastAge設置成了不可寫
	mother.age=15;                                             //設置無效,因為lastAge的值不變,所以lastAge+1不變,即age不變
	function extend(target,source){
		for(var p in source){
		target[p]=source[p];
	}
	return target;
	}
	extend(child,mother);
	console.log(child);     //Object {name: "zhangzhiying", lastAge: 21, age: 22, sex: "女"}
	child.lastAge=12;    //結果顯示lastAge改變,說明child.lastAge沒有“繼承”到mother.lastAge的特性,我們再用getOwnPropertyDesriptor()方法確認一下
     console.log(Object.getOwnPropertyDescriptor(child,"lastAge")); //Object {value: 12, writable: true, enumerable: true, configurable: true}
console.log(child); //Object {name: "zhangzhiying", lastAge: 12, age: 22, sex: "女"}
</script>

結論:要實現繼承,我們還需要解決的問題->“繼承”屬性特性。

4、完善版本  

<script type="text/javascript">
	var child={};
	var mother={
		name:"zhangzhiying",
		lastAge:21,
		set age(value){
			this.lastAge=value;
		},
		get age(){
			return this.lastAge+1;
		}, 
		sex:"女"
	};
	Object.defineProperty(mother,"lastAge",{writable:false});
	mother.age=15;
	function extend(target,source){
		var names=Object.getOwnPropertyNames(source);   //獲取所有的屬性名
		for(var i=0;i<names.length;i++){
			if(names[i]  in  target) continue;    //如果這個屬性存在,就跳過(原型繼承中,如果自有屬性和原型對象的屬性重名,保留自有屬性)
			var desc=Object.getOwnPropertyDescriptor(source,names[i]);   //獲取mother屬性的描述符對象(即屬性特性的集合,es5中用描述符對象來表示)
			Object.defineProperty(target,names[i],desc);   //將mother的描述符對象給child的屬性定義
		}
		return target;
	}
	extend(child,mother);
	console.log(child);
	child.lastAge=12;
	console.log(Object.getOwnPropertyDescriptor(child,"lastAge"));
	console.log(child);
</script>

最後的結果:

可以明顯看到三次的列印,child“繼承”到了set和get,lastAge數值沒發生變化,writable也是false了。 

總結:最近在看《javascript權威指南》,總結一點心得,有錯誤歡迎指正,共同學習進步~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 由於系統預設alert彈出視窗不能自定義樣式,有可能不符合網站的風格,雖然網上應該有很多這樣的JS 但是還是自己寫的比較放心,順便練習一下對DOM的操作 支持IE6下的SELECT不能遮罩的問題,谷歌支持圓角,IE6下就比較醜了,四四方方的,不過可以自定義自己喜歡的樣式 聽取建議後,修改了posit ...
  • 按步驟安裝--選擇指定瀏覽器-安裝成功後顯示綠色圖標; 打開瀏覽器;將文件夾移入wampserver安裝路徑的www文件夾中;找到電腦IP 在手機端訪問 IP/文件夾/demo.html即可 ...
  • 上節我們討論了對象的定義和對象的創建,知道了函數也是對象,知道了對象都是由函數創建的,知道了對象的原型和函數的原型屬性的關係。這節說一下關於對象屬性的操作,下節就可以切入正題了。 屬性刪除 delete操作符刪除一個屬性值後會返回true,第5行也返回true是因為person.age已經是個und ...
  • 1.XPath 查看元素的xpath https://addons.mozilla.org/zh-CN/firefox/addon/xpath-checker/ 2. Tamper Data 查看頁面每一個請求的具體響應時間,結果 https://addons.mozilla.org/zh-CN/f ...
  • (1) 先說jquery, 使用 jQuery 庫的話,只需要同時綁定 oninput 和 onpropertychange 兩個事件就可以了,示例代碼: $('#username').bind('input propertychange', function() { $('#content').h ...
  • 在開發的時候,遇到了這樣一個問題,客戶填寫自己的收貨地址,可以新建,但同時也可以選擇之前填寫的,由於我們的客戶本身就是商戶,地址繁多,把它之前的地址簡單用個下拉框羅列出來顯然不合適,並且客戶要求能夠對地址通過姓名篩選,這樣,選擇地址就必須再開一個小窗來完成了,那麼,小窗中填寫的值怎麼回傳呢? js有 ...
  • 淺談對象(本筆記中截圖和部分代碼取自慕課網視頻http://www.imooc.com/learn/277第四章對象) 面向對象原型鏈繼承這塊,應該算是javascript中最難理解的部分了,小弟腦子比較難轉彎,也是看了好久視頻,博文,慢慢的才有了自己的理解,現在記錄一下學習的內容和總結。首先第一節 ...
  • 代碼整理 - uix.layout.js /** * Grace [jQuery.js] * * UIX頁面佈局 * [email protected] * exp: * $.uix.layout();//執行佈局 * class="uix-layout-container";//標識佈局容器 * c ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...