Question

我有一个范围问题，在这段代码中，当我调用 mp3.playlistInfo() ${titlePlayList} 是 undefined。

如何在 ${titlePlaylist} 中使用 playlistInfo: function()

const mp3 = {
    createPlaylist: function() {
        let titlePlaylist = prompt("Choose a name: ")
        console.log(`Your playlist name is: ${titlePlaylist}`)
    },
    playlistInfo: function() {
        console.log(`Already listening ${titlePlaylist}`)
    }
}


mp3.createPlaylist();
mp3.playlistInfo();

Answer 1

问题在于您没有在其他函数可访问的任何位置声明 titlePlaylist。您只需将其添加到您创建的 mp3 对象即可解决此问题。

不过，如果您打算采用这种方法，我建议使用 Class 而不是 Object。

基于简单 Object 的方法

const mp3 = {
    titlePlaylist: null,
    createPlaylist: function() {
        this.titlePlaylist = prompt("Choose a name: ")
        console.log(`Your playlist name is: ${this.titlePlaylist}`)
    },
    playlistInfo: function() {
        console.log(`Already listening ${this.titlePlaylist}`)
    }
}


mp3.createPlaylist();
mp3.playlistInfo();

基于简单 Class 的方法

class MP3 {
  constructor() {
    this.titlePlaylist = prompt("Choose a name: ");
    this.playlistInfo();
  }
  playlistInfo() {
    console.log(`Already listening ${this.titlePlaylist}`)
  }
}

const mp3 = new MP3();

Answer 2

由于 mp3 是一个对象，您需要将 titlePlaylist 设置为 mp3 的属性。然后在 createPlaylist 中，您需要将用户的返回值设置为 titlePlaylist 的值。然后您可以在 titlePlaylist 中访问 playlistInfo，如果您使用箭头函数，您可以跳过使用 this.titlePlaylist：

const mp3 = {
  titlePlaylist: "",
  createPlaylist: () => {
    titlePlaylist = prompt("Choose a name: ");
    console.log(`Your playlist name is: ${titlePlaylist}`);
  },
  playlistInfo: () => {
    console.log(`Already listening ${titlePlaylist}`);
  },
};

mp3.createPlaylist();
mp3.playlistInfo();

您还可以利用闭包来实现此功能，该闭包允许您获取和设置范围在原始函数体内的变量：

const mp3Closure = () => {
  let titlePlaylist = "";
  return {
    createPlaylist: () => {
      titlePlaylist = prompt("Choose a name: ");
      console.log(`Your playlist name is: ${titlePlaylist}`);
    },
    playlistInfo: () => {
      console.log(`Already listening ${titlePlaylist}`);
    },
  };
};

const mp3WithClosure = mp3Closure();
mp3WithClosure.createPlaylist();
mp3WithClosure.playlistInfo();

Answer 3

OOP 变体（如果需要）：

class MP3 {
  constructor(titlePlaylist) {
    this.titlePlaylist = titlePlaylist;
  }
  titlePlaylist = null;
  get titlePlaylist() {
    return this.titlePlaylist;
  }
  set titlePlaylist(value) {
    this.titlePlaylist = value;
  }
  createPlaylist = () => {
    this.titlePlaylist = prompt("Choose a name: ");
    console.log(`Your playlist name is: ${this.titlePlaylist}`);
  };
  playlistInfo = () => {
    console.log(`Already listening ${this.titlePlaylist}`);
  };
}
const mp3 = new MP3("");

mp3.createPlaylist();
mp3.playlistInfo();

在其他函数中使用函数内的变量

3 个答案: