【金秋打卡】第6天箭头函数

一、课程名称：前端工程师2022版

二、课程章节：ES6基础入门-模板字符串与箭头函数(3-1 箭头函数是什么-慕课网体系课 (imooc.com))

三、课程讲师：Alex

四、课程内容：

1、箭头函数概念

（1）认识箭头函数：箭头函数也是函数的一种，只不过它的写法不同于从前函数的写法，它的参数与函数体中间采用=>连接，() => {}; ，如：

 const add = (x,y) => {

            return x + y;

        };

        console.log(add(1,2));  //3

（2）箭头函数的结构

参数 => 函数体：这样设计出来的函数是匿名函数且无法给它命名，所以通常会将其赋值给一个常数： const/let 函数名 = （参数） => {函数体}

（3）如何将一般函数改写成箭头函数

1）声明形式：function add(){}，需要将声明的形式先转化为函数表达式的形式

2）函数表达式：const add = function(){}，对于函数表达式形式，只需要将function去掉，然后在圆括号和花括号中间添加箭头就行=>，const add = ()=>{}

2、箭头函数的注意事项

（1）单个参数：单个参数可以把参数外面的圆括号省略，而无参数或多个参数不能省略圆括号

（2）单行函数体：单行函数体可以同时省略{}和return，注意一定要同时省略，如果其中任何一个没有省略，就会报错，而多行函数体就不能再简化了

（3）单行对象：如果箭头函数返回单行对象，可以在{}外面加上()，让浏览器不再认为那是函数体的花括号

3、this指向

（1）全局作用域中的this指向：window

 console.log(this);  //window

（2）一般函数（非箭头函数）中的this指向

1）只有在函数调用的时候this指向才能确定，不调用的时候，不知道指向谁

2）this指向和函数在哪儿被调用没关系，只和谁在调用有关

①非严格模式下：没有谁在调用函数，window也没有调用，this最开始没有指向window，而是指向undefined，只不过是在非严格模式下，将其转化为window：undefined->window

function add(){

            console.log(this);

        }

        add();    //window

②严格模式下：调用函数的结果是undefined

③window.add()：不管是严格模式还是非严格模式下，都是window调用，结果都是输出window

④对象将函数作为属性，不直接调用对象，而是调用对象的属性，此时是对象在调用，那么this指向的就是对象本身。如果使用一个常量保存对象的函数属性，最后调用那个常量，this会在非严格模式下指向window

function add() {

        console.log(this);

      }

      const calc = {

        add: add,

      };

      calc.add(); //此时this指向calc，this指向只和谁调用它有关

      const adder = calc.add;

      adder(); //指向window,undefined->window（非严格模式下）

⑤鼠标点击等事件，this会指向调用事件的对象，如document.onclick，最后指向document，在点击时，浏览器相当于执行了document.onclick();

 document.onclick = function () {

        console.log(this); //指向document，在点击时，浏览器相当于执行了document.onclick();

      };

⑥构造函数中的this指向的是给构造函数实例化的对象，如给构造函数中传参，给this.username添加属性，在通过实例化后，可以发现这里的this指向实例化的对象p

（3）箭头函数中this指向：箭头函数没有自己的this，因此箭头函数中的this会向外寻找

 // 箭头函数没有自己的this;

      const calc = {

        add: () => {

          console.log(this);

        },

      };

      calc.add(); //window

4、不适用箭头函数的场景

（1）作为构造函数：

const Person = () =>{}   （×）这是因为箭头函数没有this，而构造函数最重要的就是this，构造函数在实例化以后是需要指向this的

（2）需要this指向调用对象的时候：

如document.addEventListener(‘click’,()=>{console.log(this)},false)    （×）这是因为箭头函数没有this，在内部找不到this，就会向外寻找，最终this指向window

（3）需要使用arguments的时候：

const add = () => console.log(arguments); add();    （×）这是因为箭头函数是没有arguments的，最终程序会报错

五、课程收获：

今天学习了箭头函数的知识，箭头函数相较于以前function函数语句更加简便，使用起来也比较方便，对于箭头函数没有自己的this需要多加理解和应用，不要搞混。