箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>箭头函数</title>
</head>
<body></body>
<script>
// 箭头函数:用箭头 => 代表 function 关键字
// 普通函数
function fn1() {}
const fn2 = function () {};
// 箭头函数:代替匿名函数
// () => {}
const fn3 = () => {};
console.log(fn3);
// 箭头函数的特性
// 1.() 的优化:如果形参只有一个,可以省略 ()
const fn4 = (a) => {
// 一个形参,名字叫a
console.log(a);
};
fn4("hello");
// 2.{} 的优化:如果函数体只有一行代码,可以省略 {}
const fn5 = (a) => console.log(a); // 一个形参,一行函数体
fn5("word");
// 3. {}的优化: 隐藏点, 如果要修改返回值, 没有{} 自带return( 🔔 不能额外使用return: 只要有return 一定有{})
const fn6 = (a) => a * a;
let res = fn6(5);
console.log(res);
// 总结: 箭头函数一般用于做回调函数
</script>
</html>
箭头函数没有 this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>箭头函数 - 没有this</title>
</head>
<body></body>
<script>
// 箭头函数: 用 => 代替了function: 只有function会产生this, 箭头函数不产生this
// 箭头函数可以使用this: this找上级要(作用域)
const fn1 = () => {
console.log(this); // 一定指向window对象(且改变不了)
};
fn1();
const obj1 = {
fn2: () => {
console.log(this); // window对象: 指向了全局: 先指向obj1{}对象: 里面没有this, 再向上找到全局
},
};
obj1.fn2();
// 高级的
const obj2 = {
fn3: function () {
// 有this: 指向obj2
return () => {
console.log("fn3返回的箭头函数", this);
};
},
};
let fn4 = obj2.fn3();
// console.log(fn4)
fn4();
// 骨灰级的: 借调改变this指向
let ds = { name: "屌丝" };
obj2.fn3().call(ds); // this依然指向 obj2: 借调失败
// 箭头函数没有this: 借调是无法修改的
// 如果非要修改? 曲线救国, 借调上级fn3 改变
obj2.fn3.call(ds)();
// 总结
// 箭头函数自己没有: 找上级
// 扩展
let arr = [1, 2, 3];
arr.forEach((item, index) => {
console.log(item, index);
console.log(this); // this指向window
});
// 回调函数里面的this指向: 一般都是指向window对象(外部)
// 用了箭头函数之后: this一定指向window
function f(fn) {
// 普通回调调用
fn(); // 相当于window在调用, 回调的this指向window
// 借调回调函数
fn.call(this); // 主函数f的this, 回调的this指向f的this
// 如果回调函数fn是箭头函数: 无法借调, 里面this无法改变: 一定指向window
}
// 箭头函数使用this的目的: 防止别人修改里面的this
</script>
</html>