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. jQuery.Deferred(jQuery1.5-2.1)源码剖析

    jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var promis ...

  2. ES-windos环境搭建(1)

    前言 由于elasticsearch为Java开发,所以它还依赖Java JDK环境,并且对版本还有要求,需要1.8(含)以上.我们首先来配置Java JDK环境. JDK简介 JDK是Java语言的 ...

  3. Struts2标签<s:checkboxlist>回显问题

    Struts2 checkboxlist回显问题中,说明两种方式,第一种方式很普遍,第二种则是个人根据现有资源加上尝试得来的成果,第二种主要是为个人笔记(其中相关知识点不一一介绍). 一.普通方法: ...

  4. 用YII实现多重查询(基于tag)

    场景: 有一个饭店表 restaurant,存放所有饭店记录.我需要一个功能,将饭店按照不同的条件进行多重查询.就象这样:   氛围:浪漫 / 商务会谈 / 茅草屋 菜系:川菜 / 鲁菜 / 家常菜. ...

  5. 如何计算CDS view里两个时间戳之间的天数间隔

    ABAP透明表里的时间戳,数据类型为dec: 有个需求:计算这两个时间戳之间的天数间隔,丢弃时间戳年-月-日8位后面的小时:分钟:秒. 举个例子:如果时间戳是20180918173132,丢弃1731 ...

  6. （转）MyBatis框架的学习(七)——MyBatis逆向工程自动生成代码

    http://blog.csdn.net/yerenyuan_pku/article/details/71909325 什么是逆向工程 MyBatis的一个主要的特点就是需要程序员自己编写sql,那么 ...

  7. 团队作业-Beta冲刺第三天

    这个作业属于哪个课程 <https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1> 这个作业要求在哪里 <https ...

  8. leetcode_day1

    1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  9. CPP-基础：关于多态

        类的多态特性是支持面向对象的语言最主要的特性,有过非面向对象语言开发经历的人,通常对这一章节的内容会觉得不习惯,因为很多人错误的认为,支持类的封装的语言就是支持面向对象的,其实不然,Visua ...

  10. Python Third Day-文件处理

    文件处理 打开文件,得到文件句柄并赋值给一个变量f=open('a.txt','r',encoding='utf-8')#默认打开的方式为r指的是文本文件,全名为‘rt’#w文件方式指的是如果有a.t ...