箭头函数与普通函数

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

原创最新推荐文章于 2024-08-15 21:19:47 发布 · 206 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Js进阶专栏收录该内容

7 篇文章

订阅专栏

本文探讨了JavaScript中的箭头函数与普通函数的差异，包括this的指向规则。通过示例展示了在定时器中普通函数导致的this混乱问题，并如何使用箭头函数简化处理。总结了箭头函数的主要优势在于其this的绑定方式，以及更简洁的语法结构。

普通函数

  function fun(){
    return 100;
  }
  console.log(fun());

还可以写成

  const fun = function () {
    return 100;
  }
  console.log(fun());

箭头函数的写法

  const fun = () => {
    return 100;
  }
  console.log(fun());

还可以简写成

  const fun = () => 100;
  console.log(fun());

在箭头函数中，（）内是函数的参数，如（x,y），当函数只有一个参数时，可以省略（），{}中是函数体，当函数体只有一条返回值时，可以省略{}和ruturn；

箭头函数有什么好处？先看一段代码

  let obj = {
    name: "小明",
    age: 2,
    sayName() {
      console.log(`我是${this.name}`);
    }
  }
  obj.sayName();

先定义了一个obj对象，obj中有一个sayName方法输出name，这是调用obj.sayName()会输出'我是小明'，但如果给sayName加一个计时器

  let obj = {
    name: "小明",
    age: 2,
    sayName() {
      setTimeout(function () {
        console.log(`我是${this.name}`);
      }, 500)
    }
  }
  obj.sayName();

这是调用obj.sayName()就只能输出'我是'，为什么没有找到this.name呢？打印看一下this

发现sayName里的this会指向obj，而setTimeout里的this指向了Window，原因找到了，因为setTimeout是Window的方法，在es5中的通常采用传值的方式解决

    sayName() {
      let self = this;
      setTimeout(function () {
        console.log(`我是${self.name}`);
      }, 500)
    }

现在sayName中保存一份sayName的this，然后调用这个this就可以访问了。

如果换成箭头函数就简单了

    sayName() {
      setTimeout(() => {
        console.log(`我是${this.name}`);
      }, 500)
    }

箭头函数的this绑定的是当前的作用域。

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

普通函数，谁调用这个函数，this指向谁

箭头函数，在哪里定义函数，this指向谁