【问题标题】:JavaScript constructors with Objects带有对象的 JavaScript 构造函数
【发布时间】:2013-10-18 18:55:44
【问题描述】:

我已经开始尝试学习如何更广泛地使用 JavaScript 对象,并且我一直在尝试用 JavaScript 编写一个对象,它允许我在初始化时设置一些构造函数参数。

我不得不说,在 JavaScript 中有很多不同的“design patterns”,我可能对语法和诸如此类的东西有点混淆了。通过我的研究,我发现了各种 StackOverflow 文章,例如:

  1. JavaScript constructors using JavaScript object literal notation
  2. Constructors in JavaScript objects

我想对我的对象做些什么,在初始化时设置一些内部/私有变量,如下所示:

<script>
   var TestObj = new Dispatch( 100 );
   console.log( TestObj.getConstructorValue() );
   //Would Return 100.
</script>

虽然目前,对象的构建方式目前是 Test 在初始化后尝试访问它时返回 undefined:

<script>    
    $(document).on('ready', function(){     
        var TestObj = new Dispatch( 100 );

        //Set post-initialised variables & set to '5'
        TestObj.setOrderNumber( 5 ); 

        //Retrieves 5
        console.log( "Accessing Property: " + TestObj.OrderNumber ); 

        //Method for getting orderNumber Property, Returns 5
        console.log( "Method for Order Number: " + TestObj.getOrderNumber() );

        //Method for getting would-be constructor value
        console.log( TestObj.getTest() ); //Returns Undefined
        console.log( TestObj.Test ); //Returns Undefined

    });
</script>

JavaScript

<script>
    /**
     *   
    **/
    var Dispatch = function( Arg1 ) {

        var OrderNumber;
        var Test;

        var setOrderNumber = function( orderNum ) {
            this.OrderNumber = orderNum;
        };


        this.constructor = function( str ) {
            this.Test = str;
        };

        this.constructor( Arg1 );

        return {

            /**
             *  Getter for OrderNumber
                **/
            getOrderNumber : function(){
                return this.OrderNumber;
            },

            /**
             *  Setter for OrderNumber
            **/
            setOrderNumber : setOrderNumber,

            /**
             *  Getter for Test
            **/
            getTest : function() {
                return this.Test;   
            }
        };

    };  
</script>

我的尝试 (1)

我尝试过直接设置:

<script>
var Dispatch = function( s ) {

    /**
     * Assign constructor
     * to Test
    **/
    var Test = s;

    return {
       getTest : function() {
           return this.Test;    
       }
    }
};

TestObj.getTest(); //Returns undefined
</script>

我的尝试 (2)

我还尝试通过稍微混合函数返回来访问变量:

<script>
var Dispatch = function( s ) {

    var Test;

    var getTestVar = function() {
        return this.Test;   
    }

    this.constructor = function( str ) {
        this.Test = str;
    };

    /**
     *
    **/
    this.constructor( s );   

    return {
        getTest : getTestVar
    };
};

TestObj.getTest(); //Returns undefined
</script>

尽管如此,我也尝试过其他方法,但如果能以书面形式理解为什么我的构造函数工作出错了,那就太好了。

这里有一个jsFiddle,它展示了这一切。为相当长的帖子和我对 JavaScript 对象的无知道歉!

【问题讨论】:

  • 用 var 声明的变量是构造函数的变量,你不能用 this 访问它们,因为 this 指向用 new 调用构造函数构造的对象。您可以通过关闭访问它们。另一件事-如果您返回明确定义的对象,则与构造函数的原型没有链接

标签: javascript object-literal


【解决方案1】:

您确实混淆了许多概念。
这就是你要找的:

var Dispatch = function( s ) {
   /**
    * Assign constructor
    * to Test
   **/
   this.Test = s;
   this.getTest = function() {
      return this.Test;    
   }
};

因此:

TestObj = new Dispatch(7);

将产生对象:

Dispatch {Test: 7, getTest: function}

和:

TestObj.getTest();

将返回 7。

您可以在此处查看有关构造函数的更多正确信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

【讨论】:

  • 非常感谢您为我澄清这一点 =) 是的,在阅读了几篇关于 JavaScript 函数/对象构造的文章之后,我不会撒谎 - 它是多种多样的。
【解决方案2】:

你可以使用这个模式

function myObject (param1) {
    var myPrivateMemberValue1 = param1;

    return {
        getPrivateMemberValue1: function() {
            return myPrivateMemberValue1;
        }
    };
}
console.log(new myObject("thefourtheye"));
console.log(new myObject("thefourtheye").getPrivateMemberValue1());

输出

{ getPrivateMemberValue1: [Function] }
thefourtheye

说明:

我们在这里使用闭包。当参数传递给构造函数时,它存储在局部变量中。然后我们返回一个带有getPrivateMemberValue1 函数的对象,由于闭包,它仍然可以访问该函数的本地变量。所以你可以像这样将变量设为私有。

【讨论】:

  • 只是想说谢谢你提供了一个很好的答案和解释,看来我的原始代码是这个和一个 bbldoron 提供的混合体。虽然他的时间早了一点,而且我更愿意继续使用这种模式,但再次感谢你 =)
【解决方案3】:
    function Dispatch(s) {
        var test = s;
        this.returnTest = function () {
            return test;
        }
    }

    var no = new Dispatch(5);
    no.returnTest(); // 5

无法直接访问测试变量,因为它不是新创建对象的成员,但您可以在闭包中访问它。

【讨论】:

    猜你喜欢
    • 2018-05-09
    • 2015-04-27
    • 2015-01-19
    • 2017-10-08
    • 1970-01-01
    • 1970-01-01
    • 2019-11-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多