ES6 箭头函数及箭头函数this指向

最新推荐文章于 2025-05-29 08:04:29 发布

原创最新推荐文章于 2025-05-29 08:04:29 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#箭头函数 #箭头函数this指向

ES6 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了JavaScript中箭头函数的语法特点与使用场景，包括参数省略、函数体简化、返回值处理、this指向规则及常见误区。通过具体实例，帮助读者掌握箭头函数的正确用法。

箭头函数

箭头左边是形参列表

var fa = (a) => {};//只有一个参数的时候，形参外边的括号可以省略
fa();

箭头右边是函数体

//不写{}函数体的时候，默认直接返回内容
var fa = () => 10;
var fa = () => [1, 2, 3];
var fa = () => 'hello';

var a = 1,
	b = 2;
var fa = () => (a > b ? a : b);
console.log(fa()); //2

var fa = () => {
	title: '周四';
	// return 10;
};
console.log(fa()); //undefined

返回对象的时候js会把{}解析成函数体而不是对象，所以需要增加圆括号消除歧义

报错
var fa = () => {
	title: '周四',
	age: 22,
};

var fa = () => ({
	title: '周四',
	age: 22,
});
console.log(fa()); //{title: "周四", age: 22}

this指向

1.常规使用call改变当前调用者
	var f = function() {
		console.log(this);//{title: "周四"}
	};
	let obj = {
		title: '周四',
	};
	f.call(obj);
2. 匿名函数中的this指向
	let obj1 = {
	title: '周四',
	film: function() {
			console.log(this); //{title: "周四", film: ƒ}
			var _this = this;
			return function() {
				console.log(_this.title); //周四
				console.log(this); //window
			};
		},
	};
	obj1.film()();
3. 箭头函数中的this指向
	let obj = {
		title: '周四',
		film: () => {
			console.log(this); //window
			return function() {
				console.log(this); //window
			};
		},
	};

this指向几种情景

箭头函数不绑定当前调用者只与上下文环境有关

//情景一
var f = () => {
	console.log(this);//window
	return () => {
		console.log(this);//window
	};
};
f.call('宝宝')();

//情景二
var f = () => {
	console.log(this);//window
	return function() {
		console.log(this);//宝宝
	};
};
let a = f.call('baobao');
a.call('宝宝');

//情景三
var f = function() {
	console.log(this);//baobao
	return () => {
		console.log(this);//baobao
	};
};
let a = f.call('baobao');
a.call('宝宝');

//情景四
var f = function() {
	console.log(this); //baobao
	return function() {
		console.log(this); //宝宝
	};
};
let a = f.call('baobao');
a.call('宝宝');

注意

1、箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target；
2、箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，相当于只是传入了参数，对this没有影响；
3、箭头函数不绑定arguments，取而代之用rest参数…解决；
4、箭头函数当方法使用的时候，没有定义this绑定；
5、箭头函数不能作为构造函数，和 new 一起用就会抛出错误；
6、箭头函数没有原型属性；
7、不能简单返回对象字面量；