美文网首页
ES6——函数默认参数、箭头函数

ES6——函数默认参数、箭头函数

作者: 向上而活 | 来源:发表于2018-06-15 21:49 被阅读0次

函数默认参数

之前,在调用函数有形参的函数时,如果没有传递参数,或者传递的参数个数小于函数形参的个数时,会默认什麽都不输出,给函数设置默认参数后,当出现这种情况时,会显示事先设置的默认值。例如:

function a(c,b){

console.log(c,b);

}

a();// undefined undefined

a('我是');//我是 undefined

给b设置默认值:

function a(c,b='小杨'){

console.log(c,b);

}

a();// undefined "小杨"

a('我是');//我是 小杨

箭头函数

* 作用: 定义匿名函数

* 基本语法:

  * 没有参数: () => console.log('xxxx')

  * 一个参数: i => i+2

  * 大于一个参数: (i,j) => i+j

  * 函数体不用大括号: 默认返回结果

  * 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回

* 使用场景: 多用来定义回调函数

* 箭头函数的特点:

    1、简洁

    2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this

  3、扩展理解: 箭头函数的this看外层的是否有函数,

        如果有,外层函数的this就是内部箭头函数的this,

        如果没有,则this是window。

```

<script type="text/javascript">

  let fun = function () {

      console.log('fun()');

  };

  fun();

  //没有形参,并且函数体只有一条语句

  let fun1 = () => console.log('fun1()');

    fun1();

  console.log(fun1());

    //一个形参,并且函数体只有一条语句

    let fun2 = x => x;

    console.log(fun2(5));

    //形参是一个以上

    let fun3 = (x, y) => x + y;

    console.log(fun3(25, 39));//64

    //函数体有多条语句

    let fun4 = (x, y) => {

        console.log(x, y);

        return x + y;

    };

    console.log(fun4(34, 48));//82

    setTimeout(() => {

        console.log(this);

    },1000)

  let btn = document.getElementById('btn');

  //没有箭头函数

  btn.onclick = function () {

      console.log(this);//btn

  };

  //箭头函数

  let btn2 = document.getElementById('btn2');

    let obj = {

        name : 'kobe',

        age : 39,

        getName : () => {

            btn2.onclick = () => {

                console.log(this);//obj

            };

        }

    };

    obj.getName();

function Person() {

    this.obj = {

        showThis : () => {

            console.log(this);

        }

    }

}

    let fun5 = new Person();

    fun5.obj.showThis();

</script>

```

注意:

1、this问题,箭头函数里,this指向函数所在的对象,不再是运行所在的对象。例:

let json={

     id:1,

    show:function(){

                  setTimeout(function(){

                        alert(this.id);//undefined  因为setTimeout是由window执行的,这里的this指向window,而window中没有id

                    },2000)

    }

};

json.show();

更改为箭头函数:

let json={

     id:1,

    show:function(){

                  setTimeout(()=>{

                        alert(this.id);//1  因为箭头函数里,this指向函数所在的对像

                    },2000)

    }

};

json.show();

2、箭头函数里没有 arguments,可以用'...'运算符完美替代。

3、箭头函数不能当构造函数

相关文章

网友评论

      本文标题:ES6——函数默认参数、箭头函数

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