ES6 Arrow Function & this bug


    let accHeadings = document.querySelectorAll(`.accordionItemHeading`); // NodeList(3)
    // let accHeadings = [...document.querySelectorAll(`.accordionItemHeading`)];

    for (let i = 0; i < accHeadings.length; i++) {
        accHeadings[i].addEventListener("click", function(e) {
            console.log(`this`, this);
            console.log(`e.target`, e.target);
        });
    }
    for (let i = 0; i < accHeadings.length; i++) {
        // ES6 Arrow Function & this bug
        accHeadings[i].addEventListener("click", () => {
            console.log(`this`, this);
        }, false);
    }


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>ES6 Arrow Function & this bug</title>
</head>

<body>
    <section>
        <h1>ES6 Arrow Function & this bug</h1>
    </section>
    <section>
        <h2 class="accordionItemHeading">About accordions</h2>
        <h2 class="accordionItemHeading">Accordion items</h2>
        <h2 class="accordionItemHeading">How to use a JavaScript accordion</h2>
    </section>
    <section>
        <button class="btn">a</button>
        <button class="btn">b</button>
        <button class="btn">c</button>
    </section>
    <!-- js -->
    <script>
        let btns = [...document.querySelectorAll(`.btn`)];
        btns.forEach((acc) => {
            acc.addEventListener("click", function(e) {
                console.log(`this`, this);
                console.log(`e.target`, e.target);
            });
        });
        let accHeadings = [...document.querySelectorAll(`.accordionItemHeading`)];
        // for (let i = 0; i < accHeadings.length; i++) {
        //     accHeadings[i].addEventListener("click", function(e) {
        //         console.log(`this`, this);
        //         console.log(`e.target`, e.target);
        //     });
        // }
        for (let i = 0; i < accHeadings.length; i++) {
            // ES6 Arrow Function & this bug
            accHeadings[i].addEventListener("click", (e) => {
                console.log(`this`, this);
                console.log(`e.target`, e.target);
            });
        }
    </script>
</body>

</html>

ES6 Arrow Function & this bug的更多相关文章

  1. vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug

    vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...

  2. ES6 Arrow Function All In One

    ES6 Arrow Function All In One this const log = console.log; const arrow_func = (args) => log(`arg ...

  3. ES6 arrow function vs ES5 function

    ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...

  4. ES6 Arrow Function return Object

    ES6 Arrow Function return Object https://github.com/lydiahallie/javascript-questions/issues/220#issu ...

  5. ES6 arrow function

    语法: () => { … } // 零个参数用 () 表示: x => { … } // 一个参数可以省略 (): (x, y) => { … } // 多参数不能省略 (): 当 ...

  6. [ES6] 06. Arrow Function =>

    ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...

  7. [ES6系列-02]Arrow Function：Whats this？(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  8. vue watch & arrow function bug

    vue watch & arrow function bug watch: { GeoJSON: function(newValue, oldValue) { log(`\n\n\nGeoJS ...

  9. ES6 new syntax of Arrow Function

    Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...

随机推荐

  1. Android镜像文件ramdisk.img，system.img，userdata.img介绍

    Android 源码编译后,在out目录下生成的三个镜像文件:ramdisk.img,system.img,userdata.img以及它们对应的目录树root,system,data. ramdis ...

  2. shell中使用ssh

    ssh服务是不能用非交互的方式传递密码,想不输入密码,直接ssh连接到服务器有两种方法,sshpass和expect sshpass # wget http://downloads.sourcefor ...

  3. 利用UnblockNeteaseMusic实现网易云破版权,并实现shell可快速访问

    注:本篇包含mac及windows下安装方式详细 mac安装 前提:安装有node环境,可参考 mac下安装nodejs 安装 下载git代码到本地 git clone https://github. ...

  4. sqlserver 视图用 case when

    视图用 case when 需要 用如下格式,[需要的列名]= case when...,而表里面的case 不用这样 [isNormal]=CASE WHENdbo.c_bdm_head.I_E_F ...

  5. Git服务器和Git权限管理应用GITLAB安装方法

    首先声明,本文使用的服务器是Centos 6.5,在其他版本的LINUX上运行不保证也是一样的效果. 顺便说下 来波点赞 来波收藏和推荐  有什么问题 我会一直关注评论的 想放一张最终图吧 其中主要涉 ...

  6. 爬虫_python3_requests

    Requests 网络资源(URLs)撷取套件 改善Urllib2的缺点,让使用者以最简单的方式获取网络资源 可以使用REST操作(POST,PUT,GET,DELETE)存取网络资源 import ...

  7. 快学UiAutomator创建第一个实例

    工具准备 一.准备好java环境(JDK)和安卓环境(SDK.ADT)jdk1.6+ \eclipse\SDK \ADT详情百度,安装java环境 二.打开eclipse 三.创建步骤: 右键新建== ...

  8. MVC使用方法

    1.mvc打开html代码 后台处理:   ///<summary>         ///恢复html中的特殊字符         ///</summary>         ...

  9. Flask——基础知识

    Flask应用程序 一个简单的Flask应用程序 # 导入flask程序 from flask import Flask # 初始化flask对象 app = Flask(__name__) # 装饰 ...

  10. java 操作mongodb查询条件的常用设置

    java操作mongodb进行查询,常用筛选条件的设置如下: 条件列表:BasicDBList condList = new BasicDBList(); 临时条件对象:BasicDBObject c ...