Javascript 'this' внутри литерала объекта

Question

Я новичок в JavaScript. Я занимался "объектными литералами". Ниже приведен код, который я пытался. BodyLoaded - это обработчик события onload для тега body.

// работает - getName возвращает "бинго"

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return name;
        },
        setName: function (n) {
            name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

// тоже работает - getName возвращает "бинго"

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return this.name;
        },
        setName: function (n) {
            this.name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

// не работает - getName возвращает ""

function BodyLoaded()
{
    var dog = {

        name: "defaultname",
        getName: function () {
            return this.name;
        },
        setName: function (n) {
            name = n;
        }
    };

    dog.setName("bingo");
    console.log(dog.getName());
}

Приведенный выше код возвращает ожидаемый результат при вызове getName ("бинго"). Но если я верну this.name в функции getName, она вернет и пустую строку. Странная часть, если я использую this.name в обеих функциях (setName и getName), код работает нормально и возвращает ожидаемое значение ("bingo"). Пытаюсь понять это поведение.

Answer 1

Когда ты вернешься name из метода, он на самом деле возвращает window.name потому что нет контекста.

Когда вы звоните this.name, this указывает на dog объект, который имеет name свойство, так что это возвращает.

Answer 2

Если вы не укажете this при настройке name значение фактической переменной, которая будет установлена, будет window.name, Но когда вы используете this.name фактическое значение, которое будет установлено, будет dog.name, Просто измените код, как указано ниже, и посмотрите.

function BodyLoaded()
{

    var dog = {

    name: "defaultname",
    getName: function () {
        return this.name;
    },
    setName: function (n) {
        this.name = n;
    }
};

dog.setName("bingo");
console.log(dog.getName());

}

Но в соответствии с вашим кодом я не мог понять причину получения пустой строки. Если на самом деле должно выводить значение defaultname,

Answer 3

function Dog() {
    var self = this;

    this.name = "defaultname";
    this.getName = function () {
        return this.name;
        // same as
        // return self.name
    }
}
var myDog = new Dog();
myDog.getName(); // defaultname