【ES6】箭头函数

一、使用方法

  • 箭头函数是ES6里面有个简写函数的语法方式
  • 重点:箭头函数只能简写函数表达式,不能简写声明式函数

1.1、基本用法

function fn(){};	//不能简写
const fun = function(){};	//可以简写
let obj = {
	fn :function(){};	//可以简写
}	
  • 语法:(函数的形参) => {函数体内要执行的代码}
const fn = function(a,b){
	console.log(a);
	console.log(b);
}
//可以使用箭头函数简写成
const fun = (a,b) => {
	console.log(a);
	console.log(b);
}
const obj = {
	fn : function(a,b){
		console.log(a);
		console.log(b);
	}
}
//可以使用箭头函数简写成
const obj2 = {
	fn : (a,b) =>{
		console.log(a);
		console.log(b);
	}
}

1.2、简写写法

  • 函数的形参只有一个的时候可以不写()其余情况必须写
const obj = {
	fn : () => {
		console.log('没有参数,必须写小括号');
	},
	fn2 : a => {
		console.log('一个形参,可以不写小括号');
	},
	fn3 : (a,b) => {
		console.log('两个或两个以上的参数,必须写小括号');
	}
}
  • 函数体只有一行代码的时候,可以不写{},并且会自动return
const obj = {
	fn : a => {
		return a + 10;
	},
	fun : a => a + 10;
}
console.log(fn(10));	//20
console.log(fun(10));	//20

1.3、其他用法

传参默认值

  • 我们在定义函数的时候,有的时候需要一个默认值出现
  • 就是当我不传递参数的时候,使用默认值,传递参数了就使用传递的参数
function fn(a){
	a = a || 10;
	console.log(a);
}
fn();	//不传递参数的时候,函数内部的 a 就是 10
fn(20);	//传递了参数 20 的时候,函数内部的 a 就是 20
  • 在ES6中我们可以直接把默认值写在函数的形参位置
function fn(a = 10){
	console.log(a);
}
fu();	// 不传递参数的时候,函数内部的 a 就是 10
fn(20);	// 传递了参数 20 的时候,函数内部的 a 就是 20
  • 这个默认值的方式箭头函数也可以使用
const fn = (a=10) => {
	console.log(a);
}
fn();   // 不传递参数的时候,函数内部的 a 就是 10
fn(20); // 传递了参数 20 的时候,函数内部的 a 就是 20
  • 注意:箭头函数如果你需要使用默认值的话,那么一个参数的时候也需要写()

作为方法使用

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}

在这里插入图片描述


通过 call 或 apply 调用

  • 由于 箭头函数没有自己的this指针
  • 通过 call() 或 apply() 方法调用一个函数时
  • 只能传递参数,且它的第一个this执向参数会被忽略
var name = 'Rose';
var obj = {name:'Jack'};

function fun(){
	console.log(this.name);
} 
fun()	// Rose
fun.call(obj);  // Jack
fun.apply(obj);  // Jack

var fn = ()=> console.log(this.name);
fn()	// Rose
fn.call(obj);  // Rose
fn.apply(obj);  // Rose

二、其特殊性

2.1、没有 this

  • 箭头函数内部没有 this ,箭头函数的 this 是上下文的 this
// 在箭头函数定义的位置往上数,这一行是可以打印 this 的
// 因为这里的 this 是window
// 所以箭头函数内部的 this 就是 window
const obj = {
	fn : function(){
		console.log(this);
	},
	//这个位置是箭头函数的上一行,但是不能打印出 this
	fun : ()=>{
		//箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
		console.log(this);
	}
}
obj.fn();	//Object
obj.fun();	//Window
- 按照我们之前的 this 指向来判断,两个都应该指向 obj
- 但是 fun 因为是箭头函数,使用this 不指向 obj ,而是指向 fun 的外侧obj的指向,就是 window

2.2、没有 super

  • super指向的是当前对象的原型对象
var obj1 = {
  method1() {
    console.log("method 1");
  }
}

var obj2 = {
  method2:() =>{
   super.method1();	// 报错:'super' keyword unexpected here
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2();

2.3、没有 prototype

var fn = () => {};
console.log(fn.prototype); // undefined

2.4、没有 arguments

  • 箭头函数内部没有arguments这个参数集合
const obj = {
	fn : function (){
		console.log(arguments);
	},
	fun : (){
		console.log(arguments);
	}
}
obj.fn(1,2,3);	//会打印一个伪数组[1,2,3]
obj.fun(1,2,3);	//会直接报错

2.5、不能用作构造函数 (没 new)

var fn = () => {};
var fun = new fn(); // TypeError: fn is not a constructor
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值