理解js中call,apply,caller,callee的区别

56 阅读 0 评论 37 点赞

我是靠谱客的博主快乐白昼，最近开发中收集的这篇文章主要介绍理解js中call,apply,caller,callee的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

javascript中的call(),apply(),caller(),callee()方法作用都是调用某个函数或方法，概念和作用容易混淆，我自己也经常分不清楚什么时候该用哪种函数，这里总结一下，以免忘记。

为什么要用call()和apply()方法？

理清楚这几种方法的区别之前，我们先想想为什么要用call()和apply().
比如有段这样的函数：

function cat(){}
cat.prototype={
food:”fish”,
say: function(){
alert(“I love “+this.food);
}//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
}
var blackCat = new cat;
blackCat.say();

我们有一个对象whiteDog = {food:”bone”},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

1、call()

call()标准api

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

call()应用demo

demo1

<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

var func = new function(){
    this.a = "func";
}
var func2 = function(x){
    var a = "func2";
    alert(this.a); //=>'func'
    alert(x); //=>'func2'
}//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
func2.call(func, "func2");

这个例子中，func调用的作用域是func，那么this指向func，this.a就等于func,对于第二个alert(x)，func2()的参数为func2,所以alert(x)=>’func2’
上面两个例子理解起来都不困难，再看下面这个例子：
demo3

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);
}

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

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);
    }//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
    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

/*定义一个人类*/
function Person(name,age)
{
    this.name=name;
    this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade)
{//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
    //让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

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);
}//在此我向大家推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提升思维能力
calleeDemo();

4、callee()

返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。
arguments.length是实参长度，arguments.callee.length是形参长度

demo

//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)
}

结语

感谢您的观看，如有不足之处，欢迎批评指正。
获取资料???
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：???619586920???，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。