欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6:箭头函数(Arrow Function)

程序员文章站 2023-12-21 13:07:34
...

1.语法

通常书写匿名函数是这样的:

function (){
	//...
}

改写为箭头函数:

() => {
	//...
}

带参数的改写:

//单个参数
(x) => {
	//...
}
//单个参数可省略()
x => {
	//...
}
//多个参数
(x, y, z) => {
	//...
}

总结起来就是:
function去掉,()后加=>,一个参数可省略(),多个参数用逗号隔开

2.隐式返回

什么是隐式返回?
先看一下什么是显式返回:

function (x){
	return x*2;
}

其中的return语句就是显式返回
而隐式返回是箭头函数对显式返回的改写,上面的代码就可以改写为:

x => x*2

隐式返回极大简化了只要简单返回某些值的函数写法

3.this

有以下的代码:

const people = {
	name: 'Tom',
	say: function() {
		const sayHello = function() {
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印:“hello ”

添加两个 console.log(this) 来观察一下

const people = {
	name: 'Tom',
	say: function() {
		console.log(this);//people
		const sayHello = function() {
			console.log(this);//Window
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印:“hello ”

第一个thispeople这个对象,第二个则是Window,因为this是在运行时绑定, people.say() 调用了say方法,所以第一个this应该指向people,第二个console是在sayHello方法中,sayHello是一个独立的函数,它不是被people对象调用,所以this会指向Window

通常的解决方法是添加一个self = this语句,将下面的this改为self

const people = {
	name: 'Tom',
	say: function() {
		const self = this;
		const sayHello = function() {
			console.log('hello ' + self.name);
		}
		sayHello();
	}
}
people.say();//打印:“hello Tom”

而使用箭头函数可以直接解决这个问题:

const people = {
	name: 'Tom',
	say: function() {
		const sayHello = () => {
			console.log('hello ' + this.name);
		}
		sayHello();
	}
}
people.say();//打印:“hello Tom”

箭头函数没有自己的this值,其this值是继承父作用域。

4.不适用场景

1️⃣定义函数的方法,且直接使用this

const p1 = {
	name: 'Tom',
	showName: function() {
		console.log(this.name);
	}
}
p1.showName(); //Tom

const p2 = {    
	name: 'Tom',
	showName: () => {
		console.log(this.name);
	}
}
p2.showName(); //空

因为箭头函数this值继承父作用域,所以上面代码直接定义使用this的函数时,this实际指向的是Window
2️⃣需要动态this时,如addEventListener

<button id="helloBtn">click</button>
const button = document.getElementById('helloBtn');
button.addEventListener('click', () => {
     this.innerText = 'hello!';
}); //无法实现

3️⃣使用new 操作符prototype 属性

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

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

4️⃣使用Arguments 对象

相关标签: web前端 #es6

上一篇:

下一篇: