深入理解javascript函数参数与闭包

针对“深入理解JavaScript函数参数与闭包”的攻略,我会先介绍一下函数参数的概念以及它们的类型和用法,然后再进行闭包的详细讲解和示例说明。

一、函数参数

函数参数是在函数定义时声明的,用于接受传递给函数的值。JavaScript中函数参数有两种类型:形式参数和实际参数。

1.1 形参和实参

函数定义时,使用括号包裹形参,形参不需要具体的值,其只是一个占位符,用于标识参数的类型或名称。函数在被调用时,使用实参对形参进行赋值,实参是实际传入的值。

示例:

function add(num1, num2) { // num1, num2为形参
  return num1 + num2;
}
add(1, 2); // 1, 2为实参

1.2 默认参数

在ES6中,你可以给函数的形参设置默认值。这样,当实参没有传入相应参数时,将会使用默认值。

示例:

function sayHi(name = 'default') { // name 设置默认值为'default'
  console.log(`Hello ${name}!`);
}
sayHi(); // 'Hello default!'
sayHi('Tom'); // 'Hello Tom!'

1.3 剩余参数

剩余参数可以用来代替函数当中需要的多个参数。

示例:

function sum(...args) { // 使用剩余参数...
  return args.reduce((a, b) => a + b);
}
sum(1, 2, 3, 4, 5); // 15, args = [1, 2, 3, 4, 5]

二、闭包

闭包是一个函数和其所在的环境组合而成的一个对象,该对象可以访问其定义时的环境中的变量和函数。这些变量和函数的引用被保存在闭包内,不会被垃圾回收机制回收掉。

2.1 闭包的形成

当一个嵌套的函数(内部函数)访问外部函数的变量时,闭包就形成了。下面是一个简单的示例:

function outer() {
  let a = 'hello';
  function inner() {
    console.log(a);
  }
  return inner;
}
let innerFn = outer();
innerFn(); // 'hello'

在上面的示例中,inner函数访问了外部的变量a,从而形成了闭包。

2.2 闭包的应用

闭包常用于保护变量以及封装函数。

保护变量:

function counter() {
  let count = 0; // count受到闭包保护
  return function() {
    return ++count;
  }
}
let inc = counter();
console.log(inc()); // 1
console.log(inc()); // 2
console.log(inc()); // 3

封装函数:

function createPerson(name) {
  let age = 0;
  return {
    getName() {
      return name;
    },
    getAge() {
      return age;
    },
    setAge(newAge) {
      age = newAge;
    }
  }
}
let person = createPerson('Tom');
console.log(person.getName()); // Tom
console.log(person.getAge()); // 0
person.setAge(20);
console.log(person.getAge()); // 20

在上面的示例中,createPerson函数返回一个对象,该对象包含几个方法,并使用闭包保护了age变量,同时也保护了name变量。

以上是“深入理解JavaScript函数参数与闭包”的一些内容,希望能够帮助到你。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解javascript函数参数与闭包 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • javascript中将Object转换为String函数代码 (json str)

    将JavaScript中的Object对象转换成字符串的过程叫做序列化,通常使用JSON.stringify()函数来进行转换。以下是完整的攻略: 1. 使用JSON.stringify()函数进行转换 JSON.stringify()函数将给定的JavaScript对象或值转换成一个JSON字符串。该函数接受三个参数: 要转换的值。 可选参数,替换方式,可…

    JavaScript 2023年5月27日
    00
  • D3.js实现简洁实用的动态仪表盘的示例

    下面我将为您详细讲解“D3.js实现简洁实用的动态仪表盘的示例”的完整攻略。 1. 确定设计 在使用D3.js创建仪表盘之前,需要对仪表盘进行设计。 仪表盘可以包含以下元素:- 指示器(需要动态变化)- 舞台或背景- 刻度盘或表盘 2. 创建SVG容器 D3.js将仪表盘绘制到SVG容器中。首先,需要创建一个SVG元素,并设定其宽度和高度。 <div …

    JavaScript 2023年6月11日
    00
  • JavaScript数组方法实例详解

    关于“JavaScript数组方法实例详解”的攻略,我来为你详细讲解一下。 目录 JavaScript数组方法介绍 JavaScript数组方法实例详解 1. push() 方法 2. pop() 方法 结语 JavaScript数组方法介绍 JavaScript 中的数组是一种特殊的对象,它可以存储多个值,并且可以方便地进行增删改查等操作。在 JavaSc…

    JavaScript 2023年5月27日
    00
  • javascript demo 基本技巧

    首先,我们要了解何谓 JavaScript Demo,这其实是一种基于 JavaScript 语言开发的小型互动演示,它可以运行在浏览器端或 Node.js 等环境中,用于展示和演示某项特定功能或效果。 下面,我将分享一些 JavaScript Demo 开发的基本技巧,帮助大家更好地开发出功能强大且易维护的演示程序。 好的 JavaScript Demo …

    JavaScript 2023年5月27日
    00
  • vue-router路由模式详解(小结)

    让我为您详细讲解一下“vue-router路由模式详解(小结)”的完整攻略。 1. 路由的基本概念 1.1 什么是路由 首先,我们需要了解什么是路由。在一般的网页开发中,路由用来指定不同 URL 地址对应的响应内容,也就是根据 URL 的变化,渲染不同的视图。在 Vue 中,我们使用 vue-router 来进行路由的处理。 1.2 路由的安装和配置 vue…

    JavaScript 2023年6月11日
    00
  • 11个Javascript小技巧帮你提升代码质量(小结)

    下面是针对“11个Javascript小技巧帮你提升代码质量(小结)”这篇文章的完整攻略: 1. 使用const和let代替var 在 ES6 中引入了两个新关键字:const 和 let,它们可以分别用于声明常量和变量。使用 const 和 let 替代了旧的 var 关键字可以避免变量提升的问题。同时,let 也仅在块作用域内有效,而 var 在全局作用…

    JavaScript 2023年6月10日
    00
  • js检测浏览器夜晚/黑暗(dark)模式方法

    如何检测浏览器的夜晚/黑暗模式 当用户在电脑或手机等浏览器中将主题从白天模式切换到黑夜模式时,浏览器会触发媒体查询 prefers-color-scheme。我们可以利用 JavaScript 检测媒体查询条件,推断出当前是白天还是黑夜模式。 检测浏览器是否支持 prefers-color-scheme 媒体查询 在使用 prefers-color-sche…

    JavaScript 2023年6月10日
    00
  • JavaScript编程的单例设计模讲解

    JavaScript编程的单例设计模式讲解 在JavaScript开发中,单例模式是一个常见的设计模式。它可以保证一个类只有一个实例,并提供一个全局可访问该实例的访问点。 使用场景 当一个对象需要在整个应用程序中只有一个实例时,就可以考虑使用单例模式。如: 全局状态管理 路由管理 模态框管理 数据库连接池 WebSocket连接管理等。 基本实现方式 let…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部