本文同步自我得博客:http://www.joeray61.com
JS中的箭头
箭头在JS里并不算是个新鲜的玩意儿,一直以来,JS都支持-->
这样的箭头。
很早的时候有些浏览器还不支持JS,当时的人们为了兼容这些浏览器,需要这样写JS:
<script language="javascript">
<!--
alert('Joe');
// -->
</script>
这段代码在不支持JS的浏览器里会被解读成2个未知标签和一段html注释。在支持JS的浏览器里,JS引擎会把<!--
和-->
看成是单行注释的开始。需要说明的是,-->
仅仅是在一行的开头才能表示这一行是注释,其余情况-->
是一个操作符,表示goes to的含义。
function countdown(n) {
while (n --> 0) {
alert(n);
}
}
这段代码确实能够正常运行哦。当你给countdown
函数传入一个大于0的参数时,这个循环能够一直运行,直到n变为0为止。
此箭头非彼箭头,以上讲述的-->
并不是我们今天要讲的主角,大家权当拓展下JS知识,下面让我们进入正题。
特性介绍
箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法。
// ES5
var double = nums.map(function (v) {
return 2 * n;
});
// ES6
var double = nums.map(v => 2 * n);
箭头函数简化了原先的函数语法,不需要再写function
,如果函数体只有一行代码的话连return
都不用写,这个特性对于热衷于简化流程和工作的程序员来说相当对胃口。
使用箭头函数有几个注意点:
函数体
箭头函数支持两种模式的函数体写法,我们姑且叫他简洁函数体和块级函数体。
// 简洁函数体
var fn = x => x * x;
// 块级函数体
var fn = (x, y) => {return x + y;};
简介函数体默认会把表达式的结果返回,块级函数体需要手动return
。如果想要返回一个对象又想使用简洁函数体的话,需要这么写:
var fn = () => ({});
fn(); // {}
如果写成var fn = () => {};
,那么执行fn()
只能返回undefined
。
this
用function生成的函数会定义一个自己的this
,而箭头函数没有自己的this
,而是会和上一层的作用域共享this
。
function Person() {
this.age = 0;
var self = this;
setTimeout(function () {
self.age++;
console.log(self.age);
}, 1000);
}
var p = new Person();
这段代码里,setTimeout
的参数function
中需要操作外层的age
属性,必须要把this
赋值给self
,然后通过self
来获取到age
如果使用箭头函数则省事很多,代码如下:
function Person() {
this.age = 0;
setTimeout(() => {
this.age++;
console.log(this.age);
}, 1000);
}
var p = new Person();
apply & call
由于箭头函数已经绑定了this
的值,即使使用apply
或者call
也不能只能起到传参数的作用,并不能强行改变箭头函数里的this
。
var adder = {
x: 1,
add1: function (y) {
var fn = v => v + this.x;
return fn(y);
},
add2: function (y) {
var fn = v => v + this.x;
var whatever = {
x: 2
};
return fn.call(whatever, y);
}
};
adder.add1(1); // 2
adder.add2(1); // 仍然是2
arguments
普通函数里arguments
代表了调用时传入的参数,但是箭头函数不然,在箭头函数中无法使用arguments
当然,ES6
中也有办法可以让箭头函数像普通函数一样使用类似于arguments
这样的类数组对象
var fn = (...rest) => rest[0];
fn(2); // 2
...rest
也是ES6
的一个新特性,之后会介绍。
不能被new
箭头函数不能与new
关键字一起使用,会报错
var Fn = () => {
this.a = 1;
};
var f = new Fn(); // Error
使用场景
在我看来,箭头函数几乎可以完全取代function
,除非是函数需要进行递归或者需要可变的this
对象,其他场景我认为都可以使用箭头函数。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。