箭头函数的简单理解

如果函数的参数就一个,可以不使用(),当没有参数时也要有一个空括号。

函数体如果只有一行就不需要{},表达式会自动return返回值。如果不止一行就要用{}来包裹起来同时还需要关键字return来返回表达式的值,没有return返回值就是undefined。

简单的箭头函数

//正常函数
var fn = function (a){

    return a;
};
fn(3);

//箭头函数
var fn = a =>a;

fn(3);


//使函数变得更简洁节省代码量

如果不需要参数及多个参数就使用圆括号代表参数的部分

//正常函数
var fn = function(){

    return 5;
}


var fn = function(a,b){
    return a-b;
}

//箭头函数

var fn =()=>5;

var fn=(a,b)=>a-b;

如果箭头函数代码大于一行,就需要用{}包裹起来

var  fn = (a,b){
    a=a+1;
    return a-b;


}



fn(1,1);

箭头函数会改变this的指向

//call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数
//在计时器中
function fn() {
	setTimeout(function() {
		console.log(this);
		console.log("name: ",this.name);
		}, 100);
	}
	var name="zhangsan";
 
	fn();                   //this指向window对象, zhangsan  
 
	fn.call({name:"lisi"});        //this指向window对象,zhangsan 





//箭头函数
function fn() {
	setTimeout(() =>{
		 console.log(this);
		 console.log("fn: ",this.fn);
	}, 100);
}
 var fn="zhangsan";
 fn();           //this指向window
 fn.call({name:"lisi"});       //this指向{name:"lisi"}对象
发布了11 篇原创文章 · 获赞 12 · 访问量 467

猜你喜欢

转载自blog.csdn.net/weixin_45481771/article/details/100824818