函数,函数,function,function,go go go!
创建函数:
第一种:function aa(){alert(1)};
第二种:var aa=function(){alert(1)};
其实对于使用没有太大的区别,第一个是用函数关键字创建,第二个是创建变量,然后赋值为一个函数。
同样我们还可以创建匿名函数
function(){alert(1)};
函数的里面可以传递参数arg
function aa(arg){alert(arg)};
function aa(arg1,arg2){var num=arg1+arg2;alert(num)};
调用函数:
aa();
其他的调用方式
立即执行函数
(function aa(){alert(1)})();
给定义的函数套上(),后面再加上(),函数就会被立即执行了
有参数的也是一样
立即执行匿名函数
(function(){alert(1)})();
函数参数:
定义函数的参数我们叫他形参,相当于变量的作用,调用函数,里面的就是实参,具体的内容
我们来一段测试:
function aa(arg1){ alert(arg1) }; aa(123);
我们定义函数aa,里面用arg1这个形参接受调用函数实参的内容,执行后,弹出123;
参数除了是js提供的字符和数字外,我们在做一个测试:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{ margin:0; padding:0;} .fou{ color:#fff;} </style> <script src="js/jquery-min.js"></script> <title>demo</title> </head> <body> <div class="demo">demo</div> </body> <script type="text/javascript"> function aa(arg1){ alert(arg1.html()); }; aa($(".demo")); </script> </html>
看来可以传入dom对象,假如不可以,js就不会有dom、bom、es组成了。
这次我传入一个函数试试,函数里面执行参数函数,代码
function aa(arg1){ arg1(); }; aa(function(){alert(111)});
调用aa的时候,我们传入的函数成功执行了,看来参数可以是函数
我们介绍函数内部自动产生的新对象 arguments
参数对象是伪数组类型,我们看成数组就行了,具有length属性,输出参数的个数,
arguments[0] 第一个参数
arguments[1] 第二个参数
arguments[2] 第三个参数
arguments[3] 第n各参数
我们可以看出,我们函数定义的形参,会自动赋给arguments,按照顺序;我们看代码
function aa(arg1){ alert(arguments[0]) }; aa(123);
借助参数对象,我们把实参内容成功输出,我们多几个参数,代码如下
function aa(arg1,arg2,arg3){ alert(arguments[2]) alert(arguments.length) }; aa(123,456,789);
参数对象下标为2是第三个参数内容,同样长度也是3个,全部正确
我们知道参数对象具有length属性,可以判断函数参数的参数个数,它还具有一个指针属性,arguments.callee
函数内部调用此属性,指向函数本身,也就是得到了本身函数,我们看下面代码:
function aa(arg1){ if(arg1>8){ arguments.callee(arg1-1); }else{ alert(arg1) }; }; aa(9);
我们的函数是输出参数内容,我们如果不满足条件,执行里面
arguments.callee(arg1-1);
最后输出了8,可见这个属性的调用代表了函数本身,我们再看一段代码
function aa(arg1){ if(arg1<1){ return 1; }else{ return arg1+arguments.callee(arg1-1); }; }; alert(aa(9));
实现了1-9的相加,这就是递归函数,根据条件的临界,去不断调用函数本身
函数集合:
我们把定义的n个函数,放在一个数组里
var arrayfun=[]; arrayfun[0]=function(){}; arrayfun[1]=function(){}; arrayfun[2]=function(){};
这样做其实是很少见的,
我们这么写的用意就是表示这些函数具有类似的处理功能,不过过几天可能就忘记哪个是哪个了,谁让下标是0 1 2,我们在定义函数的时候,函数名往往就是功能的拼写,我们借助object对象,实现函数的关系相同整合
var cumputer={} cumputer.add=function(){}; cumputer.inc=function(){}; cumputer.chu=function(){}; cumputer.cheng=function(){};
首先,这一组函数用于就是计算,然后定义了加减乘除,这里面的cumpter就相当于一个钩子,我们用什么了,通过这个钩子去调用。
构造函数(类):
最基本的构造函数定义,构造函数的首字母大写,这不是必须的,但是为了区别普通函数我们还是最好大写
function Perple(name,sex){ this.name=name; this.sex=sex; this.showname=function(){ alert(this.name) }; }; var people1=new Perple("jack","男"); alert(people1.name); alert(people1.sex); people1.showname();
我们创建了people构造函数,也就是俗称的类。我们通过构造函数实例化对象,是通过new关键字
this作为构造函数的指针,会指向我们new的对象,这样new的对象就可以调用类里面的属性和方法。
我们结合jq,做一个改变标签宽度构造函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{ margin:0; padding:0;} .fou{ color:#fff;} </style> <script src="js/jquery-min.js"></script> <title>demo</title> </head> <body> <div class="dd" style="width:200px; height:50px;background:#ffa;">我的宽度是200</div> </body> <script type="text/javascript"> function Gwidth(obj,width){ this.obj=obj; this.width=width; this.ggwidth=function(){ obj.css(‘width‘,this.width); }; }; var Gwidth1=new Gwidth($(‘.dd‘),‘300‘); Gwidth1.ggwidth(); </script> </html>
这样我我们就可以做指定的处理了,针对jq的dom元素
构造函数-原型:
函数会有一个prototype属性,就是原型属性,这个原型属性指向原型对象,原型对象具有constructor属性,这个属性指向构造函数;
我们通过原型属性,可以添加共享的属性和方法,看代码
function Gwidth(obj,width,height){ this.obj=obj; this.width=width; this.height=height; this.ggwidth=function(){ this.obj.css(‘width‘,this.width); }; }; Gwidth.prototype.ggheight=function(){ this.obj.css(‘height‘,this.width); }; var Gwidth1=new Gwidth($(‘.dd‘),‘300‘,‘200‘); Gwidth1.ggheight();
我们利用原型属性,添加了改变高度的方法,我们同样新建对象,可以调用它。
我们输出新建对象的构建者属性,看看是否指向了Gwidth函数
alert(Gwidth1.constructor)
输出了整个构造函数,下面我们输出原型属性得到的原型属性的构建者属性
alert(typeof Gwidth.prototype) alert(Gwidth.prototype.constructor)
发现,函数的原型属性是一个对象,证明了调用原型属性,得到了原型对象
我们输出原型属性的构建者属性,返回了构造函数,构造函数新建的对象的构建者属性也会返回构造函数,说明原型属性得到的对象和新建的而对象通过构建者属性,指向了同一个地方,进而得到了,给原型添加属性和方法相当于同样给新建对象添加了属性和方法。从而证明了给原型属性添加的属性和方法,其实会先得到原型对象,自动调用构造者属性,指向了构造函数,所以添加的属性和方法也就相当于添加到了构造函数上,我们新建实例,就可以调用通过构造函数的属性和方法,同理也可以调用了原型属性的方法和属性。
并且通过原型属性添加的属性和方法放构造函数外!
我们运用学到的构造函数和原型,封装一个类似jq的类库,不过我们的会非常的单一化:
我们只能进行id的选择,选择提供显示和隐藏还有内容的设置,就这这么简单,我们先做第一步,
提供id的选择,毫无疑问,id就是我们的参数,构造函数执行就会返回id的dom节点,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{ margin:0; padding:0;} .fou{ color:#fff;} </style> <script src="js/jquery-min.js"></script> <title>demo</title> </head> <body> <div id="ida" style="width:200px; height:50px;background:#ffa;">我我我</div> </body> <script type="text/javascript"> function Jseo(id){ this.obj=document.getElementById(id); }; var ida=new Jseo("ida"); alert(ida.obj.innerHTML) </script> </html>
我们测试发现,新建对象后,调用他的obj属性就得到了我们div元素,我们通过原型给他加点操作函数。比如把display设置为none的hide()和设置为block的show()方法
js部分下:
function Jseo(id){ this.obj=document.getElementById(id); }; Jseo.prototype.show=function(){ this.obj.style.display="block"; }; Jseo.prototype.hide=function(){ this.obj.style.display="none"; }; var ida=new Jseo("ida"); ida.hide();
默认情况下div是显示的,我们调用了自己方法,在开始就让他none掉了,
对象+事件+方法才是最常用的操作,我们里面还需要把事件封装进去,我们就封装一个click事件,做实例演示;代码
function Jseo(id){ this.obj=document.getElementById(id); }; Jseo.prototype.show=function(){ this.obj.style.display="block"; }; Jseo.prototype.hide=function(){ this.obj.style.display="none"; }; Jseo.prototype.on=function(ev,fun){ this.obj.addEventListener(ev, fun); }; var ida=new Jseo("ida"); ida.on("click",function(){ alert(1) });
添加一个click事件,我们点击弹出了1;我们要更复杂的操作,结合前面的方法,我们再点击后让自己none,看代码
function Jseo(id){ this.obj=document.getElementById(id); }; Jseo.prototype.show=function(){ this.obj.style.display="block"; }; Jseo.prototype.hide=function(){ this.obj.style.display="none"; }; Jseo.prototype.on=function(ev,fun){ this.obj.addEventListener(ev, fun); }; var ida=new Jseo("ida"); ida.on("click",function(){ ida.hide(); });
实现了,点击使我们的封装,这个none也是自己的封装,我们再添加改变里面内容的方法,叫html(),不断靠近jq的使用方式
function Jseo(id){ this.obj=document.getElementById(id); }; Jseo.prototype.show=function(){ this.obj.style.display="block"; }; Jseo.prototype.hide=function(){ this.obj.style.display="none"; }; Jseo.prototype.html=function(text){ this.obj.innerHTML=text; }; Jseo.prototype.on=function(ev,fun){ this.obj.addEventListener(ev, fun); }; var ida=new Jseo("ida"); ida.on("click",function(){ ida.html("666"); });
点击后内容变为设置的值。
函数继承:
我们通过原型属性,可以给函数实现继承,还有另外2个方法,可是实现继承call和apply
?call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。?
第一个参数是对象,也就是我们的替换对象,这个可选,不写的话就为null;我们测试一次
我们创建一个people的构造函数,里面具有showname的方法,我们创建一个man方法,里面没有方法,我们通过call去继承前面people提供的方法
function People(name){ this.name=name; this.showname=function(){ alert(this.name) } }; var peo1=new People("tom"); peo1.showname();
构造函数成功添加showname,我们创建第二个构造函数,新建对象
function Man(name){ this.name=name; }; var man1=new Man("joke");
我想要显示出man1的名字,我们call一次,
function People(name){ this.name=name; this.showname=function(){ alert(this.name) } }; var peo1=new People("tom"); function Man(name){ this.name=name; }; var man1=new Man("joke"); peo1.showname.call(man1);
成功弹出joke,我们新建了man,并且通过call替换了前面的peo1调用他的showname方法成功。
其实call的这个时候,可以看成代码变成这样了:
function Man(name){
this.name=name;
this.showname=function(){
alert(this.name)
}
};
我们知道,call可以传入参数,我们做个测试
function People(name){ this.name=name; this.showname=function(con){ alert(con) } }; var peo1=new People("tom"); function Man(name){ this.name=name; }; var man1=new Man("joke"); peo1.showname.call(man1,123);
原来call的参数,就相当于给调用的方法加了参数,
apply与call的区别就在参数,一个是正常的,一个是数组的形式,我们看下面apply的实例
function People(name){ this.name=name; this.showname=function(con1,con2,con3){ alert(con3) } }; var peo1=new People("tom"); function Man(name){ this.name=name; }; var man1=new Man("joke"); peo1.showname.apply(man1,[123,456,789]);
这感觉和,隔开没有区别,其实参数是数组,可以看出,最后也要分割成,隔开的样子,不然我们的con3就不可能代表数组第三项789了。
原生构造函数:
什么叫原生,当然就是写好的,让我们直接可以用的,正如我说的,构造函数在js里面就是类的作用,原生构造就是已经定义了的类,类我们也管他叫类型,js的类型有数字,字符串,布尔,null,undifind,还有数组和object类型
var num=123; 创建数字对象
var str="women" 创建字符串对象
var array=[123,456] 创建数组对象
var obj={con:"llll",show:function(){alert(1)}} 创建object对象
这是我们最常见的创建方式,同样,我们还应该看见过
var array=new (123,456)和
var obj=new object(); 的形式去创建数组和object类型
看到这里是不是和我们上面介绍的创建构造函数,去实例对象一样了。
new Array();和 new Object(); 就是在实例对象,可以创建的时候赋值,也可以随后赋值
我们先以数组的实例化为案例,随后处理object类型
我们用new的方式新建一个数组
var arr=new Array(123,456,789); alert(arr[1])
我们知道数组有一个slice获取子数组方法,我们输出
var arr=new Array(123,456,789); var arr1=arr.slice(0,1) alert(arr1)
我们知道数组提供了很多的方法,我们现在要实现一个数组排序后,获取从0开始,长度为2的子数组
当然我们可以这样做
var arr=new Array(333,111,222,999,555,666); arr.sort(); var arr1=arr.slice(0,2) alert(arr1)
看起来没问题,确实没问题的,不过我希望和sort一样,数组的有一个sortslice方法,
我们知道构造函数可以通过原型属性继承和添加共享的方法,以前都是在自定义构造函数中,其实对于这样原生构造函数同样适用
看下面代码:
Array.prototype.sortslice=function(){ this.sort(); var arr1=this.slice(0,2) alert(arr1) } var arr=new Array(333,111,222,999,555,666); arr.sortslice();
通过对array类型的原型属性添加,我们实现了理想的操作
原型定义的函数里面,this作为指针,同样指向实例的对象,就是arr了。
我们其实常见的对数组操作还有求出最大值和最小值,其实我们排序后比较也可以出来,不过js有一个Math对象,他天生就有求最大值和最小值的方法
Math.max(arg1,arg2...argn) 求出参数中的最大值或最小值
Math.min(arg1,arg2...argn)
alert(Math.max(123,4,789,852));
输出了852,既然这里有了,我们在对数组去写,就有些多此一举了,我们知道call和apply可是实现这种继承的调用,既然是数组,我们肯定选择apply了,他的参数就是数组
var arr=[123,8888,955,44]; alert(Math.max.apply(null,arr))
我们运用apply只是使用math的最大方法,没有什么新对象和就对象的替换处理,第一个参数还必须写,我们就用null做空站位,他爱指向谁指向谁去吧!
有人会说我很不理解,新对象为啥为null,好了,我们按着思路处理,就是array的对象替换math好了,
var arr=[123,8888,955,44]; alert(Math.max.apply(arr,arr))
我们知道对数组循环采用的是for循环
var arr=[123,8888,955,44]; for(var i=0;i<arr.length;i++){ alert(arr[i]) }
除了for的循环输出,js还提供了更高级的for in处理
var arr=[123,8888,955,44]; for(var i in arr){ alert(arr[i]) }
比for要简洁的多,in关键字前面定义的变量会接收到每一个遍历到的下标
我们介绍的主要目的就是实现对object类型的循环处理
我们定义一个object对象,输出
var obj={name:"tom",sex:"男",year:"1991"}; for(var i in obj){ alert(obj[i]) }
函数模式:
其实我们已经介绍到大部分函数模式了,我们回忆以前并添加最新的常用模式
构造模式:
function Perple(name,sex){ this.name=name; this.sex=sex; this.showname=function(){ alert(this.name) }; };
构造加原型继承模式:
function Gwidth(obj,width,height){ this.obj=obj; this.width=width; this.height=height; this.ggwidth=function(){ this.obj.css(‘width‘,this.width); }; }; Gwidth.prototype.ggheight=function(){ this.obj.css(‘height‘,this.width); }; var Gwidth1=new Gwidth($(‘.dd‘),‘300‘,‘200‘); Gwidth1.ggheight();
伪对象模式:
var cumputer={} cumputer.add=function(){}; cumputer.inc=function(){}; cumputer.chu=function(){}; cumputer.cheng=function(){};
这里需要介绍一下this指针,我们知道添加事件生成的this指向添加事件的节点,构造函数的this指向新建对象
object对象的this指向的就是object对象本身
我们测试代码:
var obj={name:"tom",sex:"男",year:"1991"}; obj.showname=function(){ alert(this.name); } obj.showname();
输出了obj的name键值
工厂模式:
工厂模式就是es结合dom实现对象、事件和方法的统一处理;看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> *{ margin:0; padding:0;} .fou{ color:#fff;} </style> <script src="js/jquery-min.js"></script> <title>demo</title> </head> <body> <div id="ida" style="width:200px; height:50px;background:#ffa;">我我我</div> </body> <script type="text/javascript"> function gc(obj,ev,fun){ obj.addEventListener(ev,fun,false); }; var ida=document.getElementById("ida"); gc(ida,"click",function(){ alert(ida.innerHTML) }); </script> </html>
点击div,输出他的内容,这就是最简单的工厂模式,实现了对象加事件加处理的封装操作
门脸模式:
我们先写一个构造函数,并且实例化
function Perple(name,sex){ this.name=name; this.sex=sex; this.showname=function(){ alert(this.name) }; }; var peo1=new Perple("joke","男"); peo1.showname();
我们是不是看见new感觉很不顺眼,一直的new啊,new啊,我们门脸模式就是用函数屏蔽掉这个new,还能正确执行
function people(name,sex){ function Perple(name,sex){ this.name=name; this.sex=sex; this.showname=function(){ alert(this.name) }; }; var peo=new Perple("joke","男"); return peo; }; var peo1=people("joke","男"); peo1.showname();
我们在门脸函数内部,定义构造函数,然后实例化对象,返回出这个new的对象,同样参数也是通过门脸函数传递下去
这样我们在执行门脸函数同时就获取了实例的对象,就可以屏蔽掉new关键字了,在调用的部分。
函数还有很多模式,如单例模式等!