call apply callee和caller之间的区别

1、call()

call()标准api

fun.call(thisArg[, arg1[, arg2[, …]]])
call()作用都是改变当前作用域，即改变this的指向，将函数对象从初始的上下文改变为由thisArg指定的新对象。
thisArg：可选项，将被当做当前对象。如果没有thisArg，那么global对象将被用作thisArg.
arg1,arg2：可选项，将被传递方法参数序列。

call()应用demo

demo1

1 2 3 4 5 6 7 8 9 10 11 12

<input type= "text" id= "idTxt" value= "input text"> var value = "global var"; function mFunc(){ this.value = "member var"; } function gFunc(){ alert( this.value); } window.gFunc(); //=>global var gFunc.call( window); //=>global var gFunc.call( new mFunc()); //=>member var gFunc.call( document.getElementById( 'idTxt')); //=>input text

demo2

1 2 3 4 5 6 7 8 9

var func = new function(){ this.a = "func"; } var func2 = function(x){ var a = "func2"; alert( this.a); //=>'func' alert(x); //=>'func2' } func2.call(func, "func2");

这个例子中，func调用的作用域是func，那么this指向func，this.a就等于func,对于第二个alert(x)，func2()的参数为func2,所以alert(x)=>’func2’

上面两个例子理解起来都不困难，再看下面这个例子：

demo3

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var animals = [ { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' } ]; for ( var i = 0; i < animals.length; i++) { ( function(i) { this.print = function() { console.log( '#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); }

这里面有个匿名函数，我们将给这个匿名函数加一个名字，下面这样改一下，会看得清楚一些：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var animals = [ { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' } ]; for ( var i = 0; i < animals.length; i++) { var callFunc = function(i) { this.print = function() { console.log( '#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }; callFunc.call(animals[i], i) }

callFunc()当前作用域对象是animals[i],i是callFunc()参数，将输出
=> #0 Lion: King
=> #1 Whale: Fail

2、apply()

apply()方法的作用与call()作用相同，都是改变当前作用域this指向。

apply()标准api

fun.apply(thisArg, [arg1,arg2,…argN])
从api上可以看出apply()区别于call()是第二个参数，apply()传入的是一个数组。

使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入，arguments是数组。

demo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/*定义一个人类*/ function Person(name,age) { this.name=name; this.age=age; } /*定义一个学生类*/ function Student(name,age,grade) { //让Student()方法拥有(调用)Person()方法的属性 Person.apply( this, arguments); //=>等价于this.name = name;this.age = age; this.grade=grade; } //创建一个学生类 var student= new Student( "zhangsan", 21, "一年级"); //测试 alert( "name:"+student.name+ "\n"+ "age:"+student.age+ "\n"+ "grade:"+student.grade);

3、caller()

caller返回一个对函数的引用，该函数调用了当前函数。
对于函数来说，caller 属性只有在函数执行时才有定义。 如果函数是由 javascript 程序的顶层调用的，那么 caller 包含的就是 null 。

demo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function callerDemo() { if ( arguments.caller) { var a = callerDemo.caller.toString(); alert(a); } else { alert( "this is a top function"); } } function handleCaller() { callerDemo(); } handleCaller(); function calleeDemo() { alert( arguments.callee); } calleeDemo();

4、callee()

返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。

arguments.length是实参长度，arguments.callee.length是形参长度

demo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//callee可以打印其本身 function calleeDemo() { alert( arguments.callee); } //用于验证参数 function calleeLengthDemo(arg1, arg2) { if ( arguments.length == arguments.callee.length) { window.alert( "验证形参和实参长度正确！"); return; } else { alert( "实参长度：" + arguments.length); alert( "形参长度： " + arguments.callee.length); } } //递归计算 var sum = function (n) { if (n < = 0) return 1; else return n ＋ arguments.callee(n - 1) }