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 CDN免费服务

    Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...

  2. c语言中的赋值

    int s,i,len,err=0 这个是只给err赋了值还是这四个都有?

  3. linux各文件夹的作用(转)

    转自:http://www.cnblogs.com/amboyna/archive/2008/02/16/1070474.html linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可 ...

  4. Objective-C Runtime Reference

    This document describes the OS X Objective-C 2.0 runtime library support functions and data structur ...

  5. sysbench0.5安装和使用介绍

    sysbench是一个模块化的.跨平台.多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况,sysbench支持MySQL.PostgreSQL.Oracle数据库OLTP测试.它 ...

  6. watchguard 软件工程师内部招聘！

    作为watchguard正式员工,现发布公司最近的招聘信息,待遇优厚,请符合条件的朋友和我联系并将简历发给我,我会尽早联系公司人力部门. 我的邮件:daibao91888@163.com 博客:htt ...

  7. HDU 1950 Bridging signals （LIS，O(nlogn)）

    题意: 给一个数字序列,要求找到LIS,输出其长度. 思路: 扫一遍+二分,复杂度O(nlogn),空间复杂度O(n). 具体方法:增加一个数组,用d[i]表示长度为 i 的递增子序列的最后一个元素, ...

  8. Codeforces Round #316 (Div. 2) D Tree Requests

    官方题解是离线询问,dfs树形转线性,然后二分找区间. 还有一种比较好的做法是直接dfs,将当前访问这个结点u相关的询问之前的状态存起来,然后访问完以后利用异或开关性,得到这颗子树上的答案. 代码是学 ...

  9. 如何 Scale Up/Down Deployment？【转】

    伸缩(Scale Up/Down)是指在线增加或减少 Pod 的副本数.Deployment nginx-deployment 初始是两个副本. k8s-node1 和 k8s-node2 上各跑了一 ...

  10. 005 String s = "Hello";s = s + " world!";执行这两行代码执行后，原始的 String 对象中的内容到底变了没有？

    原始的String对象中的内容没有改变成“Hello world”. 1.原因 因为在Java中String类被设计成不可改变的类,所以String类的所有对象都是不可变的.第一句代码中,s(存储在栈 ...