java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂
基本用法
在ES6中允许使用 => 来定义函数,如下:
var f = a => a;
console.log(f(1)); //1
就等同于
var f = function(a){
return a;
}
console.log(f(1)); //1
从上面可以看出,在箭头左侧的是代表参数,若参数只有一个,()可以省略,箭头右侧的表示函数代码块,若代码块里面是个返回值,则{}可以省略不写
1.无参数情况
若箭头函数不需要参数,则左侧用()代替,如下:
var f = () => {
console.log("无参数情况");
}
f();//无参数情况
2.有参数情况
var f = (a, b) => {
return a+b;
}
console.log(f(1,2)); //3
var f = a => a;
console.log(f(1)); //1
如果箭头函数有参数,则需要用()括起来,若只有一个参数,括号可以省略不写
在这里要注意一个情况,就是当箭头函数直接返回一个对象的时候,如下:
var f = () => {name:'liming', age:22}; //报错
console.log(f());
这样写肯定是报错的,因为{}执行时变成代码块,会去运行代码,所以要用一个()括起来才可以,如下:
var f = () => ({name:'liming', age:22});
console.log(f());
执行结果为:
{name: "liming", age: 22}
以上这个写法才是正确的
箭头函数注意点
1.this指向
var a = '全局变量a';
var obj={
a:'局部变量a',
fn1:function(){
console.log(this.a);
},
fn2:()=>{
console.log(this.a);
}
}
obj.fn1();
obj.fn2();
输出结果为:
局部变量a
全局变量a
普通函数的this我们知道是指向最近的一个对象,而箭头函数的this实际上是指向定义时的this,比如把上面代码改为:
var obj={
a:'局部变量a',
fn1:function(){
console.log(this.a);
},
fn2:()=>{
console.log(this.a);
}
}
obj.fn1();
obj.fn2();
输出结果为:
局部变量a
undefined
此时因为箭头函数是指向全局的,全局没有变量a则输出undefined,这里的fn1和fn2都是全局函数,所以箭头函数this指向的是定义时的全局,而普通函数的this指向的是最近的一个对象
上面如果那个例子不太明白,可以再看下如下例子:
this.a = '全局a';
function Timer() {
this.a = 'timer中的a';
// 普通函数
setTimeout(function () {
console.log('普通函数:', this.a);
});
// 箭头函数
setTimeout(() => {
console.log('箭头函数:',this.a);
});
}
new Timer();
输出结果为:
普通函数: 全局a
箭头函数: timer中的a
这里普通函数会指向全局是因为,距离普通函数最近的对象是setTimeOut,而setTimeOut是挂在全局作用域中,所以普通函数指向全局,箭头函数指向的是定义时的对象,箭头函数是在Timer中定义的,所以箭头函数指向Timer
如果把以上代码改为如下:
this.a = '全局a';
function Timer() {
this.a = 'timer中的a';
// 普通函数
setTimeout(function () {
console.log('普通函数:', this.a);
});
// 箭头函数
setTimeout(() => {
console.log('箭头函数:',this.a);
});
}
Timer();
输出结果:
普通函数: timer中的a
箭头函数: timer中的a
这个是为什么呢,因为如果是new Timer相当于是构造函数,构造了一个对象,如果是Timer()就相当于是调用函数Timer()这两者还是有区别的,如果是调用函数Timer(),这个时候this的指向都是全局,在局部修改this.a会覆盖全局的this.a
通过以上,我们可以知道普通函数跟箭头函数this指向的区别是:
普通函数: this指向最靠近的一个对象
箭头函数: this指向定义时的对象,也就是说箭头函数一旦定义完成,它的指向是固定的,没法改变,它的指向是定义时所在的作用域,而不是执行时的作用域
2.不可以当做构造函数
箭头函数不可以当做构造函数,也就是不可以new一个,否则会报错,如下:
var fn = ()=>{
console.log("123");
}
new fn(); //Uncaught TypeError: fn is not a constructor
以上会报错,因为箭头函数本身没有属于自己的this,所以箭头函数不可以当做构造函数,也因为箭头函数没有自己的this,所以call()、apply()、bind()这些方法去改变this的指向对箭头函数也是无效的,如下:
this.x = 'outer';
(function() {
console.log([
(() => this.x).bind({ x: 'inner' })()
]);
})();
输出结果为:
["outer"]
把箭头函数通过bind绑定可见无效,箭头函数还是指向全局
以上是个人总结,有什么不足之处欢迎留言探讨!
java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂相关推荐
- java线性渐变_线性渐变丶Java教程网-IT开发者们的技术天堂
渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种.渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求, ...
- java父原型,对象及原型丶Java教程网-IT开发者们的技术天堂
目录 创建对象 字面量 创建对象 new Object() 创建对象 获取.设置对象属性 obj.key 获取/设置obj的key属性的值value obj['key'] 获取/设置obj的key属性 ...
- java接口防抖_防抖函数丶Java教程网-IT开发者们的技术天堂
1.使用场景:是在写keyup事件的时候,每次触发,都会请求后台接口,为了避免,每次请求,键盘弹起之后,隔上一段时间再去请求,所以用防抖函数 2.概念: (1)什么是防抖:多次事件触发后.事件处理函数 ...
- java 淡化图片阴影_图像去阴影丶Java教程网-IT开发者们的技术天堂
武汉大学提出ARGAN:注意力循环生成对抗模型用于检测.去除图像阴影 | ICCV 2019 https://blog.csdn.net/weixin_42137700/article/details ...
- java 淘口令_淘口令解析丶Java教程网-IT开发者们的技术天堂
淘口令解析 通过程序解析淘口令,无需联盟开发者权限,只需几行代码就可实现自动识别淘口令: def query_password(sign_server, share_password): data = ...
- java闪屏_闪屏页设置丶Java教程网-IT开发者们的技术天堂
相信每个app都需要一个闪屏页 就是一个开始页面 对于新手来说 可能就直接一个activity 弄个背景图片 ,细心地同学也许会发现 每次启动 应用程序的时候 一开始显示的不是那个设置的背景图片 ...
- java发言_一次发言稿丶Java教程网-IT开发者们的技术天堂
亲爱的小朋友们,尊敬的各位领导.老师.家长朋友: 大家上午好! 我是刘文文的妈妈,非常荣幸能作为家长代表在这里表达我此时此刻的心情和感慨.首先,请允许我代表全体家长向所有的教职员工说一声:" ...
- 不同组合方式有四种纸币java_拼凑钱币丶Java教程网-IT开发者们的技术天堂
[问题]给你六种面额 1.5.10.20.50.100 元的纸币,假设每种币值的数量都足够多,编写程序求组成N元(N为0~10000的非负整数)的不同组合的个数. 输入描述: 输入包括一个整数n(1 ...
- ejs java_ejs教程丶Java教程网-IT开发者们的技术天堂
ejs教程 一.什么是EJS EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串. 二.为什么要使用EJS 与最初的JavaScript相比较,一些不太了解你的代码的人可以 ...
最新文章
- php函数变成变量,为什么我不能在PHP函数中将函数作为默认变量提供?
- gin-vue-admin菜单配置教程:父子菜单
- JVM GC性能方面的考虑(吞吐量和STW)
- mysql中的运算符的执行顺序_【MySQL】执行顺序
- oracle包同义词报错,Oracle——04同义词与数据库链接
- Redis的RDB AOF DATABASE
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
- Typora 中文字体深度修改
- 语音转写和语音听写_如何在Windows 10上使用语音听写
- 使用Grafana搭建监控系统
- 广告公司测试软件题目,信息流广告测试题,看看你广告优化能力
- 团队成立——Microhard
- html修改按钮属性,button属性
- 最全ListView扩展的实例和补充
- 工作量单位-人月、人日、人时 详解
- 7-22 验证手机号
- 她力量系列七丨兰艳艳:理想温暖10年科研路,女性可以柔和,更要自信、专业 | 妇女节特辑
- H5跨域通信 - window.postMessage
- 优质的草图大师素材 草图66!
- 00后必看:如何在互联网就业寒冬和疫情的双面夹击下找到心仪工作
热门文章
- 如何获取免费比特币?
- 数据结构练手02 双向链表实现
- MyEclipse用(JDBC)连接SQL出现的问题~
- bfv同态加密_五分钟了解同态加密及三种常见方案
- python做oa系统_浅谈python进行webapp,oa系统开发 (更新中) | 学步园
- java 工程路径_java 项目的路径详情
- 计算机管理储存u盘无法使用,Win7系统退出U盘后重新插入电脑无法使用怎么办
- java sql变更存储,MySQL更改数据库数据存储目录,mysql数据存储
- mysql数据库 integer_MySQL数据库中,常用的数据类型
- 关于_beginthreadex、_beginthread和CreateThread