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指向的是全局作用域