JS OO基础知识以及为什么这不起作用?

时间:2014-02-12 12:03:32

标签: javascript oop

显然我无法理解如何在JS中使用简单的OO模式。希望有人可以给我一个暗示我出错的地方。

这是一个简短的测试。加载到浏览器后,开发控制台会显示两件事:

  1. undefined作为Element.Display

  2. 的值
  3. 因{/ p>

  4. 而导致Board.Display明显失败

    有趣的细节:Element 的调试输出包含Display ...

    我的问题:为什么这不起作用?


    文件“test.html”:

    <html lang="en">
    
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="test.js"></script>
        </head>
    
        <body>
            Hello world!
        </body>
    </html>
    

    档案“test.js”:

    Element: {
        Display = function() {
            // declare something
            // do something
        } // Element.Display
    }; // Element
    
    var Board = function() {
        // debug output
        console.log(Element);
        console.log(Element.Display);
        // declare something
        Display: new Element.Display();
        // do domething
    }();
    

    上面的例子在jsfiddle.net:Example

2 个答案:

答案 0 :(得分:3)

Element:标签

您想要将对象分配给变量:

Element =

您应首先声明变量。

var Element =


然后我们有了这个。

Display = function() {
    // declare something
    // do something
} // Element.Display

在修复最后一个问题之前,它是有效的(因为它是对块内全局的函数赋值)。

修复该问题后,它就变成了错误。

在对象文字内的属性名称和属性值之间使用:


代码的后半部分也存在问题。

var Board = function() {
    // Also a label
    Display: new Element.Display();

    // there is no return statement in this function
    // so you are assigning undefined to Board
}();

答案 1 :(得分:0)

这有助于澄清一些事情:

使用名为“Display”的函数将元素声明为对象

var Element = {
    Display : function() {
        console.log('display something');
    } 
}; 

Board被声明为函数,它调用Element对象的Display函数。

var Board = function() {        
    return Element.Display();       
}();