17_call和apply的区别是什么？caller和calle

作者: 沐向 | 来源:发表于2020-04-15 14:22 被阅读0次

一、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) 的作用就是使用 Person1 对象代替 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)