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. Oracle Data Integrator 12c 安装（ODI安装）

    Oracle Data Integrator 12c 安装(ODI安装) 企业版安装步骤(包含独立安装步骤) 官网下载Oracle Data Integrator 12cR2 (12.2.1.0.0) ...

  2. log日志应用 自定义的log

    package com.kxd.utils; import java.util.Hashtable; import android.util.Log; /** * The class for prin ...

  3. Fragment(一)--Fragment用法常见问题

    fragment notes fragment相关内容包括 基本定义与使用 回退栈内部实现 fragment通信(与activity 与fragment) DialogFragment VP + Fr ...

  4. freebsd安装ports

    /etc/portsnap.conf 里面更改 SERVERNAME=portsnap.hshh.org portsnap的命令比较少 fetch 获取数据 extract 释放全部ports upd ...

  5. uiviewcontroller 键盘不遮挡信息

    //添加监听事件 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow: ...

  6. UVA 1151 Buy or Build （最小生成树）

    先求出原图的最小生成树,然后枚举买哪些套餐,把一个套餐内的点相互之间边权为0,直接用并查集缩点.正确性是基于一个贪心, 在做Kruskal算法是,对于没有进入最小生成树的边,排序在它前面的边不会减少. ...

  7. 栈的应用——Rails

    一.题目描述 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站顺序编号为1~n,经中转站C驶向B.中转站C,这是一个可以停放任意多节车厢的车站,但由于末端封顶,驶入C的车厢必须以相反的顺序驶出C ...

  8. 背包问题2 （lintcode）

    这里: for(int j = 1;j <= m;j++) result[0][j] = 0x80000000; 不能从0开始,result[0][0]是可以取到的,是0.其他情况取不到才用最小 ...

  9. 【转】CPU个数，核心数，线程数

    我们在买电脑的时候,经常会看cpu的参数,对cpu的描述有这几种:“双核”.“双核四线程”.“四核”.“四核四线程”.“四核8线程”……. 我们接触的电脑基本上都只有一个cup.cpu的个数很容易得到 ...

  10. JS中鼠标左右键以及中键的事件

    在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效.而对于onmousedown.onmouseup的时候鼠标的事件左键/右键有效.详细请看w3c上的资料. ...