JavaScript Function对象核心机制详解

作者:代码拾荒时间:2026-10-29 16:58:45浏览:531

本文系统梳理JavaScript中Function对象的关键特性,深入解析函数调用的三种方式:直接调用、call与apply方法的区别,以及bind方法如何固定上下文。同时探讨函数返回函数、arguments对象中caller与callee的使用场景,并分析函数length属性的含义,帮助开发者掌握函数式编程的核心技巧。

经过两天的停更,系列文章《每天一篇javascript学习小结》今日继续更新,感谢各位读者的耐心等待与持续关注。

Function对象基础调用与高阶函数

首先探讨Function对象的函数调用机制,其行为类似于call方法,允许我们将一个函数作为参数传递给另一个函数进行执行。


  function callSomeFunction(someFunction, someArgument){
      return someFunction(someArgument);
    }

    function add10(num){
      return num + 10;
    }
    
    var result1 = callSomeFunction(add10, 10);//调用add10 把参数10传给add10
    alert(result1);  //20
    
    function getGreeting(name){
      return "Hello, " + name;
    }
    
    var result2 = callSomeFunction(getGreeting, "Nicholas");
    alert(result2);  //Hello, Nicholas

其次分析函数返回函数的模式,即高阶函数的应用,通过外层函数返回内层匿名函数,实现动态生成排序逻辑等功能。


function createComparisonFunction(propertyName) {
    
      return function(object1, object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
    
        if (value1 < value2){
          return -1;
        } else if (value1 > value2){
          return 1;
        } else {
          return 0;
        }
      };
    }

    var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];
    
    data.sort(createComparisonFunction("name"));//sort函数接收一个函数作为排序的参考,函数createComparisonFuntion返回了一个匿名的排序函数
    alert(data[0].name); //Nicholas
    
    data.sort(createComparisonFunction("age"));
    alert(data[0].name); //Zachary    

apply、call与bind方法详解

接着详解apply()方法的使用,该方法允许指定函数执行时的this指向,并将参数以数组或类数组形式传递,常用于函数借用或参数扩展。


 function sum(num1, num2){
      return num1 + num2;
    }
    
    function callSum1(num1, num2){
      return sum.apply(this, arguments);//sum函数请求把callSum1的指针传给自己,并作计算,此时的this指向callSum1
    }
    
    function callSum2(num1, num2){
      return sum.apply(this, [num1, num2]);
    }
    
    alert(callSum1(10,10));  //20
    alert(callSum2(10,10));  //20

arguments对象与函数引用追踪

随后介绍函数Arguments Caller的使用,通过caller属性可以获取调用当前函数的外部函数引用,有助于追踪函数调用链。


function outer(){
      inner();
    }
    
    function inner(){
      alert(inner.caller);
    }
    
    outer();
caller

//返回一个对函数的引用,该函数调用了当前函数。

进一步探讨arguments.callee.caller,callee指向当前函数体本身,结合caller可追溯更深层的调用关系,常用于递归函数的解耦与修复。


function outer(){
      inner();
    }
    function inner(){
      alert(arguments.callee.caller);
      //argments.callee就是函数体本身,arguments.callee.caller就是函数体的调用函数体
    }
    outer();


function factorial(num){
      if (num <= 1) {
        return 1;
      } else {
        return num * arguments.callee(num-1)//callee当前函数的引用即factorial函数本身的函数体
      }
    }

    var trueFactorial = factorial;
    
    factorial = function(){
      return 0;
    };
    
    alert(trueFactorial(5));  //120
    alert(factorial(5));    //0

然后解析Function bind()方法,该方法创建一个新函数,其this值被永久绑定到指定对象,后续参数也可预先设定,适用于事件处理或回调函数上下文绑定。


 window.color = "red";
    var o = { color: "blue" };
              
    function sayColor(){
      alert(this.color);
    }
    var objectSayColor = sayColor.bind(o);
    objectSayColor();  //blue
    /*
      bind主要是为了改变函数内部的this指向,这个是在ECMA5以后加入的,所以IE8一下的浏览器不支持
      bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,
      传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
    */

接着说明Function call()方法,与apply类似,但参数需逐个列出,用于在特定this上下文中调用函数,常用于继承或方法复用。


window.color = "red";
    var o = { color: "blue" };
    
    function sayColor(){
      alert(this.color);
    }
    
    sayColor();      //red
    
    sayColor.call(this);  //red 此时this指向window
    sayColor.call(window); //red 同上
    sayColor.call(o);   //blue 此时sayColor的指针指向o

 function sum(num1, num2){
      return num1 + num2;
    }
    
    function callSum(num1, num2){
      return sum.call(this, num1, num2);
    }
    
    alert(callSum(10,10));  //20

函数length属性解析

最后介绍函数长度length属性,它表示函数定义时形参的数量,不包括默认参数或剩余参数,可用于判断函数期望的参数个数。


function sayName(name){
      alert(name);
    }   
    
    function sum(num1, num2){
      return num1 + num2;
    }
    
    function sayHi(){
      alert("hi");
    }
    
    alert(sayName.length); //1
    alert(sum.length);   //2
    alert(sayHi.length);  //0
    //实际返回的是函数的参数的长度

以上就是本期关于JavaScript Function对象的学习小结,系列文章将持续更新,欢迎继续关注与学习。

作者最新文章