函数定义的几种方式:
箭头函数: 也是一种定义函数的方式
- 定义函数的方式: function
const aa = function() {}
- 对象字面量中定义函数
const obj = {
bbb() {}
}
- ES6中的箭头函数
const cc = (参数列表) => {
}
const cc = () => {
}
箭头函数的参数和返回值
- 参数问题
- 放入两个参数
const sum = (num1,num2) => {
return num1 + num2
}
- 放入一个参数
const power = num => {
return num * num
}
- 在函数代码块中的使用
- 函数代码块中有多行代码
const test = () => {
console.log('Hello world');
console.log('Hello Vue');
}
- 函数代码块中只有一行代码,可以简写,会先执行箭头后的代码,最后返回返回值
const mul = (num1,num2) => num1 * num2
console.log(mul(10,20))
箭头函数中this的使用
什么时候使用箭头函数?例如:
setTimeout(function () {
console.log(this) //window
},1000)
setTimeout(() => {
console.log(this) // window
},1000)
问题: 箭头函数中的this是如何查找的?
结论: 向外层作用域中,一层层查找this, 直到有this的定义
const obj = {
aaa() {
setTimeout(function () {
console.log(this) // window
})
setTimeout(() => {
console.log(this) // obj对象
})
}
}
obj.aaa()
扩展练习
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this) // window
})
setTimeout(() => {
console.log(this) // window
})
})
setTimeout(() => {
setTimeout(function () {
console.log(this) // window
})
setTimeout(() =>{
console.log(this) // obj对象
})
})
}
}
obj.aaa()