JavaScript ES6中的箭头函数

前端 · 2020-08-18 ·

ES6 中新增的定义函数的方式,用来简化函数定义

通常会将箭头函数赋值给一个变量,变量名称即为函数名。

() => {}
const fn = () =>{}

箭头函数定义特性

// 箭头函数:用来简化函数定义语法
const fn = () => {
    console.log('箭头函数');
}
fn();

// 如果函数体只有一句代码,且代码的执行解构就是返回值,可以省略大括号{}
const sum = (x, y) => {
    return x + y;
}
const sum2 = (x, y) => x + y; // 省略大括号模式
console.log(sum(2, 5)); //7
console.log(sum2(2, 5)); //7

// 如果形参只有一个,可以省略小括号
const tofix = (v) => {
    return v.toFixed(2);
}
const tofix2 = v => v.toFixed(2); // 省略小括号、省略大括号模式【一个形参、函数体一句返回】
console.log(tofix(3.1415926)); // 3.14
console.log(tofix2(3.1415926)); // 3.14

在传统的函数当中,是谁将函数调用起来,函数内部的this关键字就指向谁,但是在箭头函数就不拥有这个特性。

箭头函数不绑定this关键字(箭头函数没有自己的this),箭头函数中的this,指向的是函数定义位置的上下文this。

// 箭头函数不绑定this,箭头函数没有自己的this官架子
// 如果在箭头函数中使用this
// this关键字将指向箭头函数定义位置中的this
const obj = {
    name: "mla"
};
// 箭头函数定义在fn函数中,箭头函数的this将指向fn函数中的this
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
const runFn = fn.call(obj);
runFn(); // {name: "mla"} {name: "mla"}
```
```javascript
/*
对象是不能产生作用域的,
say方法定义在全局作用域中,
因此this.age 返回undefined
*/
var obj = {
    age: 20,
    say: () => {
        console.log(this.age);// 函数定义的位置属于全局作用域,此时的this指向window
    }
}
obj.say(); // undefined

%