面向对象的JS 开发

面向对象的JS开发使用javascriptide提高开发的效率一般在JS开发中用aptana或spket1.Spket下载地址：下载后有一个文件。安装这个插件就可以了安装方法和普通的插件方法一样2.安装方法解压这个文件。目录如下把这里面的文件COPY到myeclpse的目录。如下我的myeclipse安装目录C:\ProgramFiles\MyEclipse6.5\eclipse3.启动Eclipse，在window中打开preferences，在左边会看到Spket4.打开Spket下的JavaScriptProfile，，点击New，添加jQuery5.点击jQuery，选择右边的AddLibrary，选择一个普通的没有压缩的jquery6.设置成默认用spekt打开开发会有提示等功能。如下面向对象JS开发--基础ConstructorJs里没有类。创建一个实例就是new了构造器.//构造器声明functionMyObject(){}构造器就是一个function//构造器声明functionMyObject(){}//创建类的实例的varo=newMyObject();类的属性方法可以写在构造器里面。//构造器声明functionPerson(name){//属性this.name=name;//方法this.say=function(message){alert(message)}}//创建类的实例的varo=newPerson(zzg);//测试属性alert(o.name);//测试方法o.say(测试消息)构造器的有一个默认的返回值，这个默认的返回值就是当前的实列。这个返回值可以改变//构造器声明functionPerson(){//改变returnreturn{say:function(message){alert(message)},run:function(){alert(run)}};}//创建类的实例的varo=newPerson();//测试方法o.say(测试消息);o.run();构造器可以有构造参数functionPerson(name){//赋值this.name=name;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(Person+this.name++arguments[0]);}}varp=newPerson(zzg);p.say(hi);效果如下函数本身也是对象。构造器的构造器就是FunctionF是大写Function构造函数至少要传两个字符串参数，可以是空字符串。除了最后一个字符串会被当做函数体语句去执行，其它参数都会作为函数参数变量名!varPerson=newFunction(arg1,alert(arg1));//最后一个参数为执行语句的字符串，前面参数全是函数要用到的参数//这二个方法是等同的/*varPerson=function(arg1){alert(arg1);s}*/Person(zzg);输出结果如下测试下面alert(Object.constructor===Function)alert(Date.constructor===Function)alert(Number.constructor===Function)alert(String.constructor===Function)varPerson=function(){}alert(Person.constructor===Function)结果如下：Ojbect,Date,等的构造器全是FunctionPrototype构造器的实例对象。Prototype有一个constructor属性指向Constructor。Constructor也有一个prototype属性指向PrototypefunctionPerson(){}varPrototype=Person.prototype;//Person的实例对象alert(Prototype);//Prototype的创造器varconstructor=Prototype.constructor;alert(constructor)//constructor就是Personalert(constructor===Person)利用Prototype就可以给这个构造器的实例增加方法，属性functionPerson(){}//增加属性Person.prototype.name=zzg;//增加方法Person.prototype.say=function(message){alert(message);}Person.prototype.run=function(){alert(this.name+iamrun);}//测试varp=newPerson();p.say(zzg);p.run();p.name=great;p.run();_proto__是JS内部使用寻找原型链的属性。在IE里看不到。functionPerson(){this.name=zzg;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(Person+this.name++arguments[0]);}}//继承PersonfunctionMan(){};Man.prototype=newPerson();varm=newMan();m.say(hi);functionOutMan(){//重写say方法this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(OutMan+this.name++arguments[0]);}};OutMan.prototype=newMan();varm2=newOutMan();m2.say(hi);类查看结果如下执行这个对象时，先查看当前的作用域。然后根据_proto__是JS内部使用寻找作用域。如果原型还是对象。会依次根据_proto__查找。这就是Prototype继承的原理。This在JS里。如果一个对象的调用者没有显示声明，这个调用者就是windowwindow.Person=function(){//这个this指的是当前的实例this.name=zzg;this.say=function(message){alert(this.name+:+message)}}varp=newPerson();p.say(happy);//和上面的是一个意思functionPerson1(){//这个this指的是当前的实例this.name=zzg;this.say=function(message){alert(this.name+:+message)}}varp1=newPerson1();p1.say(happy);This与JAVA里的this不一样，指的是方法的调用者。functionPerson(){//这个this指的是当前的实例this.name=zzg;this.say=function(message){alert(this.name+:+message)}}varp=newPerson();p.say(happy);this.fn=p.say;//这个fn引用了p的say方法。say方法的this的name为空。因为这个this调用者是windowthis.fn(again)效果如下可以使用apply和call两个全局方法来改变函数中this的具体指向。//和上面的是一个意思functionPerson(){//这个this指的是当前的实例this.name=zzg;this.say=function(message){alert(this.name+:+message)}}varp=newPerson();p.name=happy;//调say方法时。这个this指的是当前的实例p.say();//利用call改变thissay的方法调用者成了windowp.say.call(this,again)//apply与call相比，只有参数不一样一个是对象，一个是数组p.say.apply(p,[again])效果如下ArgumentsJs里的参数对象。注意他不是数组;//和上面的是一个意思functionPerson(){//这个this指的是当前的实例this.name=zzg;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert($.type(arguments)++arguments.length++arguments[0]);}}varp=newPerson();p.name=happy;//调say方法时。这个this指的是当前的实例p.say(zzg);p.say(zzg,happy);arguments对象的callee属性指向它所在的函数functionfnTest(){alert(arguments.callee);}fnTest();结果如下面向对象JS开发--继承prototype继承functionPerson(){this.name=zzg;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(Person+this.name++arguments[0]);}}//继承PersonfunctionMan(){};Man.prototype=newPerson();varm=newMan();m.say(hi);functionOutMan(){//重写say方法this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(OutMan+this.name++arguments[0]);}};OutMan.prototype=newMan();varm2=newOutMan();m2.say(hi);效果如下Prototype继承时，构造参数不方便。对象冒充，改变this一般有如下三种方法Call方法functionPerson(name){this.name=name;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(Person+this.name++arguments[0]);}}//继承PersonfunctionMan(name){Person.call(this,name);};varm=newMan(man);m.say(hi);functionOutMan(name){Man.call(this,name)//重写say方法this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(OutMan+this.name++arguments[0]);}};varm2=newOutMan(outman);m2.say(hi);利用父类.call(this,参数);方式Apply方法functionPerson(name){this.name=name;this.say=function(){//用arguments[0]可以访问第一个参数，如此类推。alert(Person+this.name++arguments[0]);}}//继承PersonfunctionMan(name){Person.apply(this,[name]);};varm=newMan(man);m.say(hi);functionOutMan(name){Man.apply(this,[name])//重写say方法this.say=function(){//用arguments[0]可以访问第一个参数