Javascript 使用typeof检查时，具有赋值的变量仍然未定义

我正在为一个网站做一个简单的汇率按钮，我正在用一个变量下的一个设定值来测试它。尽管如此，我仍然会遇到错误，因为当我检查这个变量时，它显示为未定义。原因可能是什么？我知道这是基本的东西，但我不知道这里会有什么问题。谢谢你帮我解决这个问题

组件1.ts：

public price: number = 500;
public exchangeUsd;
public priceUsd;

countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(this.price) //here the typeof shows undefined
      priceUsd = exchangeUsd * this.price //and it also makes this simple multiplication impossible
    })
}

---

Stackblitz:

无法测试它，但主要是因为

。然后（函数（数据）

。将其替换为箭头函数

.then((data) => {
let exchangeUsd = data.rates[0].mid
}

---

无法测试它，但主要是因为

。然后（函数（数据）

。将其替换为箭头函数

.then((data) => {
let exchangeUsd = data.rates[0].mid
}

---

您在console.log中找到了this.price，它应该是price

以下代码适用于您：

public price: number = 500;
public exchangeUsd;
public priceUsd;

function countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(price) //here the typeof shows undefined
      priceUsd = exchangeUsd * price //and it also makes this simple multiplication impossible
    })
}

---

您在console.log中找到了this.price，它应该是price

以下代码适用于您：

public price: number = 500;
public exchangeUsd;
public priceUsd;

function countUsd() {
  fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
    .then((resp) => resp.json())
    .then(function(data) {
      let exchangeUsd = data.rates[0].mid
      console.log("Exchange rate: " + exchangeUsd)
      console.log(price) //here the typeof shows undefined
      priceUsd = exchangeUsd * price //and it also makes this simple multiplication impossible
    })
}

---

这是一个作用域问题。您有两个选项。或者在

中使用箭头函数，然后（…）

或者通过使用变量捕获作用域来将其带到函数：

选项1：箭头功能

函数countUsd（）{
取回（“https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
.然后（（resp）=>resp.json（））
。然后（（数据）=>{
让exchangeUsd=data.rates[0].mid
控制台日志（“汇率：+exchangeUsd”）
console.log（price）//这里的typeof显示未定义
priceUsd=exchangeUsd*price//这也使得这个简单的乘法变得不可能
})
}

选项2：使用变量捕获范围

函数countUsd（）{
const classScope=this；
取回（“https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
.然后（（resp）=>resp.json（））
.then（功能（数据）{
让exchangeUsd=data.rates[0].mid
控制台日志（“汇率：+exchangeUsd”）
console.log（classScope.price）//这里typeof显示未定义
priceUsd=exchangeUsd*price//这也使得这个简单的乘法变得不可能
})
}

这是一个作用域问题。您有两个选项。或者在

中使用箭头函数，然后（…）

或者通过使用变量捕获作用域来将其带到函数：

选项1：箭头功能

函数countUsd（）{
取回（“https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
.然后（（resp）=>resp.json（））
。然后（（数据）=>{
让exchangeUsd=data.rates[0].mid
控制台日志（“汇率：+exchangeUsd”）
console.log（price）//这里的typeof显示未定义
priceUsd=exchangeUsd*price//这也使得这个简单的乘法变得不可能
})
}

选项2：使用变量捕获范围

函数countUsd（）{
const classScope=this；
取回（“https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json")
.然后（（resp）=>resp.json（））
.then（功能（数据）{
让exchangeUsd=data.rates[0].mid
控制台日志（“汇率：+exchangeUsd”）
console.log（classScope.price）//这里typeof显示未定义
priceUsd=exchangeUsd*price//这也使得这个简单的乘法变得不可能
})
}

谢谢！它解决了问题，但我不确定原因：）谢谢！它解决了问题，但我不确定原因：）