目录
前言
在javascript基础中,我们声明一个函数通常都是用function的。但是,
即使是对于函数内书写功能再简单,function形式也不能作相应的化简,这就导致了程序的冗杂。
当然,这只是小糖的个人理解。下面,我们来学习箭头函数~
一、箭头函数
1、概念:
简单理解就是-----一种新的定义函数的方式,对于函数表达式的简写方式。
不用function关键字啦~
2、语法:(对比普通函数)
普通函数:function (形参) {代码段};
箭头函数:(形参) => {代码段};
3、举个栗子:
普通函数:
{
let f0 = function(a) {console.log(a);}
f0(100);
}
箭头函数:
{
let f = (a) => {console.log(a);}
f(200);
}
二、函数特性
1、小括号可简写
箭头函数如果只有一个形参,那么可以省略小括号不写。
如 (a) => { } 等同于 a => { }
举个栗子
2、大括号可简写
若箭头函数代码段只有一个命令,那么可以忽略大括号不写。
如() => {console.log("aaa")} 等同于 () => console.log("aaa")
举个栗子
注意!!!!!
箭头函数中,如果省略大括号,代码段会自动返回我们所写的语句,不用加return
{
let fun = (a,b) => {return a + b};
console.log(fun(1,2));
//等同于
let fun1 = (a,b) => a + b; //自动返回 a + b 的结果
console.log(fun1(2,3));
}
3、不含this关键字
箭头函数里不含 this 关键字,箭头函数自身不含this,如果出现则this来自该箭头函数的外部函数。
通俗理解:如果箭头函数被一个函数包裹着,那他的this就是其外部函数的this;
如果箭头函数外部没有函数包裹,则this指向window。
外部无函数场景
//3、(1)箭头函数外部没有函数时 (this指向window)
{
let fun = a => console.log(this);
fun(); //结果为window
}
外部有函数场景
//(2)箭头函数在函数内部 (this指向外部函数)
var btn = document.querySelector('button');
btn.onclick = function () {
let fun1 = a => console.log(this);
fun1(); //结果返回div标签
}
三、结束语
希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我,后续也会持续发布新文章,祝大家学有所成!
欢迎各位前端大佬留言讨论指教! 小糖谢谢各位啦~❤ ❤ ❤ ❤