java1234开源博客系统
博客信息

es6箭头函数以及this

发布时间:『 2019-06-29 21:32』  博客类别:Vue.js  阅读(2505) 评论(0)

es6箭头函数


es6推出了箭头函数,用来简化定义匿名函数;


基本语法:

let func1=function(){
	console.log('普通无参匿名函数');
}
func1();

let func2=()=>console.log('箭头函数');
func2();

执行效果一样:

QQ鎴浘20190629195529.jpg


let func2=()=>console.log('箭头函数');

这个括号是方法参数,里面可以写形参;=>后面的内容是方法体;


假如有一个参数的时候,这么写:

let func3=(c)=>console.log('箭头函数,一个参数');

func3('参数一');


当然一个参数的时候,括号可以省略(我个人习惯,还是不省略,不然看着别扭)

let func4=c=>console.log('箭头函数,一个参数,括号可以省略');

func4('参数一');


// 两个或者两个以上参数情况 (括号不能省略)

let func5=(a,b)=>console.log(a,b);

func5(1,2);


// 箭头函数,只有一条语句,可以省略大括号{}

let func6=()=>{

console.log('箭头函数,只有一条语句,可以省略大括号{}');

}

func6();


// 函数体,多条语句,要用大括号{}

let func7=(a,b)=>{

let c=a+b;

return c;

}

console.log(func7(1,2));


// 特殊情况 假如不加花括号,表达式返回最终结果;

let func8=(a,b)=>a+b

console.log(func8(1,4));



// 重要特性 箭头函数没有this,所以this是定义的时候,外部所在的对象是它的this。不是调用的时候的this;

let name='marry';

let obj={

name:'jack',

age:20,

/*getName:()=>{

console.log(this.name)

}*/

getName:function(){

   /* document.getElementById('btn').onclick=()=>{

console.log(this)

}*/

console.log(this.name)

},

getName2:function(){

document.getElementById('btn').onclick=function(){

console.log(this)

}

console.log(this.name)

}

};

obj.getName();

obj.getName2();




关键字:   箭头函数     this  
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有