JS對象的創建和繼承


一下是 JS 對象的常用的對象創建的集中方式:

<script type="text/javascript">
		// 在 javascript 中沒有類的概念 只有 對象
		/*1:定義對象 基於原有的對象進行擴展
			// 事項創建動態給對象添加和刪除
			var obj = new Object();// object 類中的屬性是不可枚舉的
			obj.name = "zhang san";
			obj["age"] = 20; // 動態的給 obj 對象添加 age 屬性
			alert(obj.name);
			alert(obj.age);
			delete obj.name; // 刪除 屬性
			alert(obj.name);
			alert(obj.age);
			obj.sayName = function(name){ // 動態的給 obj 對象添加 方法
				this.name = name;
				alert(this.name);
			}
			obj.sayName("lisi");
		*/
		/*
		2: 定義對象的第二種方式
			var obj = {username:"zhangsan",password:"12345"};
			alert(obj.username);
		*/
		
		/*
		3:工廠方法 定義對象
		function createObject(){
			var object = new Object();
			object["name"] = "zhangshan";
			object.password = "1234";
			object.get = function(){
				alert(this.name +"," + this.password);
			}
			return object;
		}
		var object1 =  createObject();// 通過工廠方法 得到 對象
		object1.get();
		*/
		/* 帶參數的 構造
		function createObject(username, password){
			var object = new Objcet();
			object.username = username;
			object.password = password;
			object.get = function(){
				alser(this.username +"," + this.password);
			}
		}*/
		/*讓一個函數對象被多個構造函數共享
		function get(username, password){
			alert(this.username +","+ this.password);
		}
		function createObject(username, password){
			var object = new Object();
			object.username = username;
			object.password = password;
			object.get = get
			return object;
		}
		var  obj = createObject("張三","1234");
		obj.get();*/
		
		/*
		4:通過 prototype (原型方式) 來實現 對象 構造
			prototype 是 object 對象的一個屬性
		注意:1:單純的使用原型 prototype 方式構造類 無法在構造函數中對屬性進行付初值,
				只能在生產對象後進行改變。
			  2:使用 prototype 構造函數 會使多個對象 共享一份 對象的引用
		function Person(){
		}
		Person.prototype.name = "zhangsan";
		Person.prototype.age = 13;
		Person.prototype.get = function (){
			alert(this.name +"," + this.age);
		}
		var  person = new Person();
		person.get();
		person.name = "lisi";
		person.get();*/
		/*
		5:使用 動態原型 prototype 方法,是的 每個 對象擁有自己的屬性 但是共享一個方法
		function Person(){
			this.name = "zhangsan";
			this.age = 12;
			if( typeof Person.flage == "undefined"){
				Person.prototype.getInf = function(){
					alert(this.name +"," + this.age);
				}
				this.flage = true;
			}
		}
		var p1 = new Person(); p1.getInf();
		var p2 = new Person(); p2.getInf();
		*/
		</script>
一下是常用對象的繼承方式:

		<script type="text/javascript">
			/*1: 使用 對象冒充 實現繼承
			function Parent(username){
				this.username = username;
				this.sayname = function (){
					alert(this.username);
				}
			}
			function Child(username, password){
				this.temp = Parent; // 將 父類對象的應用 付給 this.temp 
				this.temp(username); // 調用構造 方法,此時構造方法 中 的 this 指向的是Child 所以會在 Child 中生成相應對象
				delete this.temp;    // 實際上實現了 this的傳遞
				this.password = password;
				this.sayPass = function (){
					alert(this.password);
				}
			}
			var chirld = new Child("李斯","123");
			chirld.sayname();
			chirld.sayPass();*/
			/*2: 使用 call 實現 繼承 call 方法是每個 function 中都存在的方法, call(param1, param2,...);第一個參數
				指向的是 調用 call 的this
			function Parent(username){
				this.username = username;
				this.sayname = function (){
					alert(this.username);
				}
			}
			function Child(username, password){
				Perent.call(this, username);
				this.password = password;
				this.sayPass(){
				}
			}
			*/
			/*3: 使用 apply 實現繼承 
				 apply 實現的原理 與 call 一樣 只是 apply爲 apply(Param1, new Array());
			function Parent(username){
				this.username = username;
				this.sayname = function (){
					alert(this.username);
				}
			}
			function Child(username, password){
				Parent.apply(this, [username]); // Parent.apply(this, new Array(username));
				this.password = password;
				this.sayPass(){
				}
			}
			*/
			


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