深入学习javascript(Function Array)

深入学习javascript(原创)

本文主要讲解一些关于函数，数组的高级用法
一。首先看下函数的一些用法
1.) arguments
arguments在函数中返回的是所有实参的信息，
arguments.length是指实参的个数
arguments[0]是指第一个实参，以此类推
举例:
<script type="text/javascript">
function fun1(){
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}

}

//调用方法
fun1('a','b','c');
//输出 3
//输出a b c;
</script>
2.)arguments.callee
arguments.callee在函数中指的是函数本身，就是说alert(arguments.callee)方法可以打印这个函数提的内容
而arguments.callee.length却是指函数的形参个数。

3.)caller
caller看表面意思应该就能够理解了，指的是调用者的意思,可能你还没有理解是什么意思，看了下面的列子就应该可以明白了
<script type="text/javascript">
function fun2(){
alert(fun2.caller);
}

</script>

<input type="button" value="测试" onclick="fun2('zhangsan')" />
当点击"测试"按钮时会打印
function anonymous(){
fun1('zhangsan');
}

anonymous意思是匿名的意思,因为当前没有函数调用fun2,所以属于匿名调用了
再看下面的例子
<script type="text/javascript">
function fun2(){
alert(fun2.caller);
}

fun3(){
fun2('zhangsan');
}

</script>

<input type="button" value="测试" onclick="fun3()" />
当点击"测试"按钮时会打印
fun3(){
fun2('zhangsan');
}
就是把fun3代码打印出来了，这些子应该理解了，就是指谁调用了我，没有人调用就是匿名了，不过如果直接在js中调用fun2();会打印null的

。

4.)call
call方法JScript参考中的说明：调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])
call方法真的很神奇的，不仅可以用call来调用一个方法，而且js的继承也可用call来实现，讲解起来比较难以理解，我们还是来看看几个列

子吧

<script type="text/javascript">
function fun3(str){
alert("the param is "+str);
}

function fun4(){
fun3.call(this,"aaa");
}
</script>

<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
the param is aaa
我们可以在别的方法中用call来调用另一个方法其实fun2.call(this,"aaa") 和 fun2("aaa")效果是差不多的
从这点列子我们还看不出太多的门道，继续放下看
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}

}

function fun4(){
fun3.call(this,"aaa");
this.fun3_f1();
}
</script>

<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
aaa
为什么呢，你看懂了吗
当我们在fun4中调用fun3.call(this,"aaa");后fun4就具有了fun3对象的所有权限，fun4就可以调用fun3中所有的方法和属性，
其实就是fun4已经继承了fun3,
这里的this可以换成其他的对象，如果换成其他对象的话，fun4就不再继承fun3了，而是被替换的对象继承，例如
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}

}

function fun4(){
var f5=new Function();
fun3.call(f5,"aaa");
alert(this.arg);
alert(f5.arg);
}
</script>

<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
undefined
aaa
其他的就不用再多说了吧

5.)apply
apply方法JScript参考中的说明：应用某一对象的一个方法，用另一个对象替换当前对象。apply([thisObj[,argArray]])
从构造函数看，其实它和call基本差不多的，只是它的参数是个数组而已，开一个简单的例子
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}

}

function fun4(){
var f5=new Function();
fun3.apply(f5,["aaa"]);
alert(this.arg);
alert(f5.arg);
}
</script>

<input type="button" value="测试" onclick="fun4()" />
打印结果和上面的例子一样，看出来区别了吗，呵呵，就是把"aaa",换成了数组["aaa"];其他的我不想再多说了，还是自己练习下吧。

二、我们看看一点点数组的用法吧，别看js数组功能可不少我,我在这里只是说其中的一部分，因为我也不都知道，呵呵
一般初学者用数组怎么用呢，一般都是这样用：
var arr=new Array();
arr[0]="aaa";
arr[1]="bbb";

