深入理解JavaScript函数定义、参数处理及立即执行函数表达式(IIFE)

JavaScript函数基础与定义方式

一、认识函数

在JavaScript中，函数是核心的一等公民，可以通过多种方式定义。


// 函数声明语法定义
function fun1(name, age) {
  console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18


// 函数表达式定义
var fun2 = function(name, age) {
  console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18

函数参数机制：默认值与不定参数

JavaScript函数支持默认参数功能。


/* 默认参数 */
function fun1(name, age = 17) {
  console.log(name + ',' + age);
}

fun1('Amy', 18); //Amy,18
fun1('Amy', ''); // Amy,
fun1('Amy'); // Amy,17
fun1("Amy", null); // Amy,null

当使用默认参数时，存在暂时性死区（Temporal Dead Zone）的概念。这意味着在函数参数的默认值表达式中，如果尝试引用尚未初始化的其他参数，将会导致错误。


function fun2(x, y = x) {
  console.log(x, y);
}
fun2(1); // 1 1

function fun3(x = y) {
  console.log(x);
}
fun3(); // ReferenceError: y is not defined

JavaScript函数还允许使用不定参数（Rest Parameters）来接收不确定数量的参数。


// 不定参数用来表示不确定参数个数
function fun4(...values) {
  console.log(values.length);
}
fun4(1, 2); //2
fun4(1, 2, 3, 4); //4

Function构造函数与函数引用特性

Function构造函数提供了一种动态创建函数的途径。

通过Function构造函数可以创建函数，向该构造函数传递任意数量的参数。需要注意的是，最后一个参数将被视为函数体代码，而前面的参数则作为函数的形参列表。尽管这种方法可行，但通常不推荐使用，因为这种语法会导致代码被解析两次：首先是一次常规的ECMAScript代码解析，另一次是对传入构造函数字符串的解析，这会显著影响执行性能。


var functionName = new Function("value",...,"函数体");
var f2=new Function("n1","n2","return n1+n2;");
console.log(f2(1,2)); // 3

需要注意的是，函数在JavaScript中属于引用类型，因此函数名实际上是指向函数对象的指针。当使用函数名赋值给另一个变量时，复制的只是这个指针引用。例如，在代码中将变量a设置为null，仅仅消除了a对函数的引用，而不会影响通过变量b调用该函数的能力。


var a = b = function(value1){
  return value1;
}
a = null;
b(1);

arguments对象与call方法应用

函数内部有一个名为arguments的内置对象，它类似于数组但并非真正的数组实例。该对象包含了调用函数时传递的所有实参。通过访问arguments对象，可以获取传递给函数的参数数量及具体内容。


function counter(){
  var sum=0;
  for(var i=0;i<arguments.length;i++){
      sum+=arguments[i];
  }
   return sum;
}
console.log(counter(199,991,1,2,3,4,5)); // 1205
console.log(counter()); // 0

arguments是一个隐式存在的对象，无需显式声明即可在函数内部使用。虽然内部函数可以访问外部函数的任意变量，但它无法直接访问外部函数的arguments对象和this指针。


function f1() {
  console.log(arguments.length);
  f2=function() {
    console.log(arguments.length);
  }
   return f2;
}

var f=f1(1,2,3); // 3
f(); // 0

call方法用于调用一个对象的方法，并允许指定该方法执行时的上下文对象（即this指向）。


/*构造函数*/
function Student(name,age){
    this.name=name;
    this.age=age;
}
      
show=function(add){
    console.log(add+"："+this.name+"，"+this.age);
}
      
//通过new关键字调用构造函数，创建一个对象tom
var rose=new Student("rose",18);
var jack=new Student("jack",20);
     
//调用show方法，指定上下文，指定调用对象，this指向rose，“大家好是参数”
show.call(rose,"大家好"); // 大家好：rose，18
show.call(jack,"Hello"); // Hello：jack，20

在call方法的参数列表中，第一个参数用于指定调用方法时的上下文对象，也就是确定this指向的目标。如果省略第一个参数，this将默认指向全局对象（在浏览器环境中为window对象）。其余参数则作为实参传递给被调用的方法。


var name="无名";
var age=18; // 全局变量
show.call(); // undefined：无名，18

立即执行函数表达式（IIFE）详解

立即执行函数表达式（IIFE，Immediately Invoked Function Expression）是一种特殊的函数定义与调用模式。

理解块级作用域与函数作用域的区别至关重要。


function calc(){
   for(var i=0;i<5;i++){
      console.log(i); // //0,1,2,3,4
   }
   console.log(i); // 5
}
calc();

由于传统函数没有块级作用域，在for循环中定义的变量i在循环结束后依然存在于外部作用域，因此后续访问i不会报错，且其值为循环结束时的值（如5）。

为了解决变量提升和作用域污染问题，可以通过模拟块级作用域的方式进行处理。


function calc() {
    //IIFE
    (function() {
        for(var i = 0; i < 5; i++) {
           console.log(i); //0,1,2,3,4
        }
    })();    
   console.log(i); //报错
}
calc();

实现IIFE通常利用函数表达式或匿名对象立即执行的方式。


//调用匿名函数
(function() {
   console.log("这是一个函数表达式");
 })();

 //调用匿名对象
 ({
  name: "foo",
  show: function() {
  　　console.log(this.name);
 　}
 }).show();
console.log({a: 1}.a);
console.log({a: function() {}}.a());

IIFE有多种写法，常见的包括将函数包裹在括号中后执行，或利用其他操作符消除歧义。


//最常用的两种写法
(function(){ /* code */ }()); // 推荐写法
(function(){ /* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义
// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不怕代码晦涩难读，也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参

IIFE也可以接收参数，这些参数通常在调用时传入。


(function (n){
   console.log(n); // 100
})(100);

建议在IIFE代码前添加分号，以防止因前一个语句未正确闭合而导致的语法错误。


 var k=100
(function (n){
   console.log(n);
})(k);
// 出错，解释器会认为100是函数


var k=100
;(function (n){
     console.log(n);
})(k);

IIFE的形式可以灵活变形，以适应不同的代码结构需求。


(function(n){
   console.log(n);
      
   //认为这里有30000代码
      
}(100));

若中间包含冗长代码，参数100需至文档末尾方可查看，变形后的结果如下：


(function(exp){
    exp(100);
}(function(n){
    console.log(n);
    //认为这里有30000代码
}));

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript函数核心机制与IIFE应用指南

JavaScript函数基础与定义方式

函数参数机制：默认值与不定参数

Function构造函数与函数引用特性

arguments对象与call方法应用

立即执行函数表达式（IIFE）详解

实用工具推荐