KineticJS：定义的对象未定义？答案

【问题标题】：KineticJS: Defined object is undefined?KineticJS：定义的对象未定义？
【发布时间】：2013-07-08 18:09:56
【问题描述】：

我正在尝试使用 KineticJS，但遇到了问题：

好的，所以在我的 JavaScript 文件的顶部，我有以下小花絮：

var cuin = '';
//...
var cuinShow = new Kinetic.Text({
 x: 320,
 y: 81,
 text: '',
 fontSize: 18,
 fontFamily: 'Lucida Bright',
 fill: 'black'
});

然后我有这个功能：

function updateText(){
    cuinShow.setText(cuin);
    return current + getAction() + $.localStorage('difficulty') + " =";
}

在测试时，Chrome 告诉我它不喜欢我的代码：

Uncaught TypeError: Cannot call method 'setText' of undefined

现在，我知道这可能与cuinShow 的范围有关，但我不知道是什么。此外，如果它意味着什么（我认为它不会，但以防万一），我已经将该脚本与 KineticJS 一起外部化了。这是html：

<!DOCTYPE html>
<head><script src="jquery-1.10.2.min.js"></script>
    <script src="jquery.storage.js"></script></head>
<body>
    <div id="container"></div>
    <script src="kinetic-v4.5.4.min.js"></script>
    <script src="kgame.js" defer="defer"></script>
</body>

对此的任何帮助将不胜感激。

【问题讨论】：

您是否尝试过在 updateText 函数中使用window['cuinShow'].setText(cuin);？
不，但这也没有解决问题。不过，我确实尝试了stage.get('cuinShow').setText(cuin);，这给了我这个错误：Uncaught TypeError: Object [object Object] has no method 'setText'。我不确定这是前进还是后退。
尝试使用console.log(stage.get('cuinShow')) 并在 Chrome 开发者面板中查看结果，看看它是否是您所期望的对象。我认为这很可能是一个范围界定问题……但如果没有看到整个脚本或有一个较小的测试用例来重现它，就很难说。你能用jsfiddle.net复制它吗？

标签： javascript html object canvas kineticjs

【解决方案1】：

正如 Divey 所说，这很可能是范围问题。

看看这个jsfiddle

当你把你提到的所有代码一个接一个地放在同一个范围内时，函数运行良好。

我的猜测是 var cuinShow 被声明为 var 某处 updateText() 无法访问，就像在另一个不包含 updateText() 的函数中一样。

尝试从当前的 cuinShow 声明中删除 var，然后在 JS 文件的全局范围（或顶部）之外声明 var cuinShow。

编辑：

你定义了：

var ptext = new Kinetic.Text({
  x: 193.5,
  y: 84,
  text: updateText(),
  fontSize: 18,
  fontFamily: 'Lucida Bright',
  fill: 'black'
});

定义前：

var cuinShow = new Kinetic.Text({
  name: 'cuinShowName',
  x: 320,
  y: 81,
  text: '',
  fontSize: 18,
  fontFamily: 'Lucida Bright',
  fill: 'black'
});

所以当你声明ptext 时会调用updateText()，但是cuinShow 还没有被声明！这可以通过在 ptext 之前声明 cuinShow 来解决。

另外，您的updateText() 函数有一些错误：

function updateText(){
  console.log(textLayer.get('cuinShow'));
  (textLayer.get('.cuinShowName')).each(setText(cuin));
  return current + getAction() + $.localStorage('difficulty') + " =";
}

应该是这样的：

function updateText(){
  textLayer.get('.cuinShowName').each(function() {
    this.setText(cuin)
  });
  return current + getAction() + $.localStorage('difficulty') + " =";
}

setText() 前面需要一个对象，因此您需要在 each 函数中使用 this。

【讨论】：

我已经这样定义了。这就是我难过的原因。这是我制作的小提琴：jsfiddle.net/dxVuP