如何理解这段实现新增书籍功能的JavaScript代码里books变量的来源？

代码还原 #

const bookManager = {
    addBook: function(book){
        if(!this.books){
            this.books = [book];
        } else{
            this.books.push(book);
        }
    }
};

核心运行逻辑 #

这段代码实现了一个书籍管理对象，暴露了新增书籍的addBook方法，核心执行规则如下：

• 调用bookManager.addBook(书籍数据)时，方法内部的this指向bookManager对象本身
• 首次调用方法时，判断到bookManager上没有books属性，就会动态创建该属性，赋值为包含当前传入书籍的数组
• 非首次调用时，books数组已经存在，直接将新传入的书籍追加到数组末尾即可

books属性的产生原因 #

你没有看到提前的赋值声明，是因为books不是预定义的变量或对象属性，是首次调用addBook方法时动态添加到bookManager对象上的自定义属性，不属于全局变量，只会挂载在bookManager对象下，调用bookManager.books即可访问所有已添加的书籍数据。

可以参考下面的调用示例理解执行过程：

// 首次调用前，bookManager没有books属性，打印值为undefined
console.log(bookManager.books) // 输出 undefined

// 首次调用新增书籍
bookManager.addBook({title: "人类简史", author: "尤瓦尔·赫拉利"})
console.log(bookManager.books) // 输出 [{title: "人类简史", author: "尤瓦尔·赫拉利"}]

// 第二次调用新增书籍
bookManager.addBook({title: "三体", author: "刘慈欣"})
console.log(bookManager.books) // 输出包含两本数据的数组

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