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