箭头函数

2020-04-28  本文已影响0人  jasmine_6aa1

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,箭头函数与普通函数的区别

上一篇下一篇

猜你喜欢

热点阅读