06 JS面向对象

Javascript面向对象

 

1、构造函数生成对象

 

<mce:script type="text/javascript"><!-- //定义一个类 Person ，function表示数据类型 function Person(name,sex){ //属性赋值 this.name = name; this.sex = sex; this.age = 18 ; //定义方法 this.say = function(){ document.write("<br/>"+this.name+" say hi!"); } } /* 原型法添加形为：可以用来扩展该对象的功能 obj.prototype 返回对象的引用，可以为对象定义方法和属性 对象的新实例“继承”赋予该对象原型的操作 */ Person.prototype.run = function(){ document.write("<br/>"+this.name+" say running!"); }; /* //prototype还可以这样使用，如果这样用，会丢失前面的定义 Person.prototype = { jump:function(){ document.write("<br/>"+this.name+" say jumping!"); }, read:function(){ document.write("<br/>"+this.name+" say reading!"); } };*/ //实例化对象 var p1 = new Person("张小华","男"); //执行对象方法 p1.say(); p1.run(); var p2 = new Person("周振华","男"); p2.say(); p2.run(); //p2.jump(); //p2.read(); //定义一个新的类Teacher，定义两个属性 function Teacher(name,sex){ this.name = name; this.sex = sex; } //从Person的原型中获得了方法run Teacher.prototype = Person.prototype; var t1 = new Teacher("毛老师","女"); t1.run(); //t1.say(); //方法无效，没有定义 //遍历对象的所有属性和方法的定义 for(var tmp in t1) { document.write("<br/>"+tmp+" 类型："+typeof(tmp)+" 内容："+t1[tmp]); } // --></mce:script>

 

2、JSON对象生成法

 

    JavaScript Object Notation(缩写JSON)
    JSON 的形式就是用大括“{}”号包括起来的项目列表，每一个项目间并用逗号“,”分隔，
    而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式， 也再次表明了
    JavaScript 里的对象就是字典结构。不管多么复杂的对象，都可以被一句JSON 代码来创建
    并赋值。JSON 就是JavaScript 对象最好的序列化形式，它比XML 更简洁也更省空间。
    对象可以作为一个JSON 形式的字符串，在网络间自由传递和交换信息。 而当需要将这个
    JSON 字符串变成一个JavaScript 对象时， 只需要使用eval 函数这个强大的数码转换引擎，
    就立即能得到一个JavaScript 内存对象。正是由于JSON 的这种简单朴素的天生丽质，才使
    得她在AJAX 舞台上成为璀璨夺目的明星。

 

<mce:script type="text/javascript"><!-- var p1 = { name:"小王", sex:"女", say:function(){ document.write("<br/> "+this.name+" , "+this.sex+" , say hi!"); } }; //JSON对象表示法 prototype 属性是不是没用了 try{ p1.prototype.hello = function(){ document.write("<br/> "+this.name+" , "+this.sex+" , say hi!"); }; p1.hello(); }catch(ex){ document.write("<br/>错误代号："+(ex.number & 0xffff) + " ， 错误信息："+ex.description); } //调用对象p1的方法 p1.say(); //有一天，小王由于受到撞伤，失忆了！ delete p1.name; p1.say(); //document.write("<br/>"+p1[say]); //再后来，小王受到毒人下毒，变哑巴了 delete p1.say; try{ p1.say(); }catch(ex){ document.write("<br/>对象的say()方法没有找到！<br/>错误号："+(ex.number & 0xFFFF)+ " ，错误描述："+ex.description); } // --></mce:script>

 

3、命名空间

 

<mce:script type="text/javascript"><!-- //声明全局对象namespace，用于注册命名空间 namespace = new Object(); //注册命名空间，fullNS为命名空间全路径 namespace.register = function(fullNS){ var nsArr = fullNS.split('.'); var sEval = ""; var sNS = ""; for(var i=0;i<nsArr.length;i++){ if(i!=0)sNS += "."; sNS += nsArr[i]; sEval += "if(typeof("+sNS+") == 'undefined') " + sNS + " = new Object();"; } if(sEval!="")eval(sEval); } //注册自己的命名空间 namespace.register("com.js"); //在此命名空间中注册一个类（采用构造函数生成对象法） com.js.Person = function(name,sex){ this.name = name ; this.sex = sex; this.say = function(){ document.write("<br/> 姓名："+this.name+" ，性别："+this.sex); } }; //通过prototype扩展Person的行为 com.js.Person.prototype.run = function(){ document.write("<br/>"+this.name+" 会跑！"); }; //定义对象 var p = new com.js.Person("张三","男"); p.say(); p.run(); //在此命名空间注册对象Teacher（采用JSON对象法） /*注意不能写成 var com.js.Teacher = {code}*/ com.js.Teacher = { name:"胡月", sex :"女", teach:function(){ document.write("<br/> "+this.name+"老师在上课，性别"+this.sex); } }; //对象Teacher的使用 ，取别名t var t = com.js.Teacher; t.name = "小桃"; t.teach(); //t.sing(); // --></mce:script>

 

<mce:script type="text/javascript"><!-- //声明一个全局对象 namespace = new Object(); //定义注册命名空间的方法 namespace.register = function(fullNS){ var parent = window; var strs = fullNS.split('.'); for(var i=0;i<strs.length;i++){ if(!parent[strs[i]]){ parent[strs[i]] = new Object(); } parent = parent[strs[i]]; } }; //注册需要的命名空间 namespace.register("com.js"); //定义一个类 com.js.Person = function(name,age){ this.name = name; this.age = age; this.say = function(){ document.write("<br/>姓名："+this.name+" ，年龄："+this.age); }; }; //扩展功能 com.js.Person.prototype.run = function(){ document.write("<br/>姓名："+this.name+" , 我会跑了！"); }; //定义一个对象测试 var p = new com.js.Person("丽娟",18); p.say(); p.run(); //下面操作无效 try{ p.prototype.jump = function(){ document.write("<br/>姓名："+this.name+" ， 我会跳了！"); }; p.jump(); }catch(ex){ document.write("<br/>错误代码："+ (ex.number&0xffff) +" ，错误信息"+ex.description); } // --></mce:script>

 

