箭头函数[ArrowFunction]和普通函数的区别
语法不同
正常语法
const sum = (x, y) => {
return x + y;
};
1.如果函数体中只有一句话,而是return是啥,则可以省略大括号和return
const sum = (x, y) => x + y;
2.如果只有一个形参,可以省略小括号
const sum = x => x + 10
浅浅的来个小练习
function fn(x) {
return function (y) {
return x + y;
}
}
//更改为箭头函数
const fn = x => y => x + y;
箭头函数没有arguments
箭头函数中没有arguments,但是可以使用ES6中的剩余运算符[...]来获取实参集合
const fn = (...params) => {
// console.log(arguments); //Uncaught ReferenceError: arguments is not defined
// console.log(params); //[10,20,30]
// @1 arguments如果存在,获取的集合也是类数组集合,不能直接使用数组的方法
// @2 params获取的是数组集合,可以直接使用数组的方法的
};
fn(10, 20, 30);
箭头函数中没有自己的THIS,函数中出现的THIS是其上级上下文中的THIS
普通函数
let obj = {
name: 'zhufeng',
// 等价于“fn: function () {}”,ES6的新语法规范
fn() {
// this->obj
let self = this;//然后存起来
setTimeout(function () {
// this->window 对于普通回调函数“匿名函数”来说,一般方法中的this都是window,除非在触发回调函数执行的时候,我们自己(或者浏览器)做过一些特殊的处理,更改过其this...
//console.log(this.name);//this=>window
//想要obj的那么
console.log(self.name);//'zhufeng'
}, 1000);
}
};
obj.fn();
箭头函数
let obj = {
name: '东方淼淼',
fn() {
// this->obj
setTimeout(() => {
// this->没有,用的是上级上下文中的
console.log(this.name);//obj.name
}, 1000);
}
};
obj.fn();
好用但是不要乱用
let obj = {
name: '东方淼淼',
fn: () => {
// this->没有,用的是全局上下文中的this:“window”
console.log(this);
}
};
obj.fn();//此时this就不是Obj 因为用了箭头函数