箭头函数

1.单参数

1 2 3 4 5 6

function  cheng(a=3){ 　　 return  a*a; }   let  cheng = (a=3) => a*a;   // 箭头左边为参数  箭头右边为返回值 console.log(cheng(9));

 

2.多参数

1 2 3 4 5 6

function  add(a,b){ 　　 return  a+b; }   let  add = (a,b) => a+b;   // 默认返回值 console.log(add(3,9));

　　

3.无返回值

1 2 3 4 5 6

function  add(a,b){ 　　console.log(a+b); }   let  add = (a,b) => {console.log(a+b)};    // 如果没有返回值，需要加{} add(3,9);

　　

4.多行

1 2 3 4 5 6 7 8 9 10 11

function  add(a,b){ 　　console.log(a+b); 　　 return  a+b; }   let  add = (a,b) => { 　　console.log(a+b); 　　 return  a+b; }   console.log(add(3,9));

 

2.如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢？

 箭头函数内部没有constructor方法，也没有prototype，所有不支持new操作。但是它对this的处理与一般的普通函数不一样，箭头函数的this始终指向函数定义时的this,而非执行时。

1 2 3 4 5 6 7 8 9 10 11 12 13

var  obj = { 　　x:1, 　　func:  function (){ console.log( this .x) },   // 此处的 this 代表 obj 　　test:  function (){ 　　　　setTimeout( function (){ 　　　　　　alert( this );   // 因为使用了异步,在运行过程中，this发生了指针转移，不再指向obj,而是指向全局 Window对象 　　　　　　 // [object Window] 　　　　　　 this .func(); 　　　　},1000); 　　} };   obj.test();   // TypeError: this.func is not a function

 

//--------改为箭头函数

1 2 3 4 5 6 7 8 9 10 11 12

var  obj = { 　　x: 1, 　　func:  function (){ console.log( this .x) }, 　　test:  function (){ 　　　　setTimeout(() => { 　　　　　　alert( this );  // [object Object]  此处的this指向obj 　　　　　　 this .func(); 　　　　},1000); 　　} };   obj.test();   // 这回this就指向obj了