前端面试系列-JavaScript-箭头函数(与普通函数的区别)

最新推荐文章于 2024-08-15 21:19:47 发布

LYFlied

最新推荐文章于 2024-08-15 21:19:47 发布

阅读量5.1k

点赞数 15

分类专栏： javaScript 文章标签： javascript 前端函数面试箭头函数

本文链接：https://blog.csdn.net/qq_39903567/article/details/115208019

版权

本文详细探讨了JavaScript中的箭头函数与普通函数的主要区别，包括箭头函数不创建自己的this、this指向固定、不受call()、apply()、bind()影响、不绑定arguments、不能作为构造函数、无法使用原型属性以及不能换行等特性。通过实例解释了这些差异，帮助理解箭头函数的使用场景和限制。

摘要由CSDN通过智能技术生成

一、箭头函数

// 箭头函数
let fun = (name) => {
    // 函数体
    return `Hello ${name} !`;
};

// 等同于
let fun = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

二、与普通函数的区别

1.箭头函数不会创建自己的this

箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

来看个例子：

var id = 'Global';

function fun1() {
    // setTimeout中使用普通函数
    setTimeout(function(){
        console.log(this.id);
    }, 2000);
}

function fun2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log(this.id);
    }, 2000)
}

fun1.call({id: 'Obj'});     // 'Global'

fun2.call({id: 'Obj'});     // 'Obj'