7.箭头函数的实践

发布： • 经验百科
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: #56a;
      }
    </style>
  </head>
  <body>
    <div id="d1"></div>

    <script>
      let d1 = document.getElementById("d1");
      d1.addEventListener("click", function () {
        //这里不能用箭头函数,需要this指向当前的d1元素,而写了箭头函数this会指向window
        // 保存this的值
        // _this = this;
        // setTimeout(function () {
        //   _this.style.background = "pink";   //之前的写法,因为this在这里指向window,所以要提前保存this的值
        // }, 3000);
        // setTimeout(() => {
        //   this.style.background = "pink"; //箭头函数写法,this指向外部定义的地方
        // }, 300);
      });
      let arr = [1, 2, 3, 4, 5, 6, 7];
      let result = arr.filter((item) => item % 2 === 0);
      console.log(result);

      // 箭头函数适合与this无关的回调:定时器,数组的方法回调
      // 箭头函数不适合与this有关的回调,事件回调,对象的方法
    </script>
  </body>
</html>

推荐这些技术文章：

苹果CMSV10开启微信 QQ防红防封功能使用教程

最近苹果cms更新频繁，功能不断更新叠加。今天来普及下苹果cmsv10 更新增加的新功能“微信QQ防红防封跳转提示”开启使用教程。
相信有很多小伙伴不会使用甚至不知道有这个功能。由于许多网站被恶意举报导致网站URL因不安全因素域名提示异常及变红，为了减少阻止此类现象发生预防为主。苹果cms官方开发团队，在版本更新中添加引入了这一防红防封跳转提示功能。使用操作也非常简单方便，如果你使用的苹果cms...

一份用心整理的flex布局，轻松上手！

前言
本篇文章是响应式布局之flex布局详细了解的兄弟篇，此文涵盖了之前的大部分，可以直接阅读本文。
写下此篇文章，为一个初入的前端所应有的学习与巩固。
一、flex布局是什么
flex 是 Flexible Box 的缩写，意思为弹性盒子。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（fle...

ES6中function函数和箭头函数的this指向

This函数的四种调用方式
1.纯粹的函数调用：
          这是函数的最通常用法，属于全局性调用，这是this就指全局（浏览器中为window,node中为global)
 
2.作为对象方法的调用：
         函数还可以作为某个对象的调用，这时this就指这个上级对象...

箭头函数和普通函数的区别 箭头函数的特点

（1）箭头函数比普通函数更加简洁    如果没有参数，就直接写一个空括号即可    如果只有一个参数，可以省去参数括号    如果有多个参数，用逗号分割    如果函数体的返回值只有一句，可以省略大括号    如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常用的就...

ES6之模板字符串和箭头函数以及this指向

ES6之模板字符串和箭头函数以及this指向
一.模板字符串
简单:  `  `    变量的就用 ${ 变量名 }
 
二.箭头函数
let  函数名 =  (参数) =>{ 函数体 }
 
一般函数改为箭头函数
　　声明形式:
　　　　function add( ){ }
 
　　函数表达式的形式...

rabbitMQ五种模式使用方式以及springboot整合rabbitMQ的使用

消息队列MQ
MQ全称为Message Queue，消息队列是应用程序和应用程序之间的通信方法。
为什么使用MQ
在项目中，可将一些无需即时返回且耗时的操作提取出来，进行异步处理，而这种异步处理的方式大大的节省了服务器的请求响应时间，从而提高了系统的吞吐量。
开发中消息队列通常有如下应用场景：
1、任务异步处理 将不需要同步处理的并且耗时长的操作由消息队列通知消息接收方进行异步处理。提高了应用...

Nginx搭建 Web服务

 

导航:
　　这里将Nginx的一些配置进行整合。根据导航比较容易找到对应的文档。资料来自于weixueyuan
　　1.Nginx核心配置详解
　　2.Nginx HTTP模块
　　3.Nginx搭建 Web服务
　　4.Nginx代理服务器
　　5.Nginx 缓存
　　6.Nginx负载均衡
　　7.Nginx日志管理
　　8.Nginx在微服务中的应用

1.N...

GIS应用|快速开发REST空间分析服务

随着计算机的快速发展，GIS已经在各大领域得到应用，和我们的生活息息相关， 但是基于GIS几大厂商搭建服务，都会有一定的门槛，尤其是需要server，成本高，难度大，这里介绍一种在线GIS云平台，帮你快速解决服务端的问题，你只需要考虑自己客户端的业务层即可
SuperMap Online，可在线上传数据，发布多种REST服务，为您节省购买和部署SuperMap iServer的大量财力和时间成本...

ES5普通函数与ES6箭头函数的说明【拓展：它们的this指向问题】

一、ES5中的函数定义
function add (a, b) {
}
// 函数表达式声明
let fn = function add(a, b) {
//...
}
 
二、ES6箭头函数（糟糕的语法设计，故意让人看不懂）
1. 参数的3种形式
let fn = () => {
//..
}
 
let fn =(a,b) => {
}
 
let ...

<meta>标签

meta标签：<meta>自结束标签定义: 主要用于设置网页中的一些元数据，元数据不是给用户看的
属性：charset： 指定网页的字符集    <meta charset="utf-8">
name： 指定的数据的名称content： 指定的数据的内容    <meta name="keywords" content="HT...

文章标题：7.箭头函数的实践
文章链接：https://www.dianjilingqu.com/1449.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。
THE END
< <上一篇
下一篇>>