或者高级点
for(var i=0;i<10;i++){
arr[i]=i*3;
}
等等；那数组到底有哪些好用的方法呢，我们就来看几个吧

1.)push方法 想数组中添加一个元素
var arr = new Array();
arr.push("aaa");
arr.push("bbb");
arr.push("ccc");
这样数组就有了三个元素了，简单吧，以后就不用arr[0]...赋值了 呵呵

2.)shift()方法，干什么的呢，它是用来删除并返回数组中的第一项(如果数组为空,则返回null);
var arr = new Array();
arr.push("aaa");
arr.push("bbb");
arr.push("ccc");

var a1=arr.shift();
alert(arr.length);
alert(a1);
打印
2
aaa

3.)sort()方法，不用说给数组排序了
不过这个方法需要一个“排序器”参数，什么是排序器呢compare,我来写个吧，其实和java的很像的
<script type="text/javascript">
var arr = new Array();
arr.push("aaa");
arr.push("ddd");
arr.push("bbb");
arr.push("ccc");

//自定义排序器
var compare=function (param1,param2){
if(param1>param2){
return 1;
}else if(param1<param2){
return -1;
}else{
return 0;
}
}

alert("排序前");
alertArr(arr);
arr.sort(compare);
alert("排序后");
alertArr(arr);

function alertArr(arr){
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
}
</script>

结果自己运行下了，排序好了，呵呵，自定义排序器你可以自己随便写，只要返回值为 1 0 -1 就OK了，和java差不多吧

4.)join(param)方法
这个方法很简单哦，就是把你所有数组中的变量用param分割开来，最常用的就是url后面的参数表达式了
var arr = new Array();
arr.push("aaa");
arr.push("ddd");
arr.push("bbb");
arr.push("ccc");

var str=arr.join("&");
alert(str);
结果
aaa&ddd&bbb&ccc
简单吧

5.)slice()方法
该slice方法返回数据的指定区段。该slice方法不会改变原始的数组，返回的是一个全新的数组拷贝，而不是原始数组引用，所以无论是改变

原始数组还是新数组，双方均不受影响。该slice方法通过由零开始计算的数组下标来确定切割的部分，创建一个由下标begin开始，到下标

end-1止的新数组（如果end未被指定，默认为最后一个元素）。如：
代码：

var trees = ["aaa", "bbb", "ccc", "ddd", "eee"];
alert(trees.slice(1,4));

输出：
bbb,ccc,ddd

该slice方法的参数问题。如果使用负数的end，则返回由下标begin到下标length-ABS(end)-1(注：ABS(end)表示绝对值的end)的新数组；同理

，使用负数的begin类同：下标为length-ABS(begin)。

三、实例说明

好了说的够多了了，手都写累了，最后结合上面说的，举一个实用的例子吧
大家都用过setTimeout吧，setTimeout在对调用函数传参数的时候比较麻烦，那我们就来从写setTimeout吧，然参数传递变得简单
(这个例子是引用别人的,现在看起来是不是很简单了，以后自己用什么不方便的话，就重写吧)
var st = window.setTimeout;
window.setTimeout = function(fun, params) {
if(typeof fun== 'function'){
var args = Array.prototype.slice.call(arguments,2);
var f = function(){
fun.apply(null, args);

};
return st(f, params);
}
return st(fun,params);
}
function test(str){
alert(str);
}
window.setTimeout(test,1000,'aaa');

这个例子原理就不解释了，只做一点点说明Array.prototype.slice.call其实就是调用数组的slice()方法，不过这里用
arguments.slice(2)不行，会有异常的(具体什么原因我还没搞清楚,可能arguments中是对象的原因)
你可以通过
var arr=new Array();
for(var i=0;i<arguments.length;i++){
arr.push(arguments[i]);
}
var args=all.slice(2);
这样可以的

好了就到这里吧，如果上面有什么不对的，希望回帖帮我指出，或者又补充的都可以....

版权声明：本文为博主原创文章，未经博主允许不得转载。