在函数中返回一个Javascript对象

Question

为了练习我的 Javascript 对象知识，我写了一个非常简单的程序：

const male = document.querySelector('.male');
const female = document.querySelector('.female');

/* Person constructor */
function Person (gender) {
    this.gender = gender;

}

Person.prototype.bio = function() {
    alert('This person is ' + this.gender + '.');
};

/* Create person */
male.addEventListener('click', function() {
    let male1 = new Person('male');

    return male1;
});

female.addEventListener('click', function() {
    let female1 = new person('female');

    return female1;
});

然而，我遇到了一个作用域问题：无法在全局作用域中调用male1或female1对象。运行

male1;

在浏览器控制台中，返回以下错误：

ReferenceError: male1 is not defined

我应该如何正确地返回新对象male1和female1，以便我可以在全局范围内访问它们？

- Alec Champaign

---

通常的做法是将变量存储在全局作用域中，并从您的点击监听器中更新它，而不是将其返回。 - Dacre Denny

你想在全局作用域中做什么，而在事件监听回调中无法做到呢？ - Patrick Roberts

male1的作用域被定义在函数内部。它不能在函数外部被引用。这就是变量作用域的工作原理。 - epascarello

为了提供适当的解决方案，您可能需要回答一个问题，即您是否希望为每个性别创建单个“Person”实例，还是每次单击元素时重新创建它们。目前，您每次单击时都会实例化新的“Person”。 - Cᴏʀʏ

Answer 1

如果我正确理解了你的问题，那么在处理与事件处理程序相关的数据/变量时，通常的模式是将这些变量声明在事件处理程序之外的范围内（即在“全局”范围内，如下所示），而不是从事件处理程序中返回该变量：

const male = document.querySelector('.male');
const female = document.querySelector('.female');

// Declare male1,female1 in global scope
let male1;
let female1;

/* Person constructor */
function Person (gender) {
    this.gender = gender;
    
}

Person.prototype.bio = function() {
    alert('This person is ' + this.gender + '.');
};

/* Create person */
male.addEventListener('click', function() {
    
    // update global variables like so
    male1 = new Person('male');
    
    // return male1;
});

female.addEventListener('click', function() {
    
    // update global variables like so
    female1 = new Person('female');

    //return female1;
});

// Added this to demonstrate how global variables are updated
// after click events are fired
setInterval(function() {
  console.log('male1',male1);
  console.log('female1',female1);
}, 1000);

<button class="male">Male</button>
<button class="female">Female</button>

希望这能帮到您！

- Dacre Denny

Answer 2

因为你是在函数内部创建对象，所以这些对象只存在于函数的作用域内，无法在函数外部访问。你可以尝试创建全局变量并在函数内部赋值：

var male1;
var female1;

/* Create person */
male.addEventListener('click', function() {
    male1 = new Person('male');
});

female.addEventListener('click', function() {
    female1 = new person('female');
});

- Mashpoe