Возвращение объекта Javascript в функцию - PullRequest
Новая
       7

Возвращение объекта Javascript в функцию

0 голосов
/ 04 декабря 2018

Чтобы применить свои знания об объектах 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, чтобы я мог получить к ним доступ в глобальномОбъем?

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Поскольку вы создаете объекты внутри функций, объекты существуют только в рамках функций и не доступны вне их.Вы можете попробовать создать глобальные переменные и назначить их внутри функции: 

var male1;
var female1;

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

female.addEventListener('click', function() {
    female1 = new person('female');
});
0 голосов
/ 04 декабря 2018

Если я правильно понимаю ваш вопрос, то общая схема при работе с данными / переменными относительно обработчика событий заключается в объявлении этих переменных вне области действия этого обработчика события (т. Е. В «глобальной» области действия, как показано ниже).вместо того, чтобы возвращать эту переменную из вашего обработчика событий: 

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>

Надеюсь, это поможет!

...