箭頭函式中this的指向
阿新 • • 發佈：2022-05-30
箭頭函式
箭頭函式的宣告以及使用方法
- 多引數宣告
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 }) }) } }