javaScript箭头函数和this指向

一般方法定义函数

const myFun = function(){
    return "一般写法"
}

对象字面量中定义函数

const obj = {
    myFun(){
        return "一般写法"
    }
}

箭头函数

不使用function关键字，用() => 代替

const myFun = (参数列表) =>{
    return "箭头函数";
}

没有参数时

const myFun = () =>{
    return "箭头函数";
}

有两个以上的参数时

const myFun = (num1,num2) =>{
    return num1 + num2;
}

只有一个参数时

• 括号可以省略

const myFun = num =>{
    return num * num;
}

箭头函数的代码数量问题

有多行代码时：按照正常的方法来写

const myFun = () =>{
    console.log("Hello");
    console.log("World");
}

当只有一行代码时：

const myFun = (num1,num2) =>{
    return num1 + num2;
}

简写：可以将{}与return省略（不管函数有没有返回值都可以这么写）
注意：{}和return要么都写，要么都省略，不能一个写一个省略

const myFun = (num1,num2) => num1 + num2;

什么时候使用箭头函数

需要回调函数时经常使用箭头函数（将函数作为另一个函数的参数）

setTimeout(() => {
    console.log("...");
},1000)

箭头函数中的this指向问题

我们在对象字面量中定义函数

    const obj = {
        name :"xiufan",
        myFun(){
            //使用一般方法
            setTimeout(function() {
                console.log("普通函数中this的指向");
                console.log(this);//window
            }, 1000);
            
            //使用箭头函数
            setTimeout(() => {
                console.log("箭头函数中this的指向");
                console.log( this);//obg对象
            },1000);
        }
    }
    
    obj.myFun();

在myFun中，有两个setTimeout()中，一个回调方法是一般函数，一个是箭头函数
运行结果

普通函数中this的指向
Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close:
ƒ, …}
箭头函数中this的指向
{name: "xiufan", myFun: ƒ}

普通函数的this指向在调用时确定（谁调用this就指向谁）

普通函数调用：this指向window
构造函数调用：this指向实列对象
对象方法调用：this指向该方法所属对象
事件绑定方法：this指向绑定事件对象
定时器函数 ：this指向window
立即执行函数：this指向window

箭头函数的this，引用的是最近作用域中的this

箭头函数会向外一层层查找，直到由this的定义