ES6 06箭头函数和this

  // 要点:1.箭头函数 2.this绑定

 

// 一.箭头函数 // 1.ES6新增一个使用(=>)箭头符号定义函数的语法特征 // let fn=name=>name; // console.log(fn('Mr.Lee'));

 

// 翻译成函数代码为: // let fn=function(name){ //     return name; // }

 

// 2.箭头函数也可以传递两个或以上的参数,并实现运算后返回 // let fn=(x,y)=>x+y; // console.log(fn(10,20));

 

// 翻译成函数代码: // let fn=function(x,y){ //    return x+y; // }

 

// 3.若定义的函数,不需要传参,可用()括号方式直接返回 // let fn=()=>'Mr.Lee'; // console.log(fn());

 

// 翻译成函数: // let fn=function(){ //     return 'Mr.Lee'; // }

 

// 4.函数体需要更复杂的操作,可以将箭头符号右边使用传统函数体 // let fn=(x,y)=>{ //     return x+y; // } // console.log(fn(10,20));

 

// 5.若箭头符号右边是对象,返回的是对象,则需要用圆括号包含着 // let fn=name=>({name:name,age:100}); // console.log(fn('Mr.Lee').name);

 

// 翻译成函数 // let fn=function(name){ //     return{ //         name:name, //         age:100 //     }   // }; // console.log(fn('Mr.Lee').name);

 

// 6.若箭头符号左边是对象作为参数,右边是对象的属性运算,也支持 // let fn=({name,age})=>name+','+age; // console.log(fn({name:'Mr.Lee',age:100}));

 

// 7.自我立即执行函数,也可以使用箭头函数来创建 // ((name)=>{ //     console.log(name); // })('Mr.Lee');

 

// 翻译成函数代码 // (function(name){ //     console.log(name); // })('Mr.Lee');

 

// 二.绑定this // 1.ES6之前有个this指向的问题 //  let obj={ //      name:'Mr.Lee', //      age:100, //      fn:function(){ // //         console.log(this); // //         setTimeout(function(){ // //             console.log(this.name+','+this.age);undefined // //         },500) //       let that=this; //       setTimeout(()=>{ //                 console.log(that.name);                 //             },500) //      } //  } //  obj.fn();

 

// 2.上例,this全局指向window,在某个对象内部指向当前对象 // 3.当obj对象下包含类似setTimeout函数内部,this指向出问题 // 4.Web环境下,它指向window,node环境下它指向setTimeout // 5.通俗做法,将this在 setTimeout外部进行赋值保存 // 6.箭头函数的出现,彻底解决this在内部的指向问题,直接指向我们所需要的 // 7.箭头函数中this是最外层定义的函数绑定,不受内部影响 // let obj={ //     name:'Mr.Lee', //     age:100, //     fn:function(){ //         setTimeout(()=>{ //             console.log(this); //             console.log(this.name+','+this.age); //         },500) //     } // } // obj.fn();
上一篇:es6总结


下一篇:es6 1