JavaScript中如何在对象的不同方法间共享变量解决undefined报错

你当前代码里的titlePlaylist是createPlaylist方法内部用let声明的局部变量，按照JavaScript词法作用域的规则，这个变量的可访问范围被严格限定在createPlaylist自身的函数执行作用域内，外部的playlistInfo方法根本无法穿透函数作用域读取到这个变量，因此引用时自然会返回undefined。

要让playlistInfo能读到createPlaylist里的播放列表名，核心是把需要复用的titlePlaylist存到两个方法的共同可访问上下文中，不要把它只锁在createPlaylist的局部作用域里。常见的实现方案有两种：

方案1：将变量存储为mp3对象的实例属性（最贴合现有代码的写法） #

由于两个方法都是mp3对象的内置方法，只要把获取到的播放列表名存到mp3对象自身的属性上，两个方法就可以通过this关键字共享这个值。
调整后的可运行代码：

const mp3 = {
    // 提前声明属性并赋初始值，避免方法调用顺序异常时读到undefined
    titlePlaylist: '',
    createPlaylist: function() {
        // 将prompt获取的结果直接赋值给对象自身的属性
        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();

注意：这种写法下不要把方法改成箭头函数形式，否则this的指向会脱离mp3对象，无法正确读取到存储的播放列表名。

方案2：用闭包实现私有变量存储 #

如果你不想把titlePlaylist暴露成mp3对象的公开可访问属性，可以用闭包把变量封装在两个方法的共同作用域内，既可以实现变量共享，又能避免外部代码随意篡改播放列表名。
调整后的代码：

const mp3 = (function() {
    // 变量存放在IIFE的函数作用域内，是两个方法共享的私有变量
    let titlePlaylist = ''
    return {
        createPlaylist: function() {
            titlePlaylist = prompt("Choose a name: ")
            console.log(`Your playlist name is: ${titlePlaylist}`)
        },
        playlistInfo: function() {
            console.log(`Already listening ${titlePlaylist}`)
        }
    }
})()

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

这种写法下titlePlaylist不会暴露在mp3对象的公开属性上，只能通过对象对外暴露的两个方法进行读写，数据的可控性更强。

内容的提问来源于stack exchange，提问作者SEVENELEVEN