ES6函数参数

之前在看Vue2.0的时候，就被很多的箭头函数困扰，一直不知道是怎么回事，虽然箭头函数四个字在我耳边一直转圈，今天小编整理整理箭头函数里面的常见用法和表现形式，在这个Vue3.0已经到来的一段时间，希望大家也可以一起搭上箭头函数的大风飞起来。大家也可以关注我的微信公众号，蜗牛全栈。

一、es5中函数的声明方式

function sum(x,y){

    return x + y

}

console.log(sum(4,5)) // 9

let sum = function(x,y){

    return x + y

}

console.log(sum(4,5)) // 9

对于上面的两种方式，主要区别在于let 关键字声明函数的时候，不存在变量提升的问题（ps:具体可以参考小编的第一篇文章，关键字let和var的区别）

二、es6中的箭头函数：主要就是把function去掉，在参数和函数体之间用箭头分割

let sum = (x,y) => {

    return x+y

}

console.log(sum(3,4)) // 7

对于函数体只有一行代码的时候，上面代码可以简化为以下代码

let sum = (x,y) => x + y

对于返回值，可以省略return关键字并用圆括号扩起来

function addStr(str1,str2){

    return str1+str2

}

const addStr = (str1,str2) => (str1+str2)

// 以上两个函数功能是一样的，只是箭头函数在箭头右侧，省略了关键字return，并且在外面添加圆括号

三、箭头函数和普通函数之间的区别

1、this指向定义时所在的对象，而不是调用时所在的对象(箭头函数中没有this,this指向的是父级的this)

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

        oBtn.addEventListener("click",function(){

            console.log(this) // <button id="btn">点我</button>

        })

    </script>

  </body>

</html>

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(function(){

                // call apply bind改变this指向

               console.log(this) // Window

            },1000)

      })

</script>

  </body>

</html>

通过bind改变this指向

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(function(){

                console.log(this) // <button id="btn">点我</button>

            }.bind(this),1000)

        })

</script>

  </body>

</html>

箭头函数中的this指向

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(() => {

                console.log(this) // <button id="btn">点我</button>

            },1000)

        })

</script>

  </body>

</html>

2、不可以作为构造函数

function People(name,age){

    console.log(this) // People{}

    this.name = name

    this.age = age

}

let p1 = People("lilei",34)

console.log(p1) // People{name:"lilei",age:34}

let People = (name,age) => {

    this.name = name

    this.age = age

}

let p1 = People("lilei",34)

console.log(p1) // 报错 People is not a constrator

3、不可以使用arguments对象

let foo = function(){

    console.log(arguments)

}

console.log(foo(1,2,3)) // Arguments[1,2,3]

let foo = () => {

    console.log(arguments)

}

console.log(foo(1,2,3)) // Arguments is not defined

箭头函数兼容类似es5中arguments对象：通过rest参数

let foo = (...args) => {

    console.log(args)

}

console.log(foo(1,2,3)) // [1,2,3]

巴特西

ES6函数参数

最新文章

热门文章