es6新增的箭头函数

箭头和普通函数的区别是什么?

1.第一个区别就是写法上的区别 箭头函数省略了声明函数的关键字function 在函数和代码块之间用一个=>代替

2.箭头函数中的this始终指向箭头函数声明时所在的对象

3.普通函数中的this指向调用函数的对象

例:

<script>

function fn() {

      console.log(this)

    }

fn()(这种调用等同于window.fn(),省略了window,此时函数this指向window


 let obj = {

      name: 'zhangsan',

      fun() {

        console.log(this)

      }

    }

    obj.fun()(函数被obj调用,所以此是this指向obj实例对象


  var fn = () => {

      console.log(this)

    }

    fn()(箭头函数中的this指向始终指向箭头函数声明时所在的对象,函数在window中声明,所以this指向window)

</script>


箭头函数的写法都有哪些?

第一种写法 当箭头函数只接受一个参数 并且返回值是这个参数的时候,当箭头函数有且仅有一个参数时可以省略() 

let fn = a => a

    // 上面的箭头函数等价于下面的这种写法

    let fn = function(a) {

      return a

    }

第二种写法 当箭头函数只接受一个参数 并且返回的是一个简单的逻辑的时候

let fn = a => a+1

 // 上面的箭头函数等价于下面的这种写法

    let fu = function(a) {

      return a + 1

    }

   第三种写法是当箭头函数接受多个数据 并且返回一个简单的逻辑的时候

 let fn = (a, b, c) => a + b + c 

 // 上面的箭头函数等价于下面的这种写法

    let fn = function(a, b, c) {

      return a + b + c

    }

箭头函数的第四种写法 如果使用箭头函数只是想单纯的返回一个对象 则需要给对象添加()

let fn = () => ({name: 'zhangsan', age: 15})

箭头的函数的第五种写法

 let fn = (a, b, c) => {

      console.log(a + b + c)

    }

    fn(1, 2, 3)

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

推荐阅读更多精彩内容