【AJAX】JavaScript的面向對象

Ajax中後端數據返回後需要前端通過JavaScript來實現動態數據更新的問題。所以,在Ajax中加深了一遍JavaScript面向對象的印象。

基礎部分:

JavaScript中創建對象並簡單對象上添加屬性(隨時增加屬性的特性),對屬性的訪問

<script type="text/javascript">
	function objectTest(){
		//方式1:通過new Object()
		var obj1 = new object();
		//方式2:通過{}
		var obj2 = {}
		
		//增加屬性,使用,操作符
		obj1.num=1;
		obj1.str="string";
		obj1.hello=function(){
			alert("hello!");
		}
		obj2.obj=obj1;
		//方式3:對象直接量 定義包含屬性的對象

		var obj3={
			num:1,
			str:"string",
			hello:function(){
				alert("hello")
			}
		}
	}
	//屬性訪問方法1:使用操作符
	alert(obj2.obj.num);
	alert(obj2.obj.str);
	//屬性訪問方法2:使用[]操作
	alert(obj2["obj"]["num"]);
	alert(obj2["boj"]["str"]);
	obj1["hello"]();
</script>

JavaScript中的 [] 數組,{} 對象

<script type="text/javascript">
	function jsonTest(){
		 //JSON數據格式定義-數組
		 var json1="[1,2,{a:123,b:'String',c:[100,1001]}]";
		 //eval可以將JavaScript轉換爲數組,每個數組對象是一個對象
		 var JsonArray=eval(json1);
		 //JSON數據格式定義-對象
		 var json2="{a:'hello',b:[1,2,3],c:function(){alert(\"Hi\")}}";
		 //如果返回的是一個對象,可以在外層加上括號後在進行eval
		 var jsonobj=eval("("+json2+")")}	 
</script>

面向對象部分:

JavaScript是一個純正的面向對象的語言
類的定義

//方式1:JavaScript中類的定義,需要靠function來模擬

function Teacher(){
        
	}

//方式2:爲了和普通的function進行區分,類名首字母大寫
var Teacher =function(){

	}
function ooTest(){
	var teacher=new Teacher();
	//判斷是不是一個類
	alert(teacher instanceof Teacher);
	}

公有屬性和方法的定義

//定義一個book類,這個function承擔構造函數的工作
//new book類時,function會執行
// this 代表當前對象
var Book= function(name){
	//定義公有屬性
	this.name = name;
	//定義公有方法
	this.getName = function(){
		return this.name;
	};
	this.setName = function(){
		this.name = name;
	};
}

function ooTest(){
	// new的過程創建簡單對象,調用其構造函數
	var book1 = new Book("AJAX"):
	var book2 = new BOOk("AJAX");
	alert(book1.getName());
	alert(book2.getName());
	//function 上面有一個原型對象
	var proto = Book.prototype;
	proto.str="string";
	proto.hello=function(){
			alert("hello");
		} 
	//原型對象上定義屬性後,擁有這個原型對象的function
	}

原型對象產生了父類和子類的感覺
在這裏插入圖片描述

JavaScript封裝-私有屬性和方法的定義

 //一種更爲合適的公有屬性和方法的定義
 var Book = function(name){
	//公有屬性,在構造方法裏面定義,通過this關鍵字
	this.name=name;
	if(typeof Book._init == "undefined"){
		//公有的方法,在原型對象上定義
		Book.prototype.setName=function(name){
			this.name=name;
		};
		Book.prototype.getName=function(){
			return this.name;
		};
		Book.prototype.getCount = function(){
			addCount();
			return count;
		};
		Book._init = true;
		//利用局部變量來模擬私有屬性和方法
		var count = 0;
		var addCount = function(){
			count++;
		}
	}
 };

JavaScript封裝-靜態屬性和方法的定義★★★★☆

var priObj = new function(){
	var priname="wang";
	this.getName= function(){
		return priname;
	}
	this.setName= function(name){
		priname = name;
	}
}
//利用匿名方法直接調用的方式實現一個對象擁有私有信息
var priObj=(function(name){
	var priname = name;
	return {
		getName:function(){
			return priname;
		},
		setName:function(name){
			priname = name;
		}
	}
})("wang");

JavaScript繼承

 //一個用於子類繼承父類屬性的方法
 Function.prototype.extend = function(parent){
	for(var proName in parent.prototype){
		this.prototype[proName]=parent.prototype[proName];
	}
 }
 var People = function(name){
	this.name = name;
 }
 People.prototype.getName = function(){
	return this.name;
 }
 People.prototype.setName = function(name){
	this.name=name;
 }
 var Teacher = function(){
	
 }
 Teacher.prototype(People);
 Teacher.prototype.getName= function(){
	return "老師;"+this.name;
 }
 //定義接口
var Inter = function(){
	
}
//定義接口的方法爲undefined,這樣如果實現接口的類沒有實現這個方法,一點調用就會報錯 undefined
Inter.prototype.test=undefined;

Teacher.prototype.test=function(){

}
 function oo2Test(){
	var people = new People"123");
	var teacher = new Tacher();
	teacher.setName("456");
	alert(teacher.getName());
	alert(people.getName());
	teacher.test();
 }

JavaScript反射及命名空間的創建

function oo3Test(){
	//根據類名反射生成對象,只知道”book",只要要傳的參數"wang"
	var book = reflect("book",["wang"]);
	alert(book.getName());
}
//反射創建對象的方法
//第一個參數是類名
//第二個參數是創建對象需要的所有參數組成的數組
function reflect(className,args){
	try{
		//如何把字符串型的className轉換成對應的一個函數
		var rClass = eval(className);
		//創建對象需要的所有參數在一個數組裏面["1","2"]
		//最終調用new創建的時候,參數表的寫法應該是("1","2")
		var oargs = args.join(",");
		var obj = new rClass(oargs);
		return obj;
	}catch(e){
		return null;
	}
}
function oo3Test(){
	//根據類名反射生成對象,只知道”book",只要要傳的參數"wang"
	var book = reflect("book",["wang"]);
	alert(book.getName());
	//判斷一個對象是否擁有某一個屬性
	//hasOwnProperty這個方法只能判斷在對象上直接定義的屬性,對於繼承來的屬性 false
	var bool =book.hasOwnProperty("getName");
	//需要一個替代的方法,讓getName這種情況也能返回true
	var bool2 = book.hasProperty("getName");
	
	//遍歷book對象上的所有屬性
	for (var proName in book){
		alert(book[proName]);
	}
	//如果我們需要獲得一個對象上,所有屬性值不是function的屬性
	var proArray = [];
	for (var proName in book){
		var temp = book[proName];
		if(typeof temp != "function"){
			proArray.push(proName);
		}
	}
}

JS太難了。。。原型不好懂。面向對象的底層也不容易懂!

發佈了171 篇原創文章 · 獲贊 97 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章