一、call和apply的区别
ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。
1、call
Function.call(obj,[param1[,param2[,…[,paramN]]]])
-
调用 call 的对象，必须是个函数 Function。
-
call 的第一个参数，是一个对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。
-
第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上。但是如果将所有的参数作为数组传入，它们会作为一个整体映射到 Function 对应的第一个参数上，之后参数都为空。
function func (a,b,c) {}
func.call(obj, 1,2,3)
// func 接收到的参数实际上是 1,2,3
func.call(obj, [1,2,3])
// func 接收到的参数实际上是 [1,2,3],undefined,undefined
call方法第一个参数也是作为函数上下文的对象，但是后面传入的是一个参数列表，而不是单个数组。
var obj = {
name: '小林老师'
}
function func(firstName, lastName) {
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'A', 'B'); // A 小林老师 B
2、apply
Function.apply(obj[,argArray])
-
它的调用者必须是函数 Function，并且只接收两个参数，第一个参数是作为函数上下文的对象。
-
第二个参数，必须是数组或者类数组，它们会被转换成类数组，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别。
func.apply(obj, [1,2,3])
// func 接收到的参数实际上是 1,2,3
func.apply(obj, {
0: 1,
1: 2,
2: 3,
length: 3
})
// func 接收到的参数实际上是 1,2,3
obj作为函数上下文的对象，函数func中的this指向了obj这个对象。参数A和B是放在数组中传入了func函数,分别对应func参数的列表元素。
var obj = {
name: '小林老师'
}
function func(firstName, lastName){
console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A 小林老师 B
当使用 call 或者 apply 的时候,如果我们传入的第一个参数为 null,函数体内的 this 会指 向默认的宿主对象,在浏览器中则是 window。
var func = function( a, b, c ){
console.log(this === window); // 输出:true
};
func.apply( null, [ 1, 2, 3 ] );
但是如果是在严格模式下(use strict)，函数体内的 this 还是为 null。
二、call和apply的用途
1、改变this的指向
var obj = {
name: '小林老师'
}
function func() {
console.log(this.name);
}
func.call(obj); // 小林老师
call 方法的第一个参数是作为函数上下文的对象，这里把 obj 作为参数传给了 func，此时函数里的 this 便指向了 obj 对象。此处 func 函数里其实相当于
function func() {
console.log(obj.name);
}
2、对象的继承
var Person1 = function () {
this.name = '小林老师';
}
var Person2 = function () {
this.getname = function () {
console.log(this.name);
}
Person1.call(this);
}
var person = new Person2();
person.getname(); // 小林老师
Person2 实例化出来的对象 person 通过 getname 方法拿到了 Person1 中的 name。因为在 Person2 中，Person1.call(this) 的作用就是使用 Person2 对象代替 this 对象，那么 Person2 就有了 Person1 中的所有属性和方法了，相当于 Person2 继承了 Person1 的属性和方法。
3、调用函数
function func() {
console.log('小林老师');
}
func.call(); // 小林老师
apply、call 方法都会使函数立即执行，因此它们也可以用来调用函数。
三、call的常见用法
1、Object.prototype.toString.call()
（1）判断基本类型
Object.prototype.toString.call(null);//'[object Null]'
Object.prototype.toString.call(undefined);//'[object Undefined]'
Object.prototype.toString.call('abc');//'[object String]'
Object.prototype.toString.call(123);//'[object Number]'
Object.prototype.toString.call(true);//'[object Boolean]'
（2）判断原生引用类型
函数类型
function fn(){ console.log('test') }
Object.prototype.toString.call(fn);//'[object Function]'
日期类型
var date = new Date();
Object.prototype.toString.call(date);//'[object Date]'
数组类型
var arr = [1,2,3];
Object.prototype.toString.call(arr);//'[object Array]'
正则表达式
var reg = /[hbc]at/gi;
Object.prototype.toString.call(arr);//'[object RegExp]'
自定义类型
function Person(name, age) {
this.name = name;
this.age = age;
}
var person = new Person("Rose", 18);
Object.prototype.toString.call(person); //'[object Object]'
很明显这种方法不能准确判断person是Person类的实例，而只能用instanceof 操作符来进行判断，如下所示：
console.log(person instanceof Person);//输出结果为true
（3）判断原生JSON对象
var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON);
console.log(isNativeJSON);//输出结果为'[object JSON]'说明JSON是原生的，否则不是
2、Array.prototype.slice.call()
Array.prototype.slice.call(arguments)能将具有length属性的对象(key值为数字)转成数组。[]是Array的示例，所以可以直接使用[].slice（）方法。
var obj = {0:'hello',1:'world',length:2};
console.log(Array.prototype.slice.call(obj,0));//["hello", "world"]
没有length属性的对象
var obj = {0:'hello',1:'world'};//没有length属性
console.log(Array.prototype.slice.call(obj,0));//[]
四、apply的常见用法
apply的妙用,可以将一个数组默认的转换为一个参数列表，一般在目标函数只需要n个参数列表，但是不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]），我们就可以通过apply的方式来巧妙地解决。
1、Math.max可以实现得到数组中最大的一项
因为Math.max参数里面不支持Math.max([param1,param2])，也就是数组，但是它支持Math.max(param1,param2,param3…)，所以可以根据apply的那个特点来解决：
var array = [1, 2, 3];
var max = Math.max.apply(null, array);
console.log(max);//3
这样轻易的可以得到一个数组中最大的一项，apply会将一个数组装换为一个参数接一个参数的传递给方法，这块在调用的时候第一个参数给了一个null，这个是因为没有对象去调用这个方法，我们只需要用这个方法来帮我们运算，得到返回的结果就行，所以直接传递了一个null过去，当然，第一个参数使用this也是可以的：
var array = [1, 2, 3];
var max = Math.max.apply(this, array);
console.log(max);//3
使用this就相当于用全局对象去调用Math.max，所以也是一样的。
2、Math.min可以实现得到数组中最小的一项
同样的Math.min和Math.max是一个思想：
var array = [1, 2, 3];
var min = Math.min.apply(null, array);
console.log(min);//1
当然，apply的第一个参数可以用null也可以用this，这个是和Math.max一样的。
3、Array.prototype.push可以实现两个数组合并
同样的，push方法没有提供push一个数组，但是它提供了push(param1,param,…paramN)所以同样也可以通过apply来装换一下这个数组，即:
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);//[ 1, 2, 3, 4, 5, 6 ]
可以这样理解，arr1调用了Array的push方法，参数是通过apply将数组转换为参数列表的集合，其实，arr1也可以调用自己的push方法：
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
arr1.push.apply(arr1, arr2);
console.log(arr1);//[ 1, 2, 3, 4, 5, 6 ]
也就是只要有push方法，arr1就可以利用apply方法来调用该方法，以及使用apply方法将数组转换为一系列参数，所以也可以这样写：
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
[].push.apply(arr1, arr2);
console.log(arr1);//[ 1, 2, 3, 4, 5, 6 ]
4、Array.prototype.reduce.apply对复杂问题的解决
var o = {'0': 'a', '1':'b', '2':'c', length: 3};
var result = Array.prototype.reduce.apply(o, [function(a, b){
return a+b;
}]); //result = 'abc'
五、call、apply 和 bind 的区别
call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。
1、bind的返回值是一个函数
var obj = {
name: '小林老师'
}
function func() {
console.log(this.name);
}
var func1 = func.bind(obj);
func1();
function add (a, b) {
return a + b;
}
function sub (a, b) {
return a - b;
}
add.bind(sub, 5, 3); // 这时，并不会返回 8
add.bind(sub, 5, 3)(); // 调用后，返回 8
bind 方法不会立即执行，而是返回一个改变了上下文 this 后的函数。而原函数 func 中的 this 并没有被改变，依旧指向全局对象 window。
2、参数的使用
function func(a, b, c) {
console.log(a, b, c);
}
var func1 = func.bind(null,'小林老师');
func('A', 'B', 'C'); // A B C
func1('A', 'B', 'C'); // 小林老师 A B
func1('B', 'C'); // 小林老师 B C
func.call(null, '小林老师'); // 小林老师 undefined undefined
call 是把第二个及以后的参数作为 func 方法的实参传进去，而 func1 方法的实参实则是在 bind 中参数的基础上再往后排。
六、caller和callee的区别
1、caller用法
- 返回一个调用当前函数的引用 如果是由顶层调用的话 则返回null
var callerTest = function() {
console.log(callerTest.caller) ;
};
function a() {
callerTest() ;
}
a() ;//输出function a() {callerTest();}
callerTest() ;//输出null
2、callee用法
- 返回一个正在被执行函数的引用 （这里常用来递归匿名函数本身 但是在严格模式下不可行）
callee是arguments对象的一个成员 表示对函数对象本身的引用 它有个length属性（代表形参的长度）
var c = function(x,y) {
console.log(arguments.length,arguments.callee.length,arguments.callee)
} ;
c(1,2,3) ;//输出3 2 function(x,y) {console.log(arguments.length,arguments.callee.length,arguments.callee)}
（1）arguments.callee用法
早期版本的 JavaScript不允许使用命名函数表达式，出于这样的原因, 你不能创建一个递归函数表达式。
例如，下边这个语法就是行的通的：
function factorial (n) {
return !(n > 1) ? 1 : factorial(n - 1) * n;
}
[1,2,3,4,5].map(factorial);
但是:
[1,2,3,4,5].map(function (n) {
return !(n > 1) ? 1 : /* 这里写什么? */ (n - 1) * n;
});
这个不行。为了解决这个问题， arguments.callee 添加进来了。然后你可以这么做
[1,2,3,4,5].map(function (n) {
return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
});
ECMAScript 3 通过允许命名函数表达式解决这些问题
[1,2,3,4,5].map(function factorial (n) {
return !(n > 1) ? 1 : factorial(n-1)*n;
});
这有很多好处：
-
该函数可以像代码内部的任何其他函数一样被调用
-
它不会在外部作用域中创建一个变量 (除了 IE 8 及以下)
-
它具有比访问arguments对象更好的性能
（2）在匿名递归函数中使用 arguments.callee
function create() {
return function(n) {
if (n <= 1)
return 1;
return n * arguments.callee(n - 1);
};
}
var result = create()(5);
console.log(result) // 返回120 (5 * 4 * 3 * 2 * 1)
