js - 匿名函数和箭头函数理解
匿名函数和箭头函数
- 匿名函数
-
- 1，基本概念
- 2，匿名函数的应用场景
- 箭头函数
-
- 1，基本概念
-
- 箭头函数写法的特殊性
- 2，箭头函数的特点
-
- 箭头函数this总是指向父级的this：
- 扩展
匿名函数
1，基本概念
匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！（在ES5中就已经有了匿名函数）
首先我们声明一个普通函数fun：
function fun(){
console.log("Eula");
}
然后将函数的名字去掉即是匿名函数：
function (){
console.log("Eula");
}
这样直接写在js中会直接报错，不符合语法规范；需要使用小括号包括起来：
// 不在报错
(function () {
console.log("Eula");
})
那怎么调用呢，普通函数的调用都是使用 ()小括号来调用，匿名函数也不例外；后面需要在加一个小括号实现自调用，同样括号里面也可以传参；
(function (value) {
console.log("name:" + value);
})("Eula");
// 打印结果
name:Eula
2，匿名函数的应用场景
1，自调用
匿名函数想要自调用需要放在（）里面并后面使用小括号调用，里面可以传参；
(function (value){
console.log("name:"+value);
})("Eula")
输出结果：
name:Eula
2、事件的绑定函数
<input type="button" value="Eula！" id="btn">
<script>
//获得按钮元素
var btn=document.querySelector("#btn");
//给按钮增加点击事件。
btn.onclick=function(){
alert("姐是尤菈你记住！");
}
</script>
3、在对象中使用
var obj={
name:"Eula",
fun:function(){
return "我是"+this.name
}
};
console.log(obj.fun());//我是Eula
4、函数表达式
JS中定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。
// 1，函数声明
function fun(params){
console.log(params)
return ""
}
// 2，函数表达式写法 将匿名函数赋值给变量fun。
var fun = function(params){
console.log(params)
return ""
}
//调用方式与调用普通函数一样
console.log(fun());
注意：函数声明，它的一个重要特征就是函数会进行声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面；
函数表达式的写法则不会进行js预编译的函数提升；
5、回调函数
概念：回调函数就是一个被作为参数传递的函数；
setInterval(function(){
console.log("我是一个回调函数，每次1秒钟会被执行一次");
},1000);
6、作为返回值返回
//将匿名函数作为返回值
function fun() {
//返回匿名函数
return function () {
return "Eula";
};
}
//调用匿名函数
console.log(fun()()); //Eula
//或
const handleFun = fun();
console.log(handleFun()); //Eula
箭头函数
1，基本概念
箭头函数是ES6中新增一种语法，属于匿名函数； 将函数更加简单化的写法；也是非常的常用。
let funName = ()=>{
console.log('今天天气很好 上课可惜了');
}
箭头函数写法的特殊性
他有一些特殊写法 在编辑函数的时候可以适当的做出一些省略：
1，当只有一个参数的时候 可以省略小括号
let fun1 = num=>{
console.log(num + 300);
}
2，当没有参数或者多个参数的时候 ，不能省略小括号；
// 没有参数
let fun2 = ()=>{
console.log(300);
}
// 多个参数
let fun3 = (a,b,c)=>{
console.log(a);
console.log(b);
console.log(c);
}
3，当我们只有一句函数体的时候, 并且这句话是返回值的时候 ，可以同时省略return和大括号（函数体） ；
let fun4 = (num) => num+200
console.log(fun4(100));// 300
4，如果说不省略return 那么大括号也不能省略；
let fun4 = (num) => {
return num+200
}
console.log(fun4(100));// 300
5，如果返回值是对象 ，在省略大括号和return的情况下，需要在对象外面加上一层小括号（因为有歧义无法确定大括号是箭头函数的还是对象的 ）
// 省略大括号和return的写法
let fun5 = ()=>({
name : 'Eula',
age : 18,
sex : '女'
})
console.log(fun5 ());
// 正常写法
let fun5 = () => {
return {
name: "Eula",
age: 18,
sex: "女"
};
};
console.log(fun5());
2，箭头函数的特点
1、只能定义匿名函数
2、箭头函数没有原型对象
3、箭头函数不能定义构造函数
4、箭头函数不能使用arguments new super
5、箭头函数没有自己的this （调用的是他的父级的this）
箭头函数this总是指向父级的this：
如下分情况进行讨论：
1，say方法是箭头函数 指向父级 ，obj3 的父级是window，所以say函数的this指向是window。
let obj3 = {
name: "Mary",
age: 13,
say: () => {
return this; //返回的是window
}
};
开始调用
console.log(obj3.say());
2，say2方法指向的是父级的this,父级是say1函数，say1函数是普通函数只指向obj4； 所以say2的this指向是obj4对象。
let obj4 = {
name: "Tom",
age: 3,
say1: function () {
console.log("this:",this); // 此处的this 是 {name: 'Tom', age: 3, say1: ƒ}
return {
name: "Jerry",
age: 2,
say2: () => {
// 指向的是父级的this 父级是say1函数 say1函数是普通函数只指向obj4 所以 此处的this指向是{name: 'Tom', age: 3, say1: ƒ}
return this;
}
};
}
};
开始调用
console.log(obj4.say1().say2());
3，say2的this指向父级 父级say1也是箭头函数，那么this也指向父级的this，那么obj5对象的父级是window所以say2的this指向是window。
let obj5 = {
name: "Tom",
age: 3,
say1: () => {
return {
name: "Jerry",
age: 2,
say2: () => {
// say2的this指向父级 父级say1也是箭头函数,那么this也指向父级的this,那么obj5对象的父级是window所以此处的this指向window
return this;
}
};
}
};
开始调用
console.log(obj5.say1().say2()); // 指向的是window
扩展
对象里面的函数写法会有多种写法，如下：
const action = {
// 1，省略键名的写法
one() {
console.log(111);
},
// 2，普通函数的写法
two: function () {
console.log(222);
},
// 3，匿名函数的写法
three: () => {
console.log(333);
}
};