javascript - 对象文字中的 Javascript 'this'

Question

我是 JavaScript 新手。我正在对“对象文字”进行一些操作。下面是我正在尝试的代码。BodyLoaded 是 body 标签的 onload 事件的事件处理器。

//works - getName 返回“bingo”

function BodyLoaded()
{
    var dog = {

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

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

// 也有效 - getName 返回“bingo”

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 ("bingo") 时返回预期结果。但是，如果我在 getName 函数中返回 this.name，它会返回空字符串。奇怪的是，如果我在两个函数（setName 和 getName）中都使用 this.name，则代码可以正常工作并返回预期值（“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