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的指向问题,真正的使用起来容易遗忘。

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

  • 相关阅读:
    网页基本信息
    3.ThinkPHP入门---视图
    2.TinkPHP入门----控制器
    1.Thinkphp入门--框架介绍
    C#生成二维码
    .net mvc中的表单异步提交
    .net MVC中异常日志
    .net导入excel数据到数据库中
    执行带返回参数的存储过程
    Jquery客户端校验——jquery.validate.js
  • 原文地址:https://www.cnblogs.com/regnol/p/10787550.html
Copyright © 2011-2022 走看看