JavaScript学习笔记（二十六）——箭头函数
箭头函数
思考：什么是优雅降级 渐进增强？
只有下面这种写法时申明式：可以使用 bind()
function fn(){
}除此之外都是定义式，定义式的可以自调用。
1、基本语法：
参数 => 函数体
(参数) => {函数体}先看个例子：
let fn = (name, age) => {
return 'hello,' + name + '你' + age + '岁了';
}
var re = fn('marry', 20);
console.log(re);结果：
-
如果箭头函数里面有且只有一个返回值，可以直接指向返回的表达式。
let fn = (name, age) => 'hello,' + name + '你' + age + '岁了';
var re = fn('marry', 20);
console.log(re);结果不会有任何的改变。
-
只有一个参数时，可以省略小括号：
let fn = name => 'hello,' + name ;
var re = fn('marry');
console.log(re);结果：
-
没有参数时，不能省略：
let fn = () => 'hello';
var re = fn();
console.log(re); //hello对象中使用箭头函数，看作用域是谁启用的this就指向谁
var obj = {
name: "xx",
show: function() {
console.log(this); //this表示当前对象
},
say: () => {
console.log(this); //this表示全局window对象
}
}箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。
function a() {
setTimeout(function() {
console.log(this); //this始终指向全局Window对象
}, 100)
}
a.call({num: 200});
function b() {
setTimeout(() => {
console.log(this); //this绑定的是b函数中的this对象
}, 100);
}
b.call({num: 300});注意：箭头函数不可以作为构造函数，也就是不能使用 new 命令，否则会报错，这是就有了新技术：class
function Person() {
console.log(this);
}
new Person(); //Person {}
var People = ()=>{
console.log(this);
}
new People(); //TypeError: People is not a constructor箭头函数在参数中使用
var arr= [1,2,3];
arr = arr.map((a)=>a*a);
console.log(arr);箭头函数可以与解构一起使用
//变量为目标，返回值为源
let cal = (a, b) => {
return {
add: a+b,
sub: a-b,
mul: a*b,
div: a/b
};
}
let {add, sub, mul, div} = cal(10, 5);
//形参为目标，实参为源
var show = ({one, two}) => {
console.log(one + "---" + two);
}
show({one: "hello", two: "你好"});-
解决箭头函数中没有arguments 绑定的问题？
var fn=(a,...rest)=>{
console.log(rest);
}
fn(10,20,30); //[20, 30]-
call apply() bind()绑定问题？
var fn=()=>{
console.log(this);
}
var obj={name:'jack'}
fn.call(obj) //不报错，但是也不能改变内部的this
//bind()
var arr=[];
var obj={
name:'marry',
fn:function(){
console.log(this)
}.bind(arr)
}
obj.fn(); //报语法错误
结论：箭头函数的this不能被改变。
<script>
//法一
function tool(cb) {
cb()
}
var obj = {
name: "karen",
say: function () {
console.log(this.name);
},
makemoney: function () {
var that = this;
tool(function () {
console.log(that.name + '赚了钱', 1111111);
})
//本来的this指的是window，指定that后变为obj
}
};
obj.say();
obj.makemoney();
//法二
function tool(cb) {
cb()
}
var obj = {
name: "karen",
say: function () {
console.log(this.name);
},
makemoney: function () {
/* var that = this;
tool(function () {
console.log(that.name + '赚了钱', 1111111);
}) */
tool(() => {
console.log(this.name + '赚了钱', 1111111);
})
}
};
obj.say();
obj.makemoney();
</script>
2、适合使用的场景
ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。
所以，当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。
3、总结
-
要有个箭头
-
箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
-
箭头的后面是函数体；
-
-
箭头函数里面的this总是指向最靠近的function 内部的this；
-
对象里面的方法，尽可能不要使用箭头函数；
-
箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；
var show = (a, b, ...reset) => {
console.log(a + b);
console.log(reset);
}
show(1, 2, 3, 4, 5); //15
