箭头函数中this的指向
箭头函数
箭头函数的声明以及使用方法
- 多参数声明
const sum = (num1, num2) => {
return num1 + num2
}
- 单参数声明
const power = num => {
return num * num
}
- 无参数声明
const aaa = ()=>{
}
- 函数中的代码数量多
const test = () => {
//1. 打印一个hello world
console.log('Hello world');
//2. 打印hello Vue.js
console.log('Hello Vue.js');
}
- 函数中代码数量少，简化写法
const mul = (num1, num2) => num1 + num2
箭头函数的指向问题
使用场景：一个函数作为另外一个函数的参数时、
结论：箭头函数中的this引用的就是最近作用域中的this
this函数是一层一层查找this，直到有this的定义
<body>
<script>
setTimeout(function () {
console.log(this);
}, 1000)
// this指向window
console.log(this);
setTimeout(() => {
console.log(this);
}, 1000)
// this指向window，向外找作用域
const obj = {
aaa() {
console.log(this);
setTimeout(function () {
console.log(this); //window
}, 1000)
setTimeout(() => {
console.log(this); //obj对象
})
}
}
obj.aaa()
</script>
</body>
-
练习
const bob = { aaa() { setTimeout(function () { setTimeout(function () { console.log(this); //window }) console.log(this); //window setTimeout(() => { console.log(this); //window }) }) setTimeout(() => { setTimeout(function () { console.log(this); //window }) setTimeout(() => { console.log(this); //obj }) }) } }
