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. 前端经典面试题 不经典不要star！

    前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HA ...

  2. SIT&UAT

  3. iOS上线check_list

    iOS 上线前 check_list 类型 序号 检查项 结果(pass/no) 安装 卸载 1 非越狱环境下的安装.卸载 2 越狱环境下的安装.卸载 3 安装文件检查,无泄漏用户信息的隐患 4 卸载 ...

  4. ajax传给springMVC数据编码集问题

    前台 ajax: $.ajax("${pageContext.request.contextPath}/hello",// 发送请求的URL字符串. { dataType : &q ...

  5. VS2010中C++ 出现fatal error LNK1169: 找到一个或多个多重定义的符号

    一般是函数重定义造成的 例如定义了两个 sum(x,y)函数

  6. C语言二维数组作为函数参数

    设有整型二维数组a[3][4]如下:0   1   2   34   5   6   78   9  10  11 它的定义为:    int a[3][4]={{0,1,2,3},{4,5,6,7} ...

  7. codeforces Gym 100338F Spam Filter 垃圾邮件过滤器（模拟，实现）

    阅读题, 概要:给出垃圾邮件和非垃圾邮件的集合,然后按照题目给出的贝叶斯公式计算概率一封邮件是垃圾邮件的概率. 逐个单词判断,将公式化简一下就是在垃圾邮件中出现的次数和在总次数的比值,大于二分之一就算 ...

  8. SniperOJ-leak-advanced-x86-64

    借助DynELF实现无libc的漏洞利用小结 1.leak-advance与leak的区别在于一个可用函数是write,一个可用函数是puts.write比puts更容易利用,虽然write需要的参数 ...

  9. 关于Java IO流学习总结

    一.IO流的三种分类方式 1.按流的方向分为:输入流和输出流 2.按流的数据单位不同分为:字节流和字符流 3.按流的功能不同分为:节点流和处理流     二.IO流的四大抽象类: 字符流:Reader ...

  10. java设计模式基础 - 解决某一类问题最行之有效的方法,框架是大的设计模式.

    一.单例模式(Singleton) 1.单例对象(Singleton)是一种常用的设计模式.在Java应用中,单例对象能保证在一个JVM中,该对象只有一个实例存在.这样的模式有几个好处: 1>某 ...