261 箭头函数（★★★）
1、ES6中新增的定义函数的方式
() => {}
（1）()：代表是参数；
（2）=>：必须要的符号，指向哪一个代码块；
（3）{}：函数体
const fn = () => {} // 代表把一个函数赋值给fn
2、函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
return num1 + num2;
}
//es6写法
const sum = (num1, num2) => num1 + num2;
3、如果形参只有一个，可以省略小括号
function fn (v) {
return v;
}
//es6写法
const fn = v => v;
4、箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置【区域】的上下文this。
【箭头函数的this 在创建时就确定了， 是上下文(和他平级的环境中)中的this。】
【箭头函数没有自己的this， 箭头函数所在的作用域中的this指向谁，箭头函数中的this就指向谁。】
const obj = { name: '张三'}
function fn () {
// fn不是箭头函数，所以还得看是谁调用fn
console.log(this); // （1）{name: "张三"}； （2）this 指向 是obj对象
return () => {
console.log(this); // （1）{name: "张三"}； （2）this 指向 的是箭头函数定义的位置，这个箭头函数定义在fn里面，而这个fn【中的this】指向是的obj对象，所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj);
resFn();
// 补充
let f1 = () => {
console.log(this); // window
return () => {
console.log(this); // window
}
}
f1.call(obj11)()
// 补充
const obj = {
name: '啊哈'
}
let f1 = () => {
// f1是箭头函数，定义时就决定了f1的this指向，这里指向window
console.log(this); // window
return () => {
console.log(this); // window
}
}
f1.call(obj)()
小结
- 箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。 【箭头函数所在的作用域中的this指向谁，箭头函数中的this就指向谁。】
- 箭头函数的优点，在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数</title>
</head>
<body>
<script type="text/javascript">
// 箭头函数是用来简化函数定义语法的
const fn = () => {
console.log(123); // 123
}
fn();
// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
const sum = (n1, n2) => n1 + n2;
const result = sum(10, 20);
console.log(result); // 30
// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
const fn2 = v => {
console.log(v); // 20
}
fn2(20)
// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
function fn33() {
console.log(this);
return () => {
console.log(this)
}
}
const obj = {
name: 'zhangsan'
};
const resFn = fn33.call(obj);
resFn();
console.log('---------------------------');
// 我的补充
function fn3() {
let that = this;
console.log('fn3函数的this：', this); // window
return () => {
console.log('箭头函数的this：', this); // window
console.log('箭头函数的this与fn3函数的this是否相等：', this === that); // true
}
}
let arrow = fn3();
arrow();
console.log('---------------------');
const obj2 = {
name: '哈哈'
};
function fn4() {
console.log('fn4函数的this：', this); // fn4函数的this： {name: "哈哈"}
return () => {
// fn4函数中的箭头函数的this： {name: "哈哈"}
console.log('fn4函数中的箭头函数的this：', this);
}
}
let arrow2 = fn4.call(obj2);
arrow2();
</script>
</body>
</html>
mianshi
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age) // 100
}
}
obj.say(); // 箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
