关于箭头函数的思考
自从有了ES6箭头函数这个灵活的功能,现在写函数都习惯写成箭头函数格式
() => {}
然而如果不理解箭头函数的原理,滥用它也会造成很大的影响。
思考下面这个问题
let func = value => console.log(value)
<!-- 区别 -->
let func = function(value) {
console.log(value)
}
我们到平台上测试一下, 显然两者不等。
let func = value => console.log(value)
// 等同于
"use strict";
var func = function func(value) {
return console.log(value);
};
而 console.log()
方法返回 undefined
return undefined
与没有返回值一样。所以效果上问题中两种写法没有差异。
let func = value => value
// 等同于
let func = value => {
return value
}
// 等同于
var func = function func(value) {
return value;
};
如果箭头函数的代码块部分多于一条语句
,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => {
console.log('多条语句情况');
return num1 + num2;
}
那如果我使用了箭头
,使用了大括号
,没使用return
呢?
var sum = (num1, num2) => {
console.log('多条语句情况');
num1+num2
}
<!-- 等于-->
'use strict';
var sum = function sum(num1, num2) {
console.log('多条语句情况');
num1 + num2; // 这条语句没有任何作用
};
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象
,必须在对象外面加上括号
let getInfo = name => ({ name: name, job: "moving bricks" });
使用箭头函数必须要有返回值吗?
// 如果箭头函数只有一行语句,且不需要返回值
let fn = () => void doesNotReturn(); // void
箭头函数表达式:没有自己的 this arguments super new.target, 不能用作构造函数,没有prototype属性,不能用作生成器
箭头函数不会创建自己的 this, 它只会从自己作用域链的上一层继承this 这点很重要。如下面示例,箭头函数内的this的作用域上一层即 Person
函数内的 this
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| 正确地指向person 对象
}, 1000);
}
var p = new Person();
箭头函数没有自己的 this
指针, call() apply() bind()
调用的时候, 第一个参数会被忽略 (--- 对于这个,我有疑惑。第一个参数会被忽略是指原先调用 call
方法的 fun.call(thisArg, arg1, arg2, ...)
的 thisArg
会被忽略呢?还是 arg1
会被忽略呢? 我们来看栗子
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, a);
},
addTest: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, 23, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2
console.log(adder.addThruCall('a')); // 输出 24 (23+1)
很明显了,第一个参数会被忽略 是忽略 call
方法里的第一个参数(好像是我在思考的时候想多了,这很明显呀)
参考资源
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。