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就指向谁。】

const obj = { name: '张三'} 

function 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();

小结

  • 箭头函数中不绑定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>

面试题

var age = 100;

var obj = {
    age: 20,
    say: () => {
        alert(this.age)
    }
}

obj.say();  // 箭头函数this指向的是被声明的作用域里面,而对象没有作用域的,所以箭头函数虽然在对象中被定义,但是this指向的是全局作用域
上一篇:电路板驱动开发记录


下一篇:Find a way HDU - 261 搜索