Ajax中后端數(shù)據(jù)返回后需要前端通過JavaScript來實現(xiàn)動態(tài)數(shù)據(jù)更新的問題。所以，在Ajax中加深了一遍JavaScript面向對象的印象。

基礎部分：

JavaScript中創(chuàng)建對象并簡單對象上添加屬性（隨時增加屬性的特性），對屬性的訪問

<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中的 [] 數(shù)組，{} 對象

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

面向對象部分：

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

//方式1：JavaScript中類的定義，需要靠function來模擬function Teacher(){}//方式2：為了和普通的function進行區(qū)分，類名首字母大寫
var Teacher =function(){}
function ooTest(){var teacher=new Teacher();//判斷是不是一個類alert(teacher instanceof Teacher);}

公有屬性和方法的定義

//定義一個book類，這個function承擔構造函數(shù)的工作
//new book類時，function會執(zhí)行
// this 代表當前對象
var Book= function(name){//定義公有屬性this.name = name;//定義公有方法this.getName = function(){return this.name;};this.setName = function(){this.name = name;};
}function ooTest(){// new的過程創(chuàng)建簡單對象，調(diào)用其構造函數(shù)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}

原型對象產(chǎn)生了父類和子類的感覺

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封裝-靜態(tài)屬性和方法的定義★★★★☆

var priObj = new function(){var priname="wang";this.getName= function(){return priname;}this.setName= function(name){priname = name;}
}
//利用匿名方法直接調(diào)用的方式實現(xiàn)一個對象擁有私有信息
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,這樣如果實現(xiàn)接口的類沒有實現(xiàn)這個方法，一點調(diào)用就會報錯 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反射及命名空間的創(chuàng)建

function oo3Test(){//根據(jù)類名反射生成對象，只知道”book",只要要傳的參數(shù)"wang"var book = reflect("book",["wang"]);alert(book.getName());
}
//反射創(chuàng)建對象的方法
//第一個參數(shù)是類名
//第二個參數(shù)是創(chuàng)建對象需要的所有參數(shù)組成的數(shù)組
function reflect(className,args){try{//如何把字符串型的className轉換成對應的一個函數(shù)var rClass = eval(className);//創(chuàng)建對象需要的所有參數(shù)在一個數(shù)組里面["1","2"]//最終調(diào)用new創(chuàng)建的時候，參數(shù)表的寫法應該是("1","2")var oargs = args.join(",");var obj = new rClass(oargs);return obj;}catch(e){return null;}
}

function oo3Test(){//根據(jù)類名反射生成對象，只知道”book",只要要傳的參數(shù)"wang"var book = reflect("book",["wang"]);alert(book.getName());//判斷一個對象是否擁有某一個屬性//hasOwnProperty這個方法只能判斷在對象上直接定義的屬性，對于繼承來的屬性 falsevar bool =book.hasOwnProperty("getName");//需要一個替代的方法，讓getName這種情況也能返回truevar 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太難了。。。原型不好懂。面向對象的底層也不容易懂！

總結

以上是生活随笔為你收集整理的【AJAX】JavaScript的面向对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。