箭头函数

箭头函数

// plus 是函数调用时的函数名
// a是参数，多个参数可以(a,b,c)
// =>后是函数体，如果只有一条语句，这条语句会被当成返回值；如果有多条语句，可以写在{ }中，返回值需要用return设置。
const plus = a => a + 1;
//打印出为3
console.log(plus(2));

用箭头函数写回调函数

const arr = [1, 2, 3, 4, 5, 
6, 7];
// 1. 普通写法

// filter(),创建一个数组，包含通过所提供函数测试的所有元素
// filter()的参数为回调函数
const arr1 = arr.filter(function (item) {
    //返回值为false表示不收到
数组中，true收入数组中
    return item % 2;
});
//打印结果 [1, 3, 5, 7]
console.log(arr1);
// 2. 箭头函数写法
const arr1 = arr.filter(item => item % 2);
console.log(arr1);

箭头函数与 this

• 箭头函数内部没有this

普通函数

const person = {
    name: "zs",
    sayHi: function(){
        //this 指代方法的调用者
        console.log(`my name is ${this.name}`);
    }
};
//调用结果为my name is zs
person.sayHi();

箭头函数

const person = {
    name: "zs",
    sayHi: () => {
        console.log(`my name is ${this.name}`);
    }
};
//调用结果为 my name is ，因为箭头函数内部没有this，
person.sayHi();

• 某些情况下没有this的箭头函数会更适合

const person = {
    name: "zs",
    sayHi: function(){
        // const _this = this;
        // 解决方法是用一个变量_this替代this，然后将下面延时器里的this改为_this。
        setTimeout(function(){
            //setTimeout里面的函数this 指代的是window
            console.log(`my name is ${this.name}`);
        },1000);
    }
};
//调用结果是报错
person.sayHi();

const person = {
    name: "zs",
    sayHi: function(){
        setTimeout(() => {
            //箭头函数没有this，所以运行时会向外寻找
            // 外层函数的this就是调用者的this
            console.log(`my name is ${this.name}`);
        }, 1000);
    }
};
// 调用结果为 my name is zs
person.sayHi();