xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

ES6 Arrow Function & this bug

ES6 Arrow Function & this bug

image


    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 & not bind this

not auto bind this, only inhreit this from parent context

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions


// "use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-08-26
 *
 * @description arrow-function-this
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

const ArrowFunction = () => {
    log(`ES6 Arrow Function this =`, this);
};

function ES5Function() {
    log(`ES5 Function this`, this);
}

log(`global this`, this);

(() => {
    log(`IIFE this`, this);
    ArrowFunction();
    ES5Function();
})();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://www.codementor.io/dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functions

http://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions-runtime-semantics-evaluation

// "use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2019-08-26
 *
 * @description arrow-function-this-context
 * @augments
 * @example
 * @link https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal (# Class Properties)
 *
 */

let log = console.log;

class App {
    constructor(args) {
        this.args = args;
    }
    // Class Properties
    ArrowFunction = () => {
        log(`ES6 Arrow Function this =`, this);
    }
    ES5Function = function () {
        log(`ES5 Function this`, this);
    }
    ES5NormalFunction() {
        log(`ES5 Normal Function this`, this);
    }
    // static
    static StaticFunction() {
        log(`StaticFunction this`, this);
    }
    get getArgs() {
        log(`this.args`, this.args)
        return this.args;
    }
    set setArgs(args) {
        log(`args`, args);
        log(`old this.args`, this.args);
        this.args = args
        log(`new this.args`, this.args);
    }
}

log(`global this`, this);


(() => {
    log(`IIFE this`, this);
    App.StaticFunction();
    let app = new App([1, 2, 3]);
    app.ArrowFunction();
    app.ES5Function();
    app.ES5NormalFunction();
    let args = app.getArgs;
    log(`app args =`, args);
    app.setArgs = ["a", "b", "c"];
})();

refs

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2018-06-20 12:29  xgqfrms  阅读(46)  评论(17)  编辑  收藏  举报