js 箭头函数 ES6 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>箭头函数</title>
</head>
<body>
<!-- <script type="text/javascript">
    //ES5中
    function f(a){
        return a;
    }
    console.log( f(100) );
    //ES6 箭头函数
    //1.具有一个参数并直接返回的函数
    var f1 = a => a;
    console.log(typeof f1);
    console.log( f1(200) );
    //2.没有参数的需要用在箭头前加上小括号
    // function f2(){return '来了老弟';}
    var f2 = () => '来了老弟';
    console.log( f2() );
    //3.多个参数需要用到小括号，参数间逗号间隔
    var f3 = (a, b) => a+b;
    console.log(f3(3,4));//7
    //4.函数体多条语句需要用到大括号
    var f4 = (a, b) => {
          console.log('来了老弟');
          return a+b;
    }
    console.log(f4(5,6));//11

    //5.返回对象时需要用小括号包起来，因为大括号被占用解释为代码块
    var f5 = () => {
          return ({"name":"老弟", "age":40});
    }

    // var f5 = () => ({"name":"老弟", "age":40});
    console.log(f5());
</script> -->

<input type="button" value="点击" id="btn">
<script>
    // 6.使用箭头函数作为事件处理函数
    // document.getElementById('btn').onclick = function(evt){
 //          console.log(evt);//evt 事件对象
    // }
    document.getElementById('btn').onclick = evt=>{
          console.log(evt);//evt 事件对象
    }
</script>
<script type="text/javascript">
    //7.赋值为对象的方法
    var obj = {};
    // obj.say = () => {return "hello,我是obj的say方法";}
    obj.say = () => "hello,我是obj的say方法";
    console.log(obj.say());

    //8.回调函数
/*    function f1(){
        console.log(200);
    }
    function f2(f){
        //f 其实就是f1
        f();
    }
    f2(f1);
    //f1就是被当做回调函数*/
    //先定义f6函数，函数内部 调用f
    var f6 = (f)=>{
        console.log( f(100) );
    };
    //定义回调函数f7
    // 
    var f7 = a=>a;
    //调用f6 将f7作为参数
    f6(f7);

    // f6(a=>a);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>箭头函数注意点</title>
</head>
<body>
<script type="text/javascript">
    //1.typeof 判断箭头函数 结果为function
    // var f1 = a=>a;
    // console.log(typeof f1);//'function'

    //2.instanceof 判断结果为true  箭头函数也是Function构造函数的实例
    // var f1 = a=>a;
    // console.log(f1 instanceof Function);//true


    //3.箭头函数中的this指向  箭头函数 不改变this指向（不绑定this）
    //对象方法中嵌套函数时，this指向
    /*var obj = {
          say:function(){
              console.log(this);//this就是obj
          }
    };
    obj.say();*/


    /*var obj = {
          say:function(){
              console.log(this);//this就是obj
              //非箭头函数
              var f1 = function(){
                console.log(this);//window
            };
              f1();
          }
    };
    obj.say();*/


    // var obj = {
    //       say:function(){
    //           console.log(this);//this就是obj
    //           //非箭头函数
    //           var _this = this;
    //           var f1 = function(){
    //               console.log(_this);//obj
    //             console.log(this);//window
    //         };
    //           f1();
    //       }
    // };
    // obj.say();

    //箭头函数 不改变this指向（不绑定this）
/*    var obj = {
          say:function(){
              console.log(this);//this就是obj
              //箭头函数
            var f2 = ()=>{
                console.log(this);
            };
              f2();
          }
    };
    obj.say();*/

    // 4.箭头函数不能做构造函数，不能用new实例化，也没有prototype属性
    // var Person = ()=>{};
    // console.log(Person.prototype);//undefined
    // var p = new Person();//报错

    // 5.箭头函数内部没有arguments
    // var f1 = ()=>{
    //     console.log(arguments);
    // };
    // f1(); //报错
    // 
    // 6.箭头函数也支持默认参数、剩余参数、解构
    var f1 = (x=1,y)=>{
          console.log(x, y); //3 4
    };
    f1();
    f1(3,4);

    var f2 = (...x)=>{
          console.log(x); //[3,4]
    };
    f2(3,4);
    var f3 = ([x,y]=[])=>{
          console.log(x, y); //3 4
    };
    f3([3,4]);
</script>
</body>
</html>

 

posted @ 2021-02-25 15:40  华北业余选手  阅读(22)  评论(0)    收藏  举报