今天写代码的时候遇到了一个很有趣的问题，先看看下面这几行代码（“//”后的是输出结果）
var obj = {
id: "awesome"，
cool: function coolFn(){
console.log( this.id );
}
};
var id = "not awesome";
obj.cool(); //awesome
setTimeout(obj.cool, 1000); //not awesome
是不是超级不可思议？按照我们思维，两行都应该输出awesome才对啊！可是为什么第二个调用输出的确实全局变量id的值呢？
这是因为我们在使用setTimeout函数的时候，所调用的函数cool失去了同它自己的this之间的绑定，它使用的是setTimeout()函数上下文中的this（这里的this指的就是window，当前窗口）。
先看看我们常用的解决方法：
var obj = {
id: "awesome",
cool: function(){
console.log(this.id);
}
};
var id = "not awesome";
setTimeout(obj.cool.apply(obj), 1000); // awesome
setTimeout(obj.cool.call(obj), 1000); // awesome
就是添加apply或者call函数绑定对象，但是这样的方法我们常常会忘记，下面介绍 胖箭头 的方法：
var obj2 = {
id: "awesome",
cool: function coolFn(){
setTimeout(()=>{
console.log(this.id);
}, 100);
}
};
var id = "not awesome";
obj2.cool(); //awesome
在这个例子中胖箭头的作用还不是很明显，看下面这个例子就非常明显了：
使用胖箭头之前
function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}
我们看一下输出结果：
var b = new Counter();
// NaN
// NaN
// NaN
// ...
结果并非我们想要的计数器效果，让我们看看使用胖箭头会怎样呢？
使用胖箭头之后
function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...
哇！超棒是不是！
那胖箭头到底怎么使用呢？又是为什么会有这样的特点呢？
胖箭头基础语法
这个函数有多个参数，并且函数里面的表达式不止一条：
(param1, param2, …, paramN) => { statements }当函数只有单句表达式时，可以省略
{}
(param1, param2, …, paramN) => expression
此时会有一个隐含的返回值，等同于: (param1, param2, …, paramN) => { return expression; }当函数参数只有一个时，有下面两种写法
(singleParam) => { statements }
singleParam => { statements }若这个函数没有参数时
() => { statements }
胖箭头高级语法
- 若要返回一个对象，就要注意，如果是单表达式，像下面这样写就会报错
// SyntaxError
x => { foo: x }
因为这样和函数体的{...}有语法冲突，所以要改为：
x => ({ foo: x })
- 若函数参数是可变的或者默认的，依旧是支持的！
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
例如：
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
- 函数参数列表中的结构（Destructuring）也是支持的！
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();
// 6
引入胖箭头有两个方面的作用：让我们的函数变得超级简短看上去更专业，而且从一开始的例子看出胖箭头是不绑定
this的！
更短的函数
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
materials.map(function(material) {
return material.length;
}); // [8, 6, 7, 9]
materials.map((material) => {
return material.length;
}); // [8, 6, 7, 9]
materials.map(material => material.length); // [8, 6, 7, 9]
不绑定arguments
下面的例子得在非严格模式下运行，才看得到结果哦！
var arguments = 42;
var arr = () => arguments;
console.log(arr()); // 42
function foo() {
var f = (i) => arguments[0]+i;
// foo函数的间接参数绑定
return f(2);
}
console.log(foo(1)); // 3
这里foo()函数中的arguments[0]指的是foo()函数传进来的参数（这里使用的是我们上面提到的“胖箭头高级语法”中参数不定的语法）。
但是我们一般这样用剩余参数来使用arguments对象：
function foo() {
var f = (...args) => args[0];
return f(2);
}
foo(1);
// 2
不绑定this
在胖箭头出现之前，每个新定义的函数都有它自己的this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被称为“对象方法”则为基础对象），而this实在是一个讨厌的东西，常常让我头疼不已*
让我们想想开头提到的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth;
// this指向window或undefined
};
return fn();
}
};
console.log(obj.getAge());
现在用胖箭头修改这个例子：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth;
// this指向obj对象
return fn();
}
};
console.log(obj.getAge()); // 27(2017 - 1990 = 27)
胖箭头完全修复了this的执行，this总是指向词法作用域，也就是外层调用者obj。
扫一扫关注ComputerStudyBar哦
[图片上传失败...(image-a4954a-1512058168001)]
