第四课：ES6新语法：箭头函数（2021/4/21）

最新推荐文章于 2023-01-30 19:51:12 发布

原创最新推荐文章于 2023-01-30 19:51:12 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

js视频学习记录专栏收录该内容

39 篇文章

订阅专栏

本文介绍了ES6中的箭头函数，它简化了函数定义的语法。当函数体只包含一句返回语句时，可以省略大括号。特别地，箭头函数不绑定this，其this值取决于函数定义的位置。

一、箭头函数是用来简化函数定义语法的

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

// 在箭头函数中如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值函数体大括号可以省略

const sum = (n1,n2) =>{
        return n1 + n2;
}
// 可以简化为：
const sum = (n1,n2) => n1 + n2;
// 如果形参只有一个，可以省略小括号
function fn(v){
        return v;
}
const fn = v => v;

二、箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this
// this 关键字将指向箭头函数定义位置中的this
function fn(){
        console.log(this);
        return () =>{
                console.log(this);
        }

}
const obj = {name:'zhangshan'};

const resFn = fn.call(obj);

resFn();

// this 方法的函数
var obj = {
        age:20,
        // obj是对象，不能产生作用域，实际上，这个this指向了全局作用域
        // 箭头函数没有自己的this
        say: ()=>{
                console.log(this.age);
        }
}

obj.say(); //undefined
// 非箭头函数
var obj = {
        age:20,
        say:function(){
                console.log(this.age);
        }
}

obj.say(); //20