普通函数和箭头函数的区别

原创

用户10562852

发布于 2023-05-12 14:51:52

3650

发布于 2023-05-12 14:51:52

文章被收录于专栏：前端不难

1、this指向问题（重要）

MDN的描述是箭头函数不会创建自己的this他只会从自己的作用域链的上一层继承this，这里我们可以理解为this指向外层第一个普通函数（如果没有，则指向全局对象（可通过globalThis访问））；而普通函数中this指向其调用者。

let obj = {
    name: 'zs',
    fn: () => {
        // this指向上一级作用域链的this，此处就是 Window 对象（浏览器环境中）
        console.log(this) 
    }
    fn2: function() {
        return () => { console.log(this) }
    }
}
console.log(globalThis) // Window 
obj.fn() // Window 
obj.fn2()() // {name: 'zs', fn: ƒ, fn2: ƒ}

1、箭头函数中的this指向不可以修改，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this---译者注），他们的第一个参数会被忽略。（这种现象对于 bind 方法同样成立）

let name = 'win'
    let o = {count: 0}
    let obj = {
    fn: (a, b) => {
        console.log(this, a, b)
    }
}
// 可以传参但是第一个参数无效
obj.fn.apply(o, [1, 2]) // Window 1 2

2、不绑定有arguments

但是我们可以使用剩余参数

const fn = (...args) => {
    // console.log(arguments); // 报错：ReferenceError: arguments is not defined
    console.log(args); // [1, 2, 3]
}
fn(1, 2, 3)

3、不能和new一起用，会报错

也就是说箭头函数不能被用作构造函数

4、没有prototype

const Fn = () => {}
console.log(Fn.prototype) // undefined
let f = new Fn(); // Uncaught TypeError: Fn is not a constructor

以上就是关于箭头函数和普通函数的区别，最重要的就是关于this指向问题，有更多的箭头函数的知识大家可以看看MDN上的内容，里面有很详细的讲解，希望本篇文章能够帮助大家解决一些疑惑，感谢您的观看。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

登录后参与评论

0 条评论

热度