javascript 使用 匿名 箭头函数 this的变化
处理html 页面
<body>
<div class="main">
<div class="up">
<div class="black"></div>
</div>
<div class="down"></div>
<div class="disp"></div>
<input type="button" value="点击消失" onclick="abc()"> <div id="test1" class="tt">
<h1>abccccc</h1>
</div>
</div> <script>
function abc() {
let a = $('.tt')[0];
console.log(a);
let b = $("#test1");
console.log(b);
$('.tt').each((index,ele) => {
console.log(ele);
});
$('.main').delegate('#test1','click',() => {
console.log(this);
console.log($(this));
});
$('.main').delegate('#test1','click',function () {
console.log(this);
console.log($(this));
});
}
</script>
在使用jquery 给 class为main 元素的子元素添加点击事件
$('.main').delegate('#test1','click',() => {
console.log(this);
console.log($(this));
});
如果使用匿名箭头函数,this 指向了 window对象
使用正常写法的写法:
this的指向当前元素!
以前学习箭头函数,有讲到this的指向问题,真正的使用起来容易遗忘。
纸上得来终觉浅,绝知此事要躬行.
javascript 使用 匿名 箭头函数 this的变化的更多相关文章
- JavaScript 基础(七) 箭头函数 generator Date JSON
ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...
- JavaScript中的箭头函数
1.定义 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... ...
- JavaScript中的普通函数和箭头函数
最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...
- JS中的普通函数和箭头函数
最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- 深入理解JavaScript中的箭头
箭头函数可以使我们的代码更加简洁,如下: var sum = (a,b) => a+b; JavaScript 充满了我们需要编写在其他地方执行的小函数的情况. 例如: arr.forEach( ...
- JavaScript学习笔记(十二)——箭头函数(Arrow Function)
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- JavaScript ES6 Arrow Functions(箭头函数)
1. 介绍 第一眼看到ES6新增加的 arrow function 时,感觉非常像 lambda 表达式. 那么arrow function是干什么的呢?可以看作为匿名函数的简写方式. 如: var ...
- javascript基础修炼(8)——指向FP世界的箭头函数
一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...
随机推荐
- react生命周期es6
基本函数有 import React from 'react' export default class MyClass extends React.Component { constructor(p ...
- css 超出部分以省略号的形式显示
想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度,然后添加以下属性 overflow: hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/*超出 ...
- MySQL数据库(10)----IN 和 NOT IN 子查询
当子查询要返回多个行来与外层查询进行比较运算时,可以使用运算符 IN 和 NOT IN.它们会测试某个给定的比较值是否存在于某一组值里.如果外层查询里的行与子查询返回的某一个行相匹配,那么 IN 的结 ...
- 在centos6.x上安装teamviewer
首先下载公钥: # wget http://www.teamviewer.com/link/?url=354858 # rpm --import TeamViewer_Linux_PubKey.asc ...
- 数据迁移:MSSQL脚本文件过大,客户端没有足够的内存继续执行程序
在CMD窗口(俗称:黑屏程序) 下输入 SQLCMD 命令 命令格式如下: sqlcmd -U 用户名 -P 密码 -S 服务器地址 -d 数据库名称 -i 你的脚本文件.sql ( ...
- linux下安装apache与php
http://www.92csz.com/study/linux/16.htm 1.apache 在如下页面下载apache的for Linux 的源码包 http://www.apache.org/ ...
- 排序算法(1) 快速排序 C++实现
快速排序基本特性 时间复杂度:O(n*lgn) 最坏:O(n^2) 空间复杂度:最好情况下:O(lgn),最坏情况:O(n),平均情况:O(lgn) 不稳定. 关于快速排序的空间复杂度,谢谢@命运他爹 ...
- ZT 理解class.forName()
理解class.forName() 分类: [Java SE 基础] 2012-05-17 07:53 3892人阅读 评论(3) 收藏 举报 classloaderclassjdbcejb数据库 目 ...
- [BZOJ 1972][Sdoi2010]猪国杀
1972: [Sdoi2010]猪国杀 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 364 Solved: 204[Submit][Status][D ...
- CRF++ 如何制定自己的特征模板
工具的简单介绍 对该工具的安装及介绍我这里就不再赘述,请参考官方文档或者国内一些翻译后的中文版.也还比较清楚. 我只介绍一下crf++在命名实体识别中的一些用法,这些都建立在你了解crf++的一些最基 ...