箭头函数和普通函数的区别总结笔记

来吧小哒

已于 2022-08-08 13:52:54 修改

阅读量501

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

于 2021-11-26 11:30:57 首次发布

本文链接：https://blog.youkuaiyun.com/monkey_xiaoda/article/details/121555813

本文解析了箭头函数不能作为构造函数的原因，以及它与普通函数this指向的区别。讲解了普通函数的变量提升与箭头函数的对比，并通过实例说明了两者在实际编程中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、箭头函数不能作为构造函数使用，所以也不就没有new target（new target用来检测是否被用于构造函数，返回的是一个指向构造函数的引用）；

const arrowFn = (str) => {
    this.str = '箭头函数不能当做构造函数使用呀';
}

const newArrowFn = new arrowFn(); 

newArrowFn.str; // undefined;

2、this的指向：
普通函数：普通函数的this指向的是调用该函数的地方，全局下的普通函数指向window，严格模式下this指向为undefined；

function useStrict(){
  'use strict'
  console.log(this); // undefined
}

function useCommon(){
  console.log(this); // Window
}

const obj = {
    a:12,
    g:function(){
      console.log(this); // obj
    }
}

箭头函数：箭头函数中的this是在函数定义的时候就确定下来的，而不是在函数调用的时候确定的；箭头函数中的this指向父级作用域的执行上下文；（技巧：因为javascript中除了全局作用域，其他作用域都是由函数创建出来的，所以如果想确定this的指向，则找到离箭头函数最近的function,与该function平级的执行上下文中的this即是箭头函数中的this）

const obj = {
    a:12,
    f:() => {
      console.log(this); // Window
    },
    g:function(){
      return () => {
         console.log(this); // obj
      }
    }
}

3、普通函数可以实现变量提升，而箭头函数不行；

即：如果声明一个普通函数和箭头函数，调用普通函数既可以可在声明函数的上面调用又可以在这之后调用，而调用箭头函数的话只能在声明函数后面调用；