【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太难了。。。原型不好懂。面向对象的底层也不容易懂！