箭头函数
箭头函数是对正规函数的语法简化,它没有this
、arguments
等属性,也不能当作构造函数使用,在使用中尤其要注意箭头函数没有自己的this,它的this是绑定的父作用域上下文,箭头函数主要用在匿名函数的地方,写起来更简单,比如
let arr = ["hi","it's ok","i'm tracy mcgrady"];
arr.map(function(ele){
return ele.length;
})
//[ 2, 7, 17 ]
//可以简化为
arr.map((ele)=>{
return ele.length;
})
//只有一个参数,可以去掉参数的括号
arr.map(ele=>{
return ele.length;
})
//函数体只有一行代码并且是return statement,可去掉return及花括号
arr.map(ele=>ele.length)
//应用解构赋值当作函数参数,length是元素string的length,而x是随意起的变量名
arr.map(({length:x})=>x)
//上一步中,x改为length变为{length:length},根据object的缩写简化为{length}
arr.map(({length})=>length)
更多用法,请参考Arrow function expressions
普通函数中的this
在介绍箭头函数中的this之前,先看一下普通函数中的this,普通函数中的this一共3种情况
- 构造函数中的this,指的是new出来的对象
- 严格模式下,函数中的this是undefined
- 作为对象的方法被调用,那么this是调用者
下边举例说明
//构造函数中的this,指的是new出来的对象
function Person( name){
this.name = name;
this.x=function(){
return this;
}
}
let p = new Person("mcgrady");
console.log(p===p.x()) //true
//严格模式下,函数中的this是undefined
"use strict"
function f(){
console.log(this); //undefined
}
f();
//作为对象的方法被调用,那么this是调用者
var obj2 = {
name:"mcgrady",
f2:function(){
console.log(this.name)
}
}
obj2.f2() //输出mcgrady
函数作为对象的方法被调用,this是obj2,所以输出mcgrady。
箭头函数中的this
var obj = {
f:()=>{console.log(this.a)}
}
this.a = "hi";
obj.f() //输出hi
f
是箭头函数,箭头函数没有this,它的this是绑定了父作用域(全局作用域)上下文,父作用域的a="hi"
,所以输出hi。
通过babel编译一下,更能看出箭头函数的本质,能很直观的看出箭头函数的this绑定的事父作用域。
var _this = void 0;
var obj = {
f: function f() {
console.log(_this.a);
}
};
(void 0).a = "hi";
obj.f(); //输出hi
再来看一个,函数中内嵌嵌套函数
function f(){
var ff=()=>{
console.log(this.x)
}
}
babel编译后,很明显箭头函数中的this也是取的父作用域的上下文
function f() {
var _this = this;
var ff = function ff() {
console.log(_this.x);
};
}
如果理解了上文中的this,也就懂了为什么Vue中的methods
、computed
、watch
都不允许用箭头函数。