Javascript：原型对象不是函数答案

【问题标题】：Javascript: Prototype object is not a functionJavascript：原型对象不是函数
【发布时间】：2015-06-17 19:12:18
【问题描述】：

希望有人可以帮助我处理我拥有的这段代码。

JavaScript：

function myFrame(id){
   if (id) {
      if (window === this) {
         return new myFrame(id);
      }
      this.e = document.getElementById(id);
      return this;
   } else {
      return "";
   }

}

myFrame.prototype = {
    math: function () {
        alert(1 + 1);
    },
    hide: function () {
       this.e.style.display = 'none';
       return this;
    }
}

HTML：

<p id="hideParagraph">Hide Paragraph</p>
<input type="button" name="math" onclick="hide()" value="Hide Paragraph" />
<input type="button" name="math" onclick="math()" value="Alert Math" /> 


<script type="text/javascript">

    function math() {
        myFrame("body").math();
    }

    function hide() {
        myFrame("hideParagraph").hide();
    }

</script>

上面的代码工作正常，但我想知道有没有办法不指定元素。

例如，我需要指定 "body" 或其他字符串值才能使此代码正常工作，否则我会收到 "is not a function" 错误留言

myFrame("body").math();

有没有办法让我有这样的代码：

myFrame().math();

并且仍然使用 "hide" 方法，例如：

myFrame("hideParagraph").hide();

非常感谢任何帮助！

【问题讨论】：

您专门编写了代码以使其不起作用。去掉那段代码，它就可以工作了。
如果math 函数不需要元素的上下文，为什么它甚至在原型上？要么将其设为myFrame.math = function，要么将其完全分开。
return "";。当您调用myFrame() 时，您将返回一个空白字符串（不是一个新的myFrame 对象）。字符串没有.math() 方法。

标签： javascript function object prototype

【解决方案1】：

问题是你的

return "";

试试：

return this;

【讨论】：

关闭，但不完全。如果他先是myFrame()，然后是return this;，他会得到window，因为您在任何情况下都没有调用myFrame()。为此，您需要执行 new myFrame() 并让它返回新创建的对象。

【解决方案2】：

也许这会帮助你理解你的问题：

function Thing(val) {
  this.val = val;  
};

Thing.prototype.alert = function() {
  alert(this.val);  
};

function start(val) {
  return new Thing(val);
}

start("Hi").alert();

您想要一个具有 alert 方法的类，然后在外部函数中创建该类的新实例。

可能有很多方法可以做到这一点。通过此设置，您可以多次调用start。

【讨论】：

【解决方案3】：

这里的问题是你的返回值。

当您调用myFrame("body") 时，您的函数内的window === this 是true，因此会调用new myrFrame('body')。当这种情况发生时，你return this;。新创建的对象。正是这个对象在其原型上包含了.math() 和.hide() 方法。

myFrame().math(); 另一方面。 myFrame() 未通过 if(id) 检查，因此它只返回 ''。一个空字符串。不是myFrame() 对象。字符串没有.math() 方法。

您需要像这样调整您的 myFrame 函数：

function myFrame(id){
    // Determine whether we called 'myFrame()` or 'new myFrame()'
    // In "use strict"; (strict mode), do `if(!this)`
    if (window === this) {
        return new myFrame(id);
    }
    else{
        // In here, this is our new myFrame object
        if(id){
            this.e = document.getElementById(id);
        }

        // This return statement isn't actually needed
        // return this;
    }
}

确保它总是返回一个对象，不管你传递什么参数。

【讨论】：