匿名/箭头函数,立即执行函数IIFE;函数声明式和函数表达式

2024-01-20 09:44

本文主要是介绍匿名/箭头函数,立即执行函数IIFE;函数声明式和函数表达式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

匿名/箭头函数:简洁

继承上一层作用域链的this

不绑定arguments,用rest参数

 rest 参数:...真正的数组

因为没有function声明,所以没有原型prototype,所以不能作为构造函数

当函数体只有一句时,可省 return , {}

IIFE:()()(立即调用函数表达式)/自执行匿名函数

函数定义方式

A.函数声明:function变量提升

B.函数表达式:const暂时性死区

应用:React

this:组件实例

bind:constructor、标签

()=>:calss、标签


匿名/箭头函数:简洁

继承上一层作用域链的this

不绑定arguments,用rest参数

 rest 参数:...真正的数组

function sum(...numbers) {let total = 0;for (let number of numbers) {total += number;}return total;
}console.log(sum(1, 2, 3)); // 输出 6

因为没有function声明,所以没有原型prototype,所以不能作为构造函数

当函数体只有一句时,可省 return , {}

const fun = () => "S";
console.log(fun());// "S"
console.log((() => "S")());// "S"
console.log(() => "S");// () => "S"

IIFE:()()(立即调用函数表达式)/自执行匿名函数

  1. 第一部分是一个具有词法作用域的匿名函数,并且用圆括号运算符 () 运算符闭合起来。这样不但阻止了外界访问 IIFE 中的变量,而且不会污染全局作用域
  2. 第二部分创建了一个立即执行函数表达式 (),通过它,JavaScript 引擎将立即执行该函数。
(function () {// …
})();(() => {// …
})();(async () => {// …
})();

函数定义方式

A.函数声明:function变量提升

类内function不用function声明,但也可变量提升

   function add(x, y) {return x + y;}

B.函数表达式:const暂时性死区

const、let、calss不会提升

   const add = function(x, y) {return x + y;};

应用:React

this:组件实例

无论时类组件还是函数组件,都是用箭头函数表达式避免this问题

bind:constructor、标签
()=>:calss、标签

import React, { Component } from 'react'; // 请确保导入 React 和 Componentclass APP extends Component {constructor(props) {super(props);// 将 handleClick 方法绑定到组件实例的上下文this.handleClick5 = this.handleClick5.bind(this);}handleClick1(ev) {console.log(this);//undefinedconsole.log(ev);//合成的SyntheticBaseEvent console.log(ev.target);//button}//箭头函数//方法A:类中箭头handleClick2 = () => {console.log(this);//APP类组件实例}//方法B:onclick中箭头handleClick3() {console.log(this);//APP类组件实例}// bind绑定组件实例this// 方法A:onclickhandleClick4() {console.log(this);   //APP类组件实例}// 方法B:constructorhandleClick5() {console.log(this); //APP类组件实例  }render() {return (<div><button onClick={this.handleClick1}>点击1</button>{/* 箭头函数 */}<button onClick={this.handleClick2}>点击2</button><button onClick={() => { this.handleClick3() }}>点击3</button>{/* bind */}<button onClick={this.handleClick4.bind(this)}>点击4</button><button onClick={this.handleClick5}>点击5</button></div>);}
}export default APP;

这篇关于匿名/箭头函数,立即执行函数IIFE;函数声明式和函数表达式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/625590

相关文章

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

Spring定时任务只执行一次的原因分析与解决方案

《Spring定时任务只执行一次的原因分析与解决方案》在使用Spring的@Scheduled定时任务时,你是否遇到过任务只执行一次,后续不再触发的情况?这种情况可能由多种原因导致,如未启用调度、线程... 目录1. 问题背景2. Spring定时任务的基本用法3. 为什么定时任务只执行一次?3.1 未启用

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

SpringBoot @Scheduled Cron表达式使用方式

《SpringBoot@ScheduledCron表达式使用方式》:本文主要介绍SpringBoot@ScheduledCron表达式使用方式,具有很好的参考价值,希望对大家有所帮助,如有... 目录Cron 表达式详解1. 表达式格式‌2. 特殊字符解析3. 常用示例‌4. 重点规则5. 动态与复杂场景‌

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

Spring Boot 集成 Quartz 使用Cron 表达式实现定时任务

《SpringBoot集成Quartz使用Cron表达式实现定时任务》本文介绍了如何在SpringBoot项目中集成Quartz并使用Cron表达式进行任务调度,通过添加Quartz依赖、创... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

Linux中的进程间通信之匿名管道解读

《Linux中的进程间通信之匿名管道解读》:本文主要介绍Linux中的进程间通信之匿名管道解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基本概念二、管道1、温故知新2、实现方式3、匿名管道(一)管道中的四种情况(二)管道的特性总结一、基本概念我们知道多

Spring Boot中定时任务Cron表达式的终极指南最佳实践记录

《SpringBoot中定时任务Cron表达式的终极指南最佳实践记录》本文详细介绍了SpringBoot中定时任务的实现方法,特别是Cron表达式的使用技巧和高级用法,从基础语法到复杂场景,从快速启... 目录一、Cron表达式基础1.1 Cron表达式结构1.2 核心语法规则二、Spring Boot中定