青青子衿，悠悠我心。但为君故，沉吟至今。

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

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

posted @ 2019-04-28 22:51  revres  阅读(202)  评论(0)  编辑  收藏  举报

乐观加坚持