对象字面量中的Javascript 'this'

Question

我是javascript的新手。我正在进行一些“对象字面量”的实践。以下是我尝试的代码。BodyLoaded是body标签的onload事件的事件处理程序。

//可以工作 - 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"）。试图理解这种行为。

- Rohit Raisinghani

---

我不认为空字符串有问题，但是 this 指的是父对象。 - Qantas 94 Heavy

离题了，但是避免使用body-onload，改用window上的事件监听器“loaded”。 - Achshar

也许可以看一下这个问题：Javascript：在对象中的每个变量前都需要加上this.var吗？ - Bergi

Answer 1

当你从方法中返回name时，实际上返回的是window.name，因为没有涉及到上下文。

当你调用this.name时，this指向dog对象，它有一个name属性，因此返回该属性。

- Arun P Johny

---

问题不在于指向什么。问题在于，如果在setName和getName函数中都使用this.name或name，则可以获得预期结果（Bingo）。但是当我在getName中使用this.name并在setName中简单地使用name时，它返回一个空字符串。 - Rohit Raisinghani

因为当你只使用 name 时，它指向 window.name，而 this.name 则指向 dog.name。 - Arun P Johny

请看第一个代码。在那种情况下，我只使用了名称。为什么在这种情况下名称没有指向窗口？ - Rohit Raisinghani

@user1360433，你能看一下这个演示吗？http://jsfiddle.net/arunpjohny/7a66H/ - Arun P Johny

Answer 2

如果您在设置名称值时不指定this，那么实际设置的变量将是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。

- naquiuddin

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

- Catalin