第 10 章函数

✎printf("YT");

已于 2023-05-07 10:25:29 修改

阅读量72

点赞数

分类专栏： JavaScript 文章标签：前端开发语言 javascript es6 html

于 2023-04-18 21:34:45 首次发布

本文链接：https://blog.csdn.net/qq_50564231/article/details/129966468

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章详细介绍了JavaScript中的函数概念，包括箭头函数的使用、函数名的指向、参数处理（包括默认参数和参数扩展）、函数内部的this、arguments对象以及闭包。还提到了函数表达式、立即调用的函数表达式（IIFE）以及私有变量的实现策略。文章强调了函数在JavaScript中的重要性，并指出ECMAScript6的新特性如何增强了函数的使用。

摘要由CSDN通过智能技术生成

前言

虽然之前在课堂上已经学过 JavaScript 的相关用法了，但是现在要开始找工作的时候才发现好多知识点都忘记了（正所谓基础不牢，地动山摇😂），而且有些知识点学校教材上都没有，便有了要写这个 JavaScript 学习系列文章的想法。

由于博主只是做知识点总结与学习笔记分享，导致本系列文章对于 JavaScript 的使用方面介绍较少，还望读者能够自己多勤学苦练。废话不多说，让我们开始第 10 章函数 的学习吧。

一、箭头函数

ECMAScript 6 新增了使用胖箭头（=>）语法定义函数表达式的能力。任何可以使用函数表达式的地方，都可以使用箭头函数：

let arrowSum = (a, b) => { 
  return a + b; 
};

let functionExpressionSum = function(a, b) { 
  return a + b; 
}; 

console.log(arrowSum(5, 8)); // 13 
console.log(functionExpressionSum(5, 8)); // 13

如果只有一个参数，那也可以不用括号。只有没有参数，或者多个参数的情况下，才需要使用括号：

// 以下两种写法都有效
let double = (x) => { return 2 * x; }; 
let triple = x => { return 3 * x; }; 

// 没有参数需要括号
let getRandom = () => { return Math.random(); }; 

// 多个参数需要括号
let sum = (a, b) => { return a + b; }; 

// 无效的写法：
let multiply = a, b => { return a * b; };

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments、super 和 new.target，也不能用作构造函数。此外，箭头函数也没有 prototype 属性。

二、函数名

因为函数名就是指向函数的指针，所以它们跟其他包含对象指针的变量具有相同的行为。这意味着一个函数可以有多个名称，如下所示：

function sum(num1, num2) { 
 return num1 + num2; 
} 

console.log(sum(10, 10)); // 20 

let anotherSum = sum; 
console.log(anotherSum(10, 10)); // 20 

sum = null; 
console.log(anotherSum(10, 10)); // 20

ECMAScript 6 的所有函数对象都会暴露一个只读的 name 属性，其中包含关于函数的信息。多数情况下，这个属性中保存的就是一个函数标识符，或者说是一个字符串化的变量名。即使函数没有名称，也会如实显示成空字符串。如果它是使用 Function 构造函数创建的，则会标识成"anonymous"。

如果函数是一个获取函数、设置函数，或者使用 bind()实例化，那么标识符前面会加上一个前缀（get、set，bound）。

三、理解参数

ECMAScript 函数既不关心传入的参数个数，也不关心这些参数的数据类型。事实上，在使用 function 关键字定义（非箭头）函数时，可以在函数内部访问 arguments 对象，从中取得传进来的每个参数值。

arguments 对象是一个类数组对象（但不是 Array 的实例），因此可以使用中括号语法访问其中的元素（第一个参数是 arguments[0]，第二个参数是 arguments[1]）。而要确定传进来多少个参数，可以访问 arguments.length 属性。

如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问，而只能通过定义的命名参数访问。

四、没有重载

ECMAScript 函数不能像传统编程那样重载。在其他语言比如 Java 中，一个函数可以有两个定义，只要签名（接收参数的类型和数量）不同就行。如前所述，ECMAScript 函数没有签名，因为参数是由包含零个或多个值的数组表示的。没有函数签名，自然也就没有重载。

如果在 ECMAScript 中定义了两个同名函数，则后定义的会覆盖先定义的。

