自我学习之es6(2)

   es6拓展了函数的一些方法:

  1:可以给函数一个默认的参数

function fn(a,b=7){
	console.log(a,b)
 }

fn(1)

这里调用fn函数的时候没有给 b传参数,但由于给形参设置过一个默认的值为7,所以最后打印出来a,b的值为1,7


2 :申明一个箭头函数,它是匿名的,可以给这个匿名函数传参

let a = (a,b,c=90)=>{
 	console.log(a,b,c)
 }

 a(1,2)


3:如果函数只有一个参数,可以不写括号

 let a = arg =>{
 	console.log(arg)
 }

  a(1)


4:箭头后面可以直接写返回值,这个返回值可以是字符串、数值、布尔值甚至是数组

let a =()=>"str";
 console.log(a());
 let a =()=>78;
 console.log(a());
let a =()=>true;
 console.log(a());
let a =(a,c)=>[1,2,a,c];
console.log(a(122))
这里给匿名函数传了2个参数a和c,箭头后面直接返回的是个数组,并传入a和c这2个参数,打印的时候只给a传了值,c没有传值,所以最后打印出来的是1,2,122,undefined


5:箭头函数后面的大括号里是放函数体,那如果想返回一个对象字面量,那么应该用一个括号括起来,否则会被当成一个函数体

let a=(a,c)=>({a:1,b:2,c:a,d:c});
console.log(a(122,'jdk'))

6:箭头函数里的this指向的是函数的上下文环境

我们先来看一种普通函数的情况

let obj={
	fn:function(){
		let a = function(){
			console.log(this);
		}
		a();
	}
}

obj.fn();

这里打印出来的this是window,因为是window去调用这个a

但如果是箭头函数,情况就不一样了

let obj={
	fn:function(){
		let a=()=>{
			console.log(this);
		}
		a();
	}
}
obj.fn();

这里打印出来的this指向的是obj这个函数,因为箭头函数的一个特性就是箭头函数里的this指向的是函数的上下文环境,这里的上下文环境就是这个fn方法,只要fn里的this指向什么,那箭头函数里的this就指向什么,为了印证这一点,我们可以打印出fn里的this,再和箭头函数里的this作比较

let obj={
	fn:function(){
		console.log(this,'fn');
		let _this=this;
		let a=()=>{
			console.log(this,'arrow');
			console.log(this===_this);
		}
		a();
	}
}
obj.fn();

打印出来后发现fn里的this和箭头函数里的this指向的都是obj,并且他们是完全相同的。那为什么fn的this也指向obj呢,因为现在是obj调用的这个fn,那这个fn肯定是指向obj的,那如果用一个新的变量去接收这个fn那情况又不同了

let obj={
	fn:function(){
		console.log(this,'fn');
		let _this=this;
		let a=()=>{
			console.log(this,'arrow');
			console.log(this===_this);
		}
		a();
	}
}

let newFn=obj.fn;
newFn();

如果是用一个newFn去接收obj里的这个函数,那newFn前面没有任何东西,所以就是window去调用的,所以fn里的this指向window,箭头函数里的this也指向了window

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值