美文网首页
箭头函数

箭头函数

作者: jasmine_6aa1 | 来源:发表于2020-04-28 21:21 被阅读0次

    1,箭头函数定义

    const arrowFunction = () => {
          
    }
    

    2,Es6 中箭头函数参数与返回值简写

    当参数只有一个时,我们可以省略()
    const arrowFunction =  num => {   }
    
    当参数不是一个时,不可以省略()
    const arrowFunction =  (num1,num2) => {   }
    
    当返回值是一行代码时,可以省略 { return }
    const arrowFunction =  (num1,num2) => num1 +num2
    
    当返回值是多行代码时,不可以省略 { return }
    const arrowFunction =  (num1,num2) => {  }
    

    补充

    const dome =  () => console.log( 'hello world' )
    dome(); // hello world
    console.log( dome() ); // undefined  因为 dome 函数没有return 值
    

    3,箭头函数中 this 指向

    注:箭头函数中的this,指向是上下文的this指向,继承它的父级this值

    1,使用方式:最常用的是 setTimeout() 、setTimeout()
    2,使用场景

    直接在window下,调用

    setTimeout(function() {
        //不管什么方式调这个都是通过 call() 方法,把this指向window
            console.log(this); // window,
          }, 2000);
    
    setTimeout(() => {// 直接在window下进行调用,this指向window
          console.log(this) // window
        }, 2000) 
    
    

    当在面向对象中定义
    箭头函数中this查找方法:向外层作用域中,一层一层查找this,直到有this的定义

    const updata = {
         setTimeout(function (){
             console.log(this) // window 
          }, 2000) 
          setTimeout(() => {//setTimeout方法中没有this,所以只能到updata中找,这里的this指向updata
              console.log(this) // updata
           }, 2000) 
     }
    

    4,箭头函数与普通函数的区别

    • this 指向不同,箭头函数不绑定this,但会捕获上下文的this,作为自己的this
    • 箭头函数不绑定arguments, 取而代之的是用rest参数解决
    • 箭头函数是匿名函数,所以不能作为构造函数,因此也不能使用new
    • 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响
    • 箭头函数没有原型属性

    相关文章

      网友评论

          本文标题:箭头函数

          本文链接:https://www.haomeiwen.com/subject/ordbwhtx.html