淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来讲一下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指向外层作用域的特点。但也要注意,它不能作为构造函数使用。