五、默认参数值

在 ECMAScript5.1 及以前，实现默认参数的一种常用方式就是检测某个参数是否等于 undefined，如果是则意味着没有传这个参数，那就给它赋一个值。

ES6 之后就支持显示定义默认参数了，只要在函数定义中的参数后面用=就可以为参数赋一个默认值。

也存在默认参数作用域与暂时性死区

六、参数扩展与收集

1.扩展参数

想把定义在这个函数这面的数组拆分，那么就得求助于 apply()方法。

console.log(getSum.apply(null, values)); // 10

但在 ECMAScript 6 中，可以通过扩展操作符极为简洁地实现这种操作。对可迭代对象应用扩展操作符，并将其作为一个参数传入，可以将可迭代对象拆分，并将迭代返回的每个值单独传入。

比如，使用扩展操作符可以将前面例子中的数组像这样直接传给函数：

console.log(getSum(...values)); // 10

2.收集参数

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。这有点类似 arguments 对象的构造机制，只不过收集参数的结果会得到一个 Array 实例。

收集参数的前面如果还有命名参数，则只会收集其余的参数；如果没有则会得到空数组。因为收集参数的结果可变，所以只能把它作为最后一个参数。

箭头函数虽然不支持 arguments 对象，但支持收集参数的定义方式，因此也可以实现与使用 arguments 一样的逻辑。

另外，使用收集参数并不影响 arguments 对象，它仍然反映调用时传给函数的参数。

七、函数声明与函数表达式

JavaScript 引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。

在执行代码时，JavaScript 引擎会先执行一遍扫描，把发现的函数声明提升到源代码树的顶部。因此即使函数定义出现在调用它们的代码之后，引擎也会把函数声明提升到顶部。如果把前面代码中的函数声明改为等价的函数表达式，那么执行的时候就会出错。

八、函数作为值

因为函数名在 ECMAScript 中就是变量，所以函数可以用在任何可以使用变量的地方。这意味着不仅可以把函数作为参数传给另一个函数，而且还可以在一个函数中返回另一个函数。

九、函数内部

在 ECMAScript 5 中，函数内部存在两个特殊的对象：arguments 和 this。ECMAScript 6 又新增了 new.target 属性。

1.arguments

arguments 对象前面讨论过多次了，它是一个类数组对象，包含调用函数时传入的所有参数。这个对象只有以 function 关键字定义函数（相对于使用箭头语法创建函数）时才会有。虽然主要用于包含函数参数，但 arguments 对象其实还有一个 callee 属性，是一个指向 arguments 对象所在函数的指针。

2.this

另一个特殊的对象是 this，它在标准函数和箭头函数中有不同的行为。

在标准函数中，this 引用的是把函数当成方法调用的上下文对象，这时候通常称其为 this 值（在网页的全局上下文中调用函数时，this 指向 windows）。

在箭头函数中，this引用的是定义箭头函数的上下文。下面的例子演示了这一点。在对sayColor()的两次调用中，this 引用的都是 window 对象，因为这个箭头函数是在 window 上下文中定义的

3.caller

ECMAScript 5 也会给函数对象上添加一个属性：caller。虽然 ECMAScript 3 中并没有定义，但所有浏览器除了早期版本的 Opera 都支持这个属性。这个属性引用的是调用当前函数的函数，或者如果是在全局作用域中调用的则为 null。

注意：严格模式下不能使用

4.new.target

ECMAScript 中的函数始终可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性。如果函数是正常调用的，则 new.target 的值是 undefined；如果是使用 new 关键字调用的，则 new.target 将引用被调用的构造函数。

十、函数属性与方法

每个函数都有两个属性：length 和 prototype。其中，length 属性保存函数定义的命名参数的个数。prototype 是保存引用类型所有实例方法的地方，这意味着 toString()、valueOf()等方法实际上都保存在 prototype 上，进而由所有实例共享。这个属性在自定义类型时特别重要。（相关内容已经在第 8 章详细介绍过了。）在 ECMAScript 5中，prototype 属性是不可枚举的，因此使用 for-in 循环不会返回这个属性。

