zoukankan      html  css  js  c++  java
  • javascript 使用 匿名 箭头函数 this的变化

    处理html 页面

     1 <body>
     2     <div class="main">
     3         <div class="up">
     4             <div class="black"></div>
     5         </div>
     6         <div class="down"></div>
     7         <div class="disp"></div>
     8         <input type="button" value="点击消失" onclick="abc()">
     9 
    10         <div id="test1" class="tt">
    11             <h1>abccccc</h1>
    12         </div>
    13     </div>
    14 
    15     <script>
    16        function abc() {
    17            let a = $('.tt')[0];
    18            console.log(a);
    19            let b = $("#test1");
    20            console.log(b);
    21            $('.tt').each((index,ele) => {
    22                console.log(ele);
    23            });
    24            $('.main').delegate('#test1','click',() => {
    25                console.log(this);
    26                console.log($(this));
    27            });
    28            $('.main').delegate('#test1','click',function ()  {
    29                console.log(this);
    30                console.log($(this));
    31            });
    32        }
    33     </script>

    在使用jquery 给 class为main 元素的子元素添加点击事件

     $('.main').delegate('#test1','click',() => {
                   console.log(this);
                   console.log($(this));
               });

    如果使用匿名箭头函数,this 指向了 window对象

    使用正常写法的写法:

    this的指向当前元素!

    以前学习箭头函数,有讲到this的指向问题,真正的使用起来容易遗忘。

    纸上得来终觉浅,绝知此事要躬行.

  • 相关阅读:
    Smarty模板引擎技术(三)
    Smarty模板引擎技术(二)
    Smarty模板引擎技术(一)
    Ajax技术
    JavaScript--XML DOM
    JavaScript--HTML DOM
    [转]常用正则表达式
    JavaScript--事件
    CentOS 下开启PHP错误提示
    JavaScript实例
  • 原文地址:https://www.cnblogs.com/regnol/p/10787550.html
Copyright © 2011-2022 走看看