Javascript对象创建最佳实践[关闭]答案

【问题标题】：Javascript object creation best practice [closed]Javascript对象创建最佳实践[关闭]
【发布时间】：2011-05-17 12:15:21
【问题描述】：

我有以下 javascript：

            var MyObject = (function() {

                function Setup(args) {
                    this.prop1 = args.x;
                    this.prop2 = args.y
                    this.prop3 = this.prop1 + this.prop2;

                    this.Create = function() {
                        return 'a' + helperFunc();
                    }

                    function helperFunc() {
                        return this.prop3;
                    }
                }

                return {
                    init : function(args) {
                        var setup = new Setup(args);

                        setup.Create();
                    }
                }

            })();


            $(function() {

                MyObject.init(someArgs);

            });

我的对象构造方法是一种好的做法吗？
我在尝试访问 this.prop3 时在 helperFunc 中收到 undefined。

我还尝试将this.prop1 + this.prop2 分配给一个局部变量，并使用一个函数来返回这个值，如下所示：

        function Setup(args) {
                var total;

                this.prop1 = args.x;
                this.prop2 = args.y

                total = this.prop1 + this.prop2;
                this.getTotal = function() {
                        return total;
                };

                this.prop3 = this.prop1 + this.prop2;
                ...

...当像这样在 helperFunc 中调用它时：

                       return this.getTotal();

.. 我得到 this.getTotal 不是函数

我一直在阅读有关对象创建和使用闭包来模拟私有成员等方面的知识，但由于没有一种方法可以定义对象，我感到困惑。

TBH - 我不太了解结构：

                       var myObject = (function() { ... } ();

我已经看到它在 jQuery 插件中使用了很多，但是第一个括号后面是空括号是什么意思？

任何传授的知识将不胜感激。

另外，我已经订购了 Douglas Crockford 关于 javascript 的书，在它到达之前我需要尝试解决这个问题

【问题讨论】：

stackoverflow.com/questions/3921922/…
这里有很多问题。如果您尝试将自己限制在每个问题一个问题上，那么提供准确而准确的答案会容易得多。
mplungjan - 这是理解函数调用末尾的括号的完美链接。我只需要了解为什么我在调用属性而不是调用函数时得到未定义...

标签： javascript object closures creation

【解决方案1】：

引用他提到的Xhalent's wonderful article（写得真好，文笔清晰）：

那是因为“this”的值是不同于“this”的值时对象已创建。

所以在你的情况下：

...
  var _this = this.prop3;
  function helperFunc() {
    return _this;
  }
...

可能会达到预期。

【讨论】：

这就是为什么我变得不确定的答案。我希望我也可以标记 Paul Butchers 的回答，因为这有助于理解问题。我读过 Xhalent 的文章，它们非常有用。将值设置为私有变量我不知道我可以从 helperFunc 函数访问它。我在 c# 上花了太多时间，需要停止思考经典的 oop。期待道格拉斯·克罗克福德的书。谢谢所有回答的人......

【解决方案2】：

我已经完成了一系列关于基本 javascript 基础的系列文章 - 对象和原型都在这里介绍：

Javascript Object Instantation and Prototypes

我在这里深入研究闭包：Javascript Closures

希望他们有所帮助。干杯。

【讨论】：

您的网站因大量水平滚动条而无法阅读

【解决方案3】：

如果你有一个使用this的函数，你必须确保调用上下文是正确的。即使用this.helperFunc()，而不仅仅是helperFunc()（但您还需要进行设置以便定义this.helperFunc）。在您的示例中，helperFunc 中 this 的引用与 Create() 中的不同。

你可以把它想象成函数不是定义对象的成员，而是调用对象的成员。

this 可能会解决三件事，具体取决于上下文。

一个新创建的对象，如果函数调用前面有 new 关键字。
调用函数时点左侧的对象。
全局对象 (window)，如果以上都没有提供。

如果在没有对象的情况下调用函数，例如在this.Create 中调用helperFunc，this 将绑定到全局对象（window，当在浏览器中使用时）

鉴于这样的事情：

var o = {someVal:"hello"};
o.doSomething = function (){alert(this.someVal)};

拨打o.doSomething() 显然会提示“你好”。

给定：

var o2  = {someVal:"world"};
o2.someFunc = o.doSomething;

调用o2.someFunc() 将提示“world”，而不是“hello”，如果它是指向o 的doSomething 成员的指针，您会期望它。

并给出：

var someFunc = o.doSomething
someVal = "sailor"

拨打someFunc()会提醒“水手”。

另一个混淆点是在Setup() 中直接使用this。当您使用new 调用函数时，正如您所做的那样，this 不会绑定到全局对象，而是绑定到Setup 对象的新实例。

对于我上面的示例，这意味着调用 new o.doSomething() 将警告“未定义”，因为为调用创建的新对象没有“someVal”成员。

【讨论】：

【解决方案4】：

this page this page 上有 Mike Koss 关于 OOP in JS 的精彩教程。

我已经看到它在 jQuery 中被大量使用插件，但第一个做什么括号后跟空括号到底是什么意思？

第二组括号立即调用您在第一组括号中声明的函数。

你可以单独声明和执行（允许多次执行）：

var myFunction = function() { alert("boo"); }; // Declare & instanciate
myFunction(); // Invoke
myFunction(); // Invoke again

或者在一行中同时执行：

(function() { alert("boo"); })(); // Can only invoke now, the function is anonymous and not stored anywhere.

【讨论】：