函数还有两个方法：apply()和 call()。这两个方法都会以指定的 this 值来调用函数，即会设置调用函数时函数体内 this 对象的值。apply()方法接收两个参数：函数内 this 的值和一个参数数组。第二个参数可以是 Array 的实例，但也可以是 arguments 对象。

通过 call()向函数传参时，必须将参数一个一个地列出来。

ECMAScript 5 出于同样的目的定义了一个新方法：bind()。bind()方法会创建一个新的函数实例，其 this 值会被绑定到传给 bind()的对象。

十一、函数表达式

函数表达式看起来就像一个普通的变量定义和赋值，即创建一个函数再把它赋值给一个变量 functionName。这样创建的函数叫作匿名函数（anonymous funtion），因为 function 关键字后面没有标识符。（匿名函数有也时候也被称为兰姆达函数）。未赋值给其他变量的匿名函数的 name 属性是空字符串。

函数表达式跟 JavaScript 中的其他表达式一样，需要先赋值再使用。

十二、递归

递归函数通常的形式是一个函数通过名称调用自己，如下面的例子所示：

function factorial(num) { 
  if (num <= 1) { 
    return 1; 
  } else { 
    return num * factorial(num - 1); 
  } 
}

十三、尾调用优化

ECMAScript 6 规范新增了一项内存管理优化机制，让 JavaScript 引擎在满足条件时可以重用栈帧。具体来说，这项优化非常适合“尾调用”，即外部函数的返回值是一个内部函数的返回值。比如：

function outerFunction() { 
  return innerFunction(); // 尾调用
}

1.尾调用优化的条件

尾调用优化的条件就是确定外部栈帧真的没有必要存在了。涉及的条件如下：

代码在严格模式下执行；
外部函数的返回值是对尾调用函数的调用；
尾调用函数返回后不需要执行额外的逻辑；
尾调用函数不是引用外部函数作用域中自由变量的闭包。

2.尾调用优化的代码

比如把递归改写成迭代循环形式。不过，也可以保持递归实现，但将其重构为满足优化条件的形式。为此可以使用两个嵌套的函数，外部函数作为基础框架，内部函数执行递归：

"use strict"; 

// 基础框架 
function fib(n) { 
  return fibImpl(0, 1, n); 
} 

// 执行递归
function fibImpl(a, b, n) { 
  if (n === 0) { 
    return a; 
  } 
  return fibImpl(b, a + b, n - 1); 
}

十四、闭包

匿名函数经常被人误认为是闭包（closure）。闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

1.this 对象

如果内部函数没有使用箭头函数定义，则 this 对象会在运行时绑定到执行函数的上下文。如果在全局函数中调用，则 this 在非严格模式下等于 window，在严格模式下等于 undefined。如果作为某个对象的方法调用，则 this 等于这个对象。匿名函数在这种情况下不会绑定到某个对象，这就意味着 this 会指向 window，除非在严格模式下 this 是 undefined。

2.内存泄漏

function assignHandler() { 
  let element = document.getElementById('someElement'); 
  
  // let id = element.id; 
  
  element.onclick = () => console.log(element.id); // element.id 改为 id
  
  // element = null;
}

解决上述代码内存泄漏的步骤：

将闭包改为引用一个保存着 element.id 的变量 id，从而消除了循环引用
再把 element 设置为 null

十五、立即调用的函数表达式

立即调用的匿名函数又被称作立即调用的函数表达式（IIFE，Immediately Invoked Function Expression）。它类似于函数声明，但由于被包含在括号中，所以会被解释为函数表达式。紧跟在第一组括号后面的第二组括号会立即调用前面的函数表达式。

在 ECMAScript 6 以后，IIFE 就没有那么必要了，因为块级作用域中的变量无须 IIFE 就可以实现同样的隔离。

十六、私有变量

特权方法（privileged method）是能够访问函数私有变量（及私有函数）的公有方法。在对象上有两种方式创建特权方法。第一种是在构造函数中实现，比如：

function MyObject() { 
  // 私有变量和私有函数 
  let privateVariable = 10; 
  
  function privateFunction() { 
    return false; 
  } 
  
  // 特权方法
  this.publicMethod = function() { 
    privateVariable++; 
    return privateFunction(); 
  }; 
}