一文讲透:箭头函数、普通函数到底有什么区别?

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

箭头函数没有自己的this,与外层函数保持一致

所有函数在执行时,会创建一个函数执行上下文,普通函数的执行上下文中会有一个变量 this,而箭头函数没有。

箭头函数中如果出现了 this ,它会永远去拿定义时、作用域链上、最近的那个 this,比如下面的demo中,取的就是全局执行环境中的this,指向全局对象。


var id = 'Global'

// 箭头函数定义在全局作用域

let fun1 = () => {

  console.log(this.id)

}

fun1() // 'Global'

// this的指向不会改变,永远指向Window对象

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

思考题:下面的代码会输出什么?


var id = 'Global'

function fun1() {

  // setTimeout中使用普通函数

  setTimeout(function fun3() {

    console.log(this.id)

  }, 2000)

}

function fun2() {

  // setTimeout中使用箭头函数

  setTimeout(() => {

    console.log(this.id)

  }, 2000)

}

fun1() // 'Global'

fun2() // 'Global'

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

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

  1. fun3 本身有 this,因为setTimout 使得 fun3 是在全局上下文中执行,这个 this 指向全局执行环境

  2. 同理,setTimout 使得箭头函数是在全局上下文中执行,但是箭头函数本身没有 this,它会沿着作用域链查找,找到fun2中创建的this,也指向全局执行环境

  3. fun1.call 调用过程中,修改了 fun1 的 this 指向,但fun3 本身也创建有 this,setTimeout使得这个 this 指向全局执行环境

  4. fun1.call 调用过程中,修改了 fun1 的 this 指向,箭头函数没有 this,按照作用域链找到 fun1 的 this,于是最后指向{id: 'Obj'}

箭头函数不能作为构造函数

因为箭头函数没有自己的 this 变量,我们就没有办法修改 this 的指向,所以也不可以将其作为构造函数、它也没有 prototype 对象。


let Fun = (name, age) => {

  this.name = name

  this.age = age

}

// 报错

let p = new Fun('cao', 24)

箭头函数没有 arguments 对象

大概很多人都没用arguments对象,它是在所有普通函数中都可用的一个局部变量。

代表函数调用时传递的参数,arguments 对象不是一个数组,是一个类数组。它除了length 属性和索引之外,没有任何数组属性,比如slice等方法。

所以通常会使用使用 Array.prototype.slice.call(arguments)/[...arguments] 的方式,将它转换成一个数组


let showArguments = function () {

  console.log(arguments) // Arguments(2) ['params1', 'params2', callee: ƒ, Symbol(Symbol.iterator): ƒ]

  console.log(Array.prototype.slice.call(arguments)) //  ['params1', 'params2']

}

showArguments('params1', 'params2')

箭头函数和普通函数共有的length属性

这部分不属于区别,但写到这里想补充一下。这也是一个不太常见的属性,做过一些手撕题的应该都使用过。

函数的 length 属性,是指形参的个数(准确说是:第一个具有默认值之前的参数个数,并且不包括剩余参数个数。看不懂括号内的可以先跳过。)

与之相对应的是, arguments.length 指的实际参数的个数。


const showLength = function(a, b, c, d){

  console.log(`实际参数的个数:${arguments.length}`)

}

console.log(`形参的个数:${showLength.length}`) //形参的个数:4

console.log(`形参的个数:${showLength.bind(this, '3').length}`) //形参的个数:3

showLength('1','2');// 实际参数的个数:2

showLength.call(this, '3') // 实际参数的个数:2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容