箭头函数相当于其他语言的 Lambda 表达式或闭包语法,箭头函数是普通函数的简化写法。箭头函数的语法格式如下
该箭头函数实际上相 当于定义了如下函数
function (paraml, param2 ,..., paramN) {
statements
}
如果箭头函数的执行体只有一条 return 语句 ,则允许 省略函数执行体的花括号 return键字。也就是说,如下两种语法有等同效果
(paraml , param2 , ..., paramN) => expression
//等同于 (paraml , param2 , ... , paramN) => { return expression; }
如果箭头函数的形参列表只有一个参数,则允许省略形参列表的圆括号 也就是说, 如下两种语法有等同效果:
(singlePararn) => { statements}
//等同于 singleParam => { statements }
下面代码示范了使用箭头函数代替传统函数
<script type="text/javascript">
var a = ["aaaa","bbbbb","ccccc","dd"];
//使用函数作为 map()方法 参数
var newArrl = arr.map(function(ele){
return ele.length;
});
// 使用箭头函数作为 map( )方法的参数
var newArr2 = arr.map((ele) => {
return ele.length;
});
// 由于箭头函数只有一个形参,可以省略形参列表的圆括号
//箭头函数的执行体只有一条 return 语句 ,可以省略 return 关键字
var newArr3 = arr.map(ele => ele.length);
console.log(newArr3);
//使用函数作为 forEach( )方法的参数
arr.forEach(function(ele) {
console.log(ele);
});
//使用箭头函数作为 forEach( )方法的参数
arr.forEach((ele) => {
console.log(ele);
});
// 于箭头函数只有一个形参,可以省略形参列表的圆括号
//箭头函数的执行体只有一条语句 ,可以省略执行体的花括号
arr.forEach(ele => console.log(ele));
</script>
如果函 数不需要形 ,那么箭 头函数的形参列表的圆括号不可以省略 例如如下程序
<script type= "text/javascript">
//定义箭头函数,将箭头函数赋值给
var f = () => {
console.l og( 测试箭头函数',) ;
console log( "函数结束 ;
}
// 执行f函数
f () ;
</script>
与普通函数不同的是,箭头函数并不拥有自己的 关键字——对于普通函数而 如果
程序通过 new 调用函数创建对象,那么该函数中的 this代表所创建的对象;如果直接调用普通函数,那么 该函数中的 this表全局对象 window
<script type="text/javascript">
function Person(){
//Person()作为构造器使用时, this 代表该构造器创建的对象
this.age = 0;
setInterval(function growUP(){
// 对于普通函数来说,直接执行该函数时, this 代表全局对象 (window)
//因此下面的 this 不同于 Person 构造器中的 this
console.log(this === window);
this.age++;
},1000);
}
var p = new Person();
setInterval(function(){
console.log(age);//此处访问p对象的 age, 将总是输出0
},1000);
</script>
箭头函数中的 总是代表包含箭头函数的上下文
如果直接在全局范围内定义箭头函数,那么箭头函数的上下文就是 window 本身,此时箭\头函数中 this代表全局对象 window