17_call和apply的区别是什么？caller和callee的区别有哪些

一、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)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343