zoukankan      html  css  js  c++  java
  • apply、call、callee、caller初步了解

      在javascript中这四货通常一起出现介绍,楼主记忆力实在是太差经常忘记用法,故记此文。

    apply和call

      apply和call是函数原型的一个方法,调用者的类型必须是函数。官方解释:应用某一对象的一个方法,用另一个对象替换当前对象。通常用于改变上下文的this,这点和bind相似。apply和call的区别:方法传递的参数不同。apply传递的是一个数组,如果木有第二个参数两者用法结果相同。

      使用方法:fun.call(thisArg[, arg1[, arg2[, …]]])  fun.apply(thisArg, [arg1,arg2,…argN])

      fun.call(this, arg1,arg2,arg3) == fun.apply(this, arguments) == this.fun(arg1, arg2, arg3)

    复制代码
    function fn() {
      console.log(this.count);
    }
    
    var count = 10;
    var obj = {count: 20};
    
    fn(); // 10
    fn.call(); // 10
    fn.call(window); // 10
    fn.call(null); // 10
    fn.call(obj); // 20
    fn.apply(window); // 10
    fn.apply(null); // 10
    fn.apply(obj);  // 20
    复制代码

      如果没有指定this或者为null,则默认指向window。

      使用apply的好处是可以直接将当前函数的arguments对象当做第二个参数传入,在对象继承等地方发挥着巨大的作用。

    // 计算数组最大值
    var a = [1, 2, 3, 6, 5, 4, 10, 9, 8, 7];
    var maxn = Math.max.apply(null, a);
    console.log(maxn);  // 10

    callee

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

    复制代码
    function fn(a, b, c, d) {
      console.log(arguments.length);  // 3
      console.log(arguments.callee.length); // 4
      console.log(fn.length); // 4
      console.log(arguments.callee === fn); // true
      console.log(a.callee);  // undefined
    }
    
    fn(1, 2, 3);
    复制代码

      也许是因为楼主见识少,callee的用法楼主只看到过arguments.callee的形式(或许还有更多,所以此文标题为初步了解,望路过的大大指导...),或许你会产生疑问,以上代码的arguments.callee不是完全可以用fn代替么?其实如果是个匿名函数,arguments.callee就有用武之地了:

    复制代码
    // 打印100以内的斐波那契数列
    (function(a, b) {
      var c = a + b;
      if(c > 100) return;
      console.log(c);
      arguments.callee(b, c);
    })(-1, 1);
    复制代码

    caller

      caller返回一个对函数的引用(返回值是个函数),该函数调用了当前函数(调用caller的函数 即下面代码中的arguments.callee)。对于函数来说,caller属性只有在函数执行时才有定义。如果函数是由 Javascript 程序的顶层调用的,那么caller返回的就是null。

    复制代码
    function test() {
      console.log(arguments.callee);
      console.log(arguments.callee.caller);
    }
    
    function test2() {
      test();
    }
    
    test();
    test2();
    
    // test() {..}
    // null
    // test() {..}
    // test2() {..}
    复制代码

      代码如上,解释似乎也可以顺理成章。首先执行test函数,arguments.callee返回函数本身(test),而该函数是顶层调用,返回null;第二次调用test2函数,arguments.callee值不变还是test,而test函数此次是在test2中调用的,所以返回test2函数。

      函数.caller,返回函数。

      如有错误或者改进之处欢迎留下宝贵意见~

  • 相关阅读:
    L1->排列组合和古典概型
    HIT2019秋计算机网络->传输层一些总结
    HIT2019秋计算机网络->TCP连接3次握手
    HIT2019春软件构造->大文件读写方法NIO
    HIT2019春软件构造->重写hashCode()方法
    HIT2019春软件构造->正则表达式语法
    HIT2019春软件构造->Git&Github学习笔记
    YII2视图间共享数据
    Yii2 选择布局
    Yii2视图 使用$this->context获取当前的Module、Controller(控制器)、Action等
  • 原文地址:https://www.cnblogs.com/zhangyuhang3/p/6873169.html
Copyright © 2011-2022 走看看