4、封装

 

<mce:script type="text/javascript"><!-- function MyObje(){ //局部变量，外面无法访问 var name ; var sex ; //封装 function setName(_name){ name = _name; }; function getName(){ return name; }; function setSex(_sex){ if(_sex=="男"||_sex=="女"){ sex = _sex; }else{ sex = "男"; //这里是设置默认值 document.write("<br/>性别设置出错，已为您设置默认值男"); } }; function getSex(){ return sex; }; //返回一个JSON格式定义的匿名构造函数，即返回一个对象 return { setName:setName, getName:getName, setSex:setSex, getSex:getSex }; } var obj = new MyObje(); obj.setName("王五"); obj.setSex("太监"); document.write("<br/>对象obj的名字为："+obj.getName()+"，性别为："+obj.getSex()); function T(){ this.name = "张三"; this.say = function(){ document.write("<br/>"+this.name+"说你好！"); } } var t = new T(); t.say(); t.name = "李四"; t.say(); name = "王五"; t.say(); var m = { name:"小三", say:function(){ document.write("<br/>"+this.name+"说你好！"); } }; m.say(); m.name = "小四"; m.say(); // --></mce:script>

 

5、继承

 

原型继承法

 

<mce:script type="text/javascript"><!-- /* prototype是属性对象的，不能应用于对象的实例 */ //通过构造函数的方式生成对象 function Father(name,sex,age){ this.name = name ; this.sex = sex; this.age = age; this.say = function(){ document.write("<br/>Hi，大家好！我是"+this.name+"，今年 "+this.age+" 岁了！"); }; } //生成父亲对象 var father = new Father("张三","男",28); Father.prototype.money = function(){ document.write("<br/>"+this.name+"财产为："+this.age*10000); }; //生成儿子对象 function Son(){} //儿子继承父亲的财产 Son.prototype = new Father(); var son = new Son(); son.name = "张小三"; son.sex = "男"; son.age = 0; son.say(); son.money(); father.say(); father.money(); /* instanceof 实例 从下面可以看出原型继承是真正的JS继承 */ document.write("<br/>对象son是否是Son的实例："+(son instanceof Son)); document.write("<br/>对象son是否是Father的实例："+(son instanceof Father)); document.write("<br/>对象son是否是Object的实例："+(son instanceof Object)); // --></mce:script>

 

call继承法

 

<mce:script type="text/javascript"><!-- //定义类Person function Person(name){ this.name = name; this.sayHi = function(){ document.write("<br/> Hi ，大家好！我是 "+this.name); }; } //定义类Worker function Worker(name,salary){ this.salary = salary ; //调用另一个对象的一个方法，用另一个对象Person代替当前对象Worker Person.call(this,name); this.work = function(){ document.write("<br/>Hi，大家好！我是一名工人，叫 "+this.name+" 年薪为："+this.salary); }; } //定义对象工人 var worker = new Worker("王师傅",2000); worker.sayHi(); worker.work(); //输出对象定义的构造器 alert("对象worker的定义构造函数为："+worker.constructor); alert("对象worker的定义构造函数是否为Worker，"+(worker.constructor == Worker)); alert("对象worker的定义构造函数的数据类型："+(typeof worker.constructor)); /* instanceof 实例 从下面可以看出worker并不是Person的实例，对this.superclass = Person的赋值 */ document.write("<br/>对象worker是否是Worker的实例："+(worker instanceof Worker)); document.write("<br/>对象worker是否是Person的实例："+(worker instanceof Person)); document.write("<br/>对象worker是否是Object的实例："+(worker instanceof Object)); // --></mce:script>

 

apply与prototype联合使用继承法

 

<mce:script type="text/javascript"><!-- /* method.apply(thisobj,args); 以对象thisobj来调用方法method，参数列表args要求为数组 在函数中arguments表示参数列表的数组 */ //定义创建类的类，方法create返回创建对象的构造函数 var Class = { create:function(){ return function(){ //保证init方法在对象创建后被调用 this.init.apply(this,arguments); } } }; //创建类Student var Student = Class.create(); //为类Student定义初始化对象的方法init() Student.prototype = { init:function(name){ this.name = name; }, show:function(){ document.write("我是 "+this.name); } }; //用类Student创建对象s var s = new Student("小明"); s.show(); // --></mce:script>

 

superclass继承法

 

<mce:script type="text/javascript"><!-- //定义类Person function Person(name){ this.name = name; this.sayHi = function(){ document.write("<br/> Hi ，大家好！我是 "+this.name); }; } //定义类Worker function Worker(name,salary){ this.salary = salary ; //superclass 定义其父类 this.superclass = Person; this.superclass(name); this.work = function(){ document.write("<br/>Hi，大家好！我是一名工人，叫 "+this.name+" 年薪"+this.salary); }; } //定义对象工人 var worker = new Worker("王师傅",2000); worker.sayHi(); worker.work(); /* instanceof 实例 从下面可以看出worker并不是Person的实例，对this.superclass = Person的赋值 */ document.write("<br/>对象worker是否是Worker的实例："+(worker instanceof Worker)); document.write("<br/>对象worker是否是Person的实例："+(worker instanceof Person)); document.write("<br/>对象worker是否是Object的实例："+(worker instanceof Object)); // --></mce:script>