从 Javascript 中的对象中引用对象的数组
Reference to an object's array from within the object in Javascript
我想创建一个 InvertedPeninsula 类型的新对象:
var invertedPeninsula = new InvertedPeninsula();
为了创建这个对象类型,我使用了一个对象构造函数:
var InvertedPeninsula = function() {
this.inhabitants = [
{
name: 'Flanery',
race: 'Human'
},
{
name: 'Sir Charles',
race: 'Human'
},
{
name: 'Ealei',
race: 'Elf'
},
{
name: 'Orado',
race: 'Spector'
}
];
this.inhabitants.getRace = function(race) {
var members = [];
for (var i=0, l = this.length; i < l; i++) {
if (this[i].race === race) {
members.push(this[i]);
}
}
return members;
};
this.inhabitants.humans = function() {
return this.getRace('Human');
};
this.inhabitants.elves = function() {
return this.getRace('Elf');
};
this.inhabitants.spectors = function() {
return this.getRace('Spector');
};
};
总而言之,构造函数创建了一个对象,其中包含一个名为 "inhabitants" 的数组,该数组本身包含 4 个对象文字。 InvertedPeninsula 对象类型构造函数然后继续向居民数组添加四个函数表达式。换句话说,居民数组还包含 4 个对象和 4 个方法,可以通过使用 "for-in" 迭代器打印数组的内容来确认。
一切都按照我想要的方式运行,但我想了解的是,到底为什么这个构造函数可以在不提及它的名称的情况下引用居民数组而逃脱。特别是:
for (var i=0, l = this.length; i < l; i++)
上面的代码不应该是:
for (var i=0, l = this.inhabitants.length; i < l; i++)
相反?
同理,人类、精灵、幽灵阵属性全部return:
return this.getRace('Human');
return this.getRace('Elf');
return this.getRace('Specter');
分别。但是,它不应该是:
return this.inhabitants.getRace('Human');
return this.inhabitants.getRace('Elf');
return this.inhabitants.getRace('Specter');
我进行了这些建议的更改,但是在尝试调用任何一个函数时,例如:
invertedPeninsula.inhabitants.humans();
我收到这些错误:
Uncaught TypeError: Cannot read property 'getRace' of undefined
Uncaught TypeError: Cannot read property 'length' of undefined
我正在使用 Google Chrome 55.0.2883.87 m
关于这里发生的事情有什么可能的解释吗?
之所以有效,是因为执行此操作时的上下文:
invertedPeninsula.inhabitants.humans();
... 不是 invertedPeninsula
,而是 invertedPeninsula.inhabitants
,因此方法中对 this
的任何引用都是对 invertedPeninsula.inhabitants
.
另请注意,您在构造函数中只定义了一个 属性:inhabitants
.
您在该构造函数中定义的所有其他方法都不是在 this
上创建的,而是在 this.inhabitants
上创建的,它是 那个 数组对象使用更多方法进行扩展,而不是正在构造的对象。
我想创建一个 InvertedPeninsula 类型的新对象:
var invertedPeninsula = new InvertedPeninsula();
为了创建这个对象类型,我使用了一个对象构造函数:
var InvertedPeninsula = function() {
this.inhabitants = [
{
name: 'Flanery',
race: 'Human'
},
{
name: 'Sir Charles',
race: 'Human'
},
{
name: 'Ealei',
race: 'Elf'
},
{
name: 'Orado',
race: 'Spector'
}
];
this.inhabitants.getRace = function(race) {
var members = [];
for (var i=0, l = this.length; i < l; i++) {
if (this[i].race === race) {
members.push(this[i]);
}
}
return members;
};
this.inhabitants.humans = function() {
return this.getRace('Human');
};
this.inhabitants.elves = function() {
return this.getRace('Elf');
};
this.inhabitants.spectors = function() {
return this.getRace('Spector');
};
};
总而言之,构造函数创建了一个对象,其中包含一个名为 "inhabitants" 的数组,该数组本身包含 4 个对象文字。 InvertedPeninsula 对象类型构造函数然后继续向居民数组添加四个函数表达式。换句话说,居民数组还包含 4 个对象和 4 个方法,可以通过使用 "for-in" 迭代器打印数组的内容来确认。
一切都按照我想要的方式运行,但我想了解的是,到底为什么这个构造函数可以在不提及它的名称的情况下引用居民数组而逃脱。特别是:
for (var i=0, l = this.length; i < l; i++)
上面的代码不应该是:
for (var i=0, l = this.inhabitants.length; i < l; i++)
相反?
同理,人类、精灵、幽灵阵属性全部return:
return this.getRace('Human');
return this.getRace('Elf');
return this.getRace('Specter');
分别。但是,它不应该是:
return this.inhabitants.getRace('Human');
return this.inhabitants.getRace('Elf');
return this.inhabitants.getRace('Specter');
我进行了这些建议的更改,但是在尝试调用任何一个函数时,例如:
invertedPeninsula.inhabitants.humans();
我收到这些错误:
Uncaught TypeError: Cannot read property 'getRace' of undefined
Uncaught TypeError: Cannot read property 'length' of undefined
我正在使用 Google Chrome 55.0.2883.87 m
关于这里发生的事情有什么可能的解释吗?
之所以有效,是因为执行此操作时的上下文:
invertedPeninsula.inhabitants.humans();
... 不是 invertedPeninsula
,而是 invertedPeninsula.inhabitants
,因此方法中对 this
的任何引用都是对 invertedPeninsula.inhabitants
.
另请注意,您在构造函数中只定义了一个 属性:inhabitants
.
您在该构造函数中定义的所有其他方法都不是在 this
上创建的,而是在 this.inhabitants
上创建的,它是 那个 数组对象使用更多方法进行扩展,而不是正在构造的对象。