回顾ES3,5
// 具名函数
function xxx(v1,v2){
console.log('函数体')
return v1 + v2
}
// 匿名函数
let fn = function (v1,v2){
console.log(‘函数体’)
return v1 + v2
}
匿名函数必须赋值才可以使用。或者使用立即执行函数的方式。
上面代码中示例匿名函数，可以拆分成三步看。
声明一个变量
let fn声明一个匿名函数。
将匿名函数作为值赋给变量fn。
然后再来看看ES6最新的箭头函数
箭头函数只能做赋值，不能当作声明
let fn = (v1,v2) =>{
console.log('函数体')
return v1+v2
}
以上就等价于上面的匿名函数
- 如果一个函数只有一个参数
let fn = v1 => {
console.log('函数体')
return v1
}
fn(11) // '函数体' 11
// 还是上面的例子，做个小改动。
let fn = v1 => {
console.log('函数体')
}
fn(1) // '函数体' undefined
// 并没有写入return语句，那么js就会默认帮你添加return undefined
- 如果你的函数体只有一句话，你可以不需要写花括号和return。
// 示例 let fn1 = (v1,v2) => { return v1+v2 }
// 可以写作如下方式
let fn = (v1,v2) => v1+v2
// 省略花括号以及return。当你这样写，实际上就默认return v1+v2所以连return 都可以省略掉。但是如果你习惯加花括号，你就必须加上前面的return语句。
- 最简化的箭头函数
let fn = v1 => v1 * 2
fn(2) // 4
箭头函数，传统函数，this
this是call 的第一个参数，this是call 的第一个参数，this是call 的第一个参数！！！
如何理解这句话。
看个例子:
var content = {
el : 'web',
init : function (){
console.log(this.el)
}
}
// content.init() 等价于
content.init.call(content) // this就指的是content。
ES3于ES6都支持this。
但是在ES6中，箭头函数的出现，弱化了this的用法。
关于传统函数和箭头函数。
function fn(){
console.log(this)
}
// 如果直接调用，fn()那么，会直接返回window。
fn.call({name : 'claus'}) // this指针指向了这个对象。 {name : 'claus'}所以打印的结果就是该对象。
let fn1 = () => {
console.log(this)
}
fn1.call({name : 'claus'}) // window... 并没有接受this参数。
let obj = {
name : 'claus',
sayName : (that) => {
console.log(that.name)
// 如果你直接打印this.name 箭头函数会报错，所以需要如果需要用this 可以传入一个形参来代替this，并且在外面调用的时候将这个this的指针传入即可。
}
}
obj.sayName(obj)
这就是箭头函数的好处，没有潜规则(隐藏的this是作为函数的第一个参数)，之前的function函数参数是会有一个this参数的。只不过讲this参数隐藏了而已。
箭头函数的优点。
亮出代码吧。
let arr = [1,2,3,4,5]
let arr2 = []
for (let i = 0; i < arr.length;i++){
arr2.push(arr[i] * arr[i])
}
console.log(arr2) // [1, 4, 9, 16, 25]
// 继续简化如下
let arr = [1,2,3,4,5]
let arr2 = arr.map(function (num){
return num * num
})
console.log(arr2)
// 箭头函数
let arr = [1,2,3,4,5]
let arr2 = arr.map(num => num * num)
console.log(arr2) // [1, 4, 9, 16, 25]
// 并且这种方式是可以叠加的。
let arr2 = arr.map(num => num * num)
.map(num => num + 1)
.map(num => num + num)
箭头函数让this变的可以理解。
箭头函数让代码更简洁。
