今天我们来讲一下JavaScript中的箭头函数,简称箭头函数。箭头函数是ES6中的新特性之一,可以大大简化函数的表达和书写方式,提升开发效率。
首先,让我们看一下箭头函数的语法:
(param1, param2, …, paramN) =>{ statements }
箭头函数和普通函数的最大区别在于箭头函数用“=>”来代替function关键字来定义函数,也就是说,箭头函数不需要写function关键字。
举个例子:
//普通函数 let func1 = function(a, b){ return a + b; } //箭头函数 let func2 = (a, b) =>a + b;
上面的例子中,我们可以看到箭头函数比普通函数简洁了很多,而且代码行数也减少了。箭头函数在只有一个返回值的情况下,甚至可以只写一条语句,这时候可以省略大括号并且省略return关键字。
除了语法简洁之外,箭头函数还可以不用使用this关键字,这是因为箭头函数没有自己的this,它的this指向的是包含它的函数的this。而对于普通函数来说,它的this指向的是调用它的对象。
举个例子:
let obj = { name: 'Tom', sayName: function(){ console.log(this.name); }, sayName2: () =>{ console.log(this); console.log(this.name); } } obj.sayName(); //输出:Tom obj.sayName2(); //输出:undefined
在上面的例子中,obj对象中有两个方法,一个是普通函数sayName,一个是箭头函数sayName2。我们可以看到,sayName输出的是obj本身的属性值Tom,而sayName2输出的是空undefined。这是因为箭头函数的this指向的是它外层的作用域,也就是全局作用域,而在全局作用域中没有name属性,所以输出了undefined。
另一个需要注意的地方是箭头函数不能作为构造函数来使用。如果将箭头函数作为构造函数来使用,会得到一个TypeError的错误提示。
举个例子:
let Person = (name, age) =>{ this.name = name; this.age = age; } let tom = new Person('Tom', 18); //TypeError
在上面的例子中,我们尝试定义一个Person类作为构造函数,再用new关键字来实例化一个对象。但是因为箭头函数不能作为构造函数使用,会抛出TypeError的错误。
总结一下,ES6中的箭头函数提供了一种更加简洁的函数表达方式,另外它还具有this指向外层作用域的特点。但也要注意,它不能作为构造函数使用。