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太難了。。。原型不好懂。面向對象的底層也不容易懂!