vue箭头函数

一、箭头函数定义

　　基本语法：

　　ES6允许使用“箭头”（=>）定义函数

var f = a = > a

//等同于
var f = function(a){
   return a;  
}

　　如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

二、箭头函数的this对象

　　函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

 1  var name = '张三'；   
 2  var person = {
 3         name:'小马哥',
           age:18,　　
 4         fav:function(){        
 5             console.log(this)
 6             console.log(this.name)
 7         }
 8     }
 9 
10     person.fav();

　　我们发现，打印的结果为

　　

　　此时this指向的是使用它的对象，也就是person对象

 var person2 = {
    name:'annie',
    age:18,
    fav: ()=>{
         // 当前this指向了定义时所在的对象（window）
         console.log(this);
      }
    }

 person2.fav();

　　打印的结果：

　　

　　使用箭头函数，它表示定义时所在的对象window。

　　再看一个例子吧！

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

　　上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

三、箭头函数的arguments对象

　　不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

         var person3 = {
             name:'annie',
             age:18,
             fav: ()=>{
                 console.log(argument);
             }
         }

         person3.fav('把妹','把爷');

　　报出如下错误：

　　

 四、函数的扩展

　　可以给函数设置默认参数

剩余参数：function func(a,...b){}
func(11,22,33)
则：b=[22,33]
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8     <script>
 9 //        function func1(x) {
10 //            alert(x)
11 //        }
12 //        func1(12306);
13 
14 //        function func2(x=12,y=90,z=6) {   //默认参数
15 //            alert(x+y+z)  //108
16 //        }
17 //       func2()
18 //
19 //        function func3(x) {   //默认参数
20 //            console.log(x)  //11
21 //        }
22 //       func3(11,22,33,44)
23 //
24 //        function func4(x,...y) {   //默认参数
25 //            console.log(y)
26 //        }
27 //       func4(11,22,33.22,44);  //多余的参数给了y
28 //
29         function func4(x,...y) {   //默认参数
30             console.log(x,y)//{a: 22, b: 33}  []
31         }
32 //       func4({a:22,b:33});
33        func4(x=2,y=300);  //2,300
34     </script>
35 </head>
36 <body>
37 
38 </body>
39 </html>

 

posted @ 2019-07-22 19:54  WiseAdministrator  阅读(1251)  评论(0)    收藏  举报