zoukankan      html  css  js  c++  java
  • 关于箭头函数

    一、为什么存在

    const Person = {
        'name': 'little bear',
        'age': 18,
        'sayHello': function () {
          setInterval(function () {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
          }, 1000)
        }
      }
      Person.sayHello()

    因为setInterval执行的时候,是在全局作用域下的,所有this指向的是全局window,而window上没有name和age,所以输出的是undefined。

    通常的写法是缓存this,然后在setInterval中用缓存的this进行操作,如下:

     const Person = {
        'name': 'little bear',
        'age': 18,
        'sayHello': function () {
         let self = this
          setInterval(function () {
            console.log('我叫' + self.name + '我今年' + self.age + '岁!')
          }, 1000)
        }
      }
      const sayHelloFun = Person.sayHello
      sayHelloFun()

    二、和普通函数的区别 

      从上面的例子中,我们已经可以看出箭头函数的优势。
      和普通函数相比,箭头函数主要就是以下两个方面的特点(不绑定this,arguments;更简化的代码语法)

      1、不绑定this

        什么叫不绑定this,我个人的理解为箭头函数的this其实就是在定义的时候就确定好的,以后不管怎么调用这个箭头函数,箭头函数的this始终为定义时的this 
    我们还是以前面的那个setInterval代码为例:

    const Person = {
        'name': 'little bear',
        'age': 18,
        'sayHello': function () {
          setInterval(function () {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
          }, 1000)
        }
    Person.sayHello()

        当Person.sayHello()去执行setInterval的时候,是在全局作用下执行的所有setInterval回调函数的this就为全局对象。es3-5中的函数this的值和调用这个函数的上下文有关。(注意是调用)
    我们用箭头函数重写上诉函数:

    const Person = {
        'name': 'little bear',
        'age': 18,
        'sayHello': () => {
          setInterval(() => {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
          }, 1000)
        }
    Person.sayHello()

        输出的还是undefined。为什么呢??
        因为我把方法写在了对象里,而对象的括号是不能封闭作用域的。所以此时的this还是指向全局对象。
        所以,通过以上的错误可以提醒我们,最好不要用箭头函数作为对象的方法。
        我们需要重新举一个例子,如下:

    function Person () {
      this.name = 'little bear',
      this.age = 18
      let self = this
      setInterval(function sayHello () {
        console.log('我叫' + self.name + '我今年' + self.age + '岁!')
      }, 1000)
    }
    let p = new Person()

      2、不绑定arguments

        箭头函数还有一个比较有特点的地方就是其不绑定arguments,即如果你在箭头函数中使用arguments参数不能得到想要的内容。

    let arrowfunc = () => console.log(arguments.length)
    arrowfunc()
    //output 
    arguments is not defined

        所以在箭头函数中我们是不能直接使用arguments对象的,但是如果我们又想获得函数的参数怎么办呢?
    我们可以使用剩余参数来取代arguments剩余参数详情

  • 相关阅读:
    【26.09%】【codeforces 579C】A Problem about Polyline
    【水水水】【洛谷 U4566】赛车比赛
    【24.58%】【BZOJ 1001】狼抓兔子
    【心情】2016ICPC青岛站打铁记
    【record】11.7..11.13
    Identifying a distributed denial of service (DDOS) attack within a network and defending against such an attack
    在页面所有元素加载完成之后执行某个js函数
    day38 01-Spring框架的概
    day37 10-SH整合的案例练习
    day37 09-Struts2和Hibernate整合环境搭建
  • 原文地址:https://www.cnblogs.com/helloNico/p/10455170.html
Copyright © 2011-2022 走看看