Question

我正在尝试构建我的第一个自定义对象，它看起来像这样：

function  URLObject()
{
   this.syllables = new Array();
   etc...

   this.AddtoSyllables = AddtoSyllables;
   function AddtoSyllables(AWord)
   {
       var SylCount = this.syllables.length;
       alert("This is SylCount: " + SylCount);
   }
}

var myobj = new URLObject();
myobj.AdtoSyllables("text");

执行上面的代码会导致JS引擎打印出以下内容：

这是Sylcount：NAN

-OR -

这是SylCount：未定义。

我查看了Head First Javascript，Javascript圣经以及各种JS网站上的信息。所有这些都详尽地详细介绍了对象数组的使用，但没有一个讨论对象中的数组。

然而我在这里做错了，我不知道是什么。有人可以帮忙吗？

Answer 1

你走了：

function  URLObject()
{
   this.syllables = [];
   etc...
}

URLObject.prototype.addToSyllables = function(aWord) {
  var SylCount = this.syllables.length;
  alert("This is SylCount: " + SylCount);
}

var myobj = new URLObject();
myobj.adtoSyllables("text");

.prototype将之后声明的函数添加到构造函数构造的每个对象中。（在您的情况下，由new URLObject()实例化的每个对象）

Answer 2

首先，发布的代码实际上适用于Chrome和Firefox;所以这必须依赖于JavaScript引擎，否则会有一些时髦的事情发生。

更新：我怀疑可能会让您感到困惑的是对AddtoSyllables的单独调用（在您未向我们展示的代码中）突然this.syllables不再定义。这就是this的行为可能令人困惑的地方。我已经创建了一个jsFiddle来帮助解释它如何更好地为你工作。

http://jsfiddle.net/J3tUb/

也就是说，通常很有可能编写这样的代码而不必使用this（或原型）。例如：

function createURLObject() {
   // Use closed-over locals instead of attaching properties.
   var syllables = new Array();

   function AddToSyllables(AWord) {
     // Since syllables is closed over, it is accessible here
     // (but WON'T be accessible outside this scope).
     syllables.push(AWord);
     return syllables.length;
   }

   // Expose whatever functionality you want to be "public"
   // in the returned object.
   return {
     AddToSyllables: AddToSyllables
   };
}

var myObj = createURLObject();
myObj.AddToSyllables("text");

对于this来说，理解JavaScript的古怪（以及来自其他语言的大多数开发人员的行为）的行为当然是有价值的。也就是说，一旦你理解了它，我怀疑你会发现它通常可以完全避免。

Answer 3

你需要这样做：

function URLObject()
{
var that = this;
that.AddtoSyllables = AddtoSyllables;
function AddtoSyllables(AWord)

...等像这样，您可以将方法和属性添加到一个对象。

Answer 4

您遇到的问题是AddtoSyllables函数不是URLObject的成员函数或方法。它只是一个没有对象附件的嵌套函数，因此this的所有用法都将导致返回dom窗口对象。声明AddtoSyllables函数的正确方法是：

function  URLObject()
{
    //...
}

URLObject.prototype.AddtoSyllables = function (AWord)
{
    var SylCount = this.syllables.length;
    alert("This is SylCount: " + SylCount);
}

为了解释问题中行为的原因，我想澄清一下，javascript中的对象被视为地图，字典或键值对（使用最适合你的术语）。使用语法x.y = value;相当于将value值放入带有键x的地图y中。拥有代码：

this.AddtoSyllables = AddtoSyllables;
function AddtoSyllables(AWord)
{
    var SylCount = this.syllables.length;
    alert("This is SylCount: " + SylCount);
}

将AddtoSyllables函数添加为对象this指向的条目。代码

myobj.AdtoSyllables(...)

相当于

myobj["AdtoSyllables"](...) // now a retreiaval operation

甚至

var fn = myobj["AdtoSyllables"];
fn (...);

在AdtoSyllables函数中，使用了this。与普遍期望相反，它是不指向myobj的指针。

原因是AddtoSyllables被视为URLObject类的静态方法（因为OOP人会理解它），甚至是松散的静态函数（如在C中）。为了让JS像对待URLObject对象（对于OOP人来说是实例方法）的成员，必须告诉JS这样做。这是通过URLObject.prototype.AddtoSyllables = ....来实现的，它与实例方法的声明相同。

从另一个角度来看：

function foo() { /* some code using `this` */ }
var bar = {};
var baz = {};

bar.foo = foo; // same as bar["foo"] = foo;
baz.foo = foo; // same az baz["foo"] = foo;

在上面的代码中，this内的foo用法既不会指向bar，也不会指向baz。同时bar.foo将指向与baz.foo完全相同的实例，因为foo也是一个对象。

将数组放入自定义对象

4 个答案: