js中箭头函数和普通函数的区别-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1037 天，文章内容可能已经过时。

1.箭头函数比普通函数更加简洁
2.箭头函数的this
3.call()、apply()、bind()等方法不能改变箭头函数中的this指向
4.箭头函数不能作为构造函数
5.箭头函数没有arguments
6.箭头函数没有prototype
7.原型函数不能使用箭头函数

1.箭头函数比普通函数更加简洁

箭头函数不需要使用function关键字来创建函数

// 普通函数
function test() {}

// 箭头函数
const test = () => {};

1
2
3
4
5

如果只有一个参数，可以省去参数的括号，但是如果没有参数或者有多个参数不可以省略

// 普通函数
function test(a) {}

// 箭头函数
const test = a => {};

1
2
3
4
5

如果返回值只有一个语句，则可以省略 {} 和 return

// 普通函数
function test(a, b) {
	return a + b;
}

// 箭头函数
const test = (a, b) => a + b;

1
2
3
4
5
6
7

如果不需要返回值，且只有一个语句，可以在语句前面加一个void

// 箭头函数
const test = () => void doesNotReturn();

1
2

如果返回值是一个对象，则必须加上一个()

// 普通函数
function test() {
	return { a: 1, b: 2 };
}

// 箭头函数
const test = () => { a: 1, b: 2 }; // 报错
const test = () => ({ a: 1, b: 2 }); // 不报错

1
2
3
4
5
6
7
8

对象的函数属性简写

const obj = {
	// 普通函数
	test: function () {
		return { a: 1, b: 2 };
	},
	// 箭头函数
	test: () => ({ a: 1, b: 2 }),
	// 简写
	test() {
		return { a: 1, b: 2 };
	},
};

1
2
3
4
5
6
7
8
9
10
11
12

2.箭头函数的this

对于普通函数来说，this指向的是函数运行时所在的对象，而这对于箭头函数来说并不成立。

箭头函数没有自己的this，内部的this就是定义时上层作用域的this，也就是说箭头函数的this是固定的，而普通函数的this则是可以改变的
无论箭头函数嵌套多少层，this都指向外部的对象

例如：

var a = 1;

function test() {
	// 普通函数
	setTimeout(function () {
		console.log(this.a);
	}, 10);
}

test.call({ a: 10 }); // 1

test(); // 1

1
2
3
4
5
6
7
8
9
10
11
12

var a = 1;

function test() {
	// 箭头函数
	setTimeout(() => {
		console.log(this.a);
	}, 10);
}

test.call({ a: 10 }); // 10

test(); // 1

1
2
3
4
5
6
7
8
9
10
11
12

可以看到第一个普通函数的this总是指向运行时所在的对象，所以打印出来的都是1，而第二个箭头函数，this总是指向函数定义生效时所在的对象，call把test的this指向了{a: 10}，所以打印出10

function Timer() {
	this.a = 0;
	this.b = 0;
	// 箭头函数
	setTimeout(() => this.a++, 0);
	// 普通函数
	setTimeout(function () {
		this.b++;
	}, 0);
}

var timer = new Timer();

setTimeout(() => console.log("a: ", timer.a), 0); // 1
setTimeout(() => console.log("b: ", timer.b), 0); // 0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

箭头函数中的this指向的是timer，所以打印出来的a+1后为1，而第二个普通函数的this指向的是全局，所以timer中的b并没有改变

const obj = {
	a: 10,
	say: () => {
		console.log(this.a);
	},
	say1: function () {
		console.log(this.a);
	},
};

obj.say(); // undefined
obj.say1(); // 10

1
2
3
4
5
6
7
8
9
10
11
12

obj.say1()中的this指向的是调用者，也就是obj，因此此时的this.a = 10，而obj.say()，由于箭头函数没有自己的this，会继承父作用域中的this，而在obj.say()执行的时候，此时的作用域是window，而window中并没有a，所以打印出undefined。所以，在对象中定义的函数中使用箭头函数是不合理的

3.call()、apply()、bind()等方法不能改变箭头函数中的this指向

call()、apply()、bind()等方法都是用来改变this指向的，但是箭头函数中并没有自己的this，所以没有办法改变箭头函数this的指向

const obj = {
	a: 10,
	say: function () {
		let fn = () => console.log(this.a);
		let obj1 = {
			a: 11,
		};
		return fn.call(obj1);
	},
};

obj.say(); // 10

1
2
3
4
5
6
7
8
9
10
11
12

可以看到如果fn.call()成功改变了this的指向，那么打印出来的应该是11，而实际上打印出来的是10，说明call没有成功改变this的指向

4.箭头函数不能作为构造函数

function Person(name, age) {}

const person = new Person("sjx", 24);

// new生成实例的过程
// 1.创建一个空对象
let p = {};

// 2.将空对象p的原型链指向构造函数Person的原型
p.__proto__ = Person.prototype;

// 3.将Person的this指向p
Person.call(p);

1
2
3
4
5
6
7
8
9
10
11
12
13

以上是一个构造函数通过new生成实例的过程，生成对象实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this，因此call没办法改变箭头函数的指向，因此无法将Person的this指向p，因为箭头函数不能作为构造函数，同时也不能通过new操作符来调用构造函数。

5.箭头函数没有arguments

function test1() {
	console.log(arguments);
}

test1(1, 2);

const test = () => {
	console.log(arguments);
};

test(1, 2);

1
2
3
4
5
6
7
8
9
10
11

箭头函数没有arguments

可以看到在箭头函数中打印arguments报错了

解决办法：使用展开运算符

function test1() {
	console.log(arguments);
}

test1(1, 2);

const test = (...arg) => {
	console.log(arg);
};

test(1, 2);

1
2
3
4
5
6
7
8
9
10
11

6.箭头函数没有prototype

function test1() {}

console.log(test1.prototype); // {constructor: ƒ}

const test = () => {};

console.log(test.prototype); // undefined

1
2
3
4
5
6
7

可以看到打印出来的prototype为undefined

7.原型函数不能使用箭头函数

var name = "小明";

function Person(name) {
	this.name = name;
}

Person.prototype.say = () => console.log(this.name);

const person = new Person("sjx");

person.say(); // 小明

1
2
3
4
5
6
7
8
9
10
11

原型函数中this指向全局，不会指向构造函数Person，所以打印出来的是全局中的name小明