Question

我一直在阅读几个不同的Javascript作者，每个人都有他们首选的方法来声明对象的属性。没有一个作者真正解释这些不同方式之间的差异。有什么区别，哪种方式是我们的首选声明？

var One = function() {
    var self = this;
    self.foo = function() {};
    return self;
}

var two = function() {
    foo: function() {}
};

var three = function() {
    var _foo = function() {};

    three.foo = _foo;
}

Answer 1

tl; dr - 见结论

简介

在javascript中声明对象可以通过多种方式完成，从我的角度来看，这完全取决于项目的复杂程度。

您提出的示例将是在复杂项目中声明变量的方法。您甚至可以说项目可维护性和代码质量，您提出的示例可能非常有趣。

第1部分 - 第一个例子

你提出的第一个例子就是这个功能。

var One = function(){
   var self = this;
   self.foo = function(){};
   return self;
}

背景：全球 - ＆gt;一个（）

假设我们没有创建One的实例（不使用new）此功能有两个目标。

将foo function附加到其父项上下文（通常是window object = global）
返回foo function

你可以说你一石二鸟，。虽然一次做两件事可能很有趣，但最终它可能真的成为一个context问题。

Context几乎在问自己，this指的是什么？非实例化函数继承父项context，如果这些父项都不是自己实例化的，那就没问题。如果是这种情况（意味着this！=窗口对象）并且您的主要目标是在全球范围内附加foo，那么它就无法工作。

背景：自我 - ＆gt;新的One（）

如果您使用new来调用此功能，this将会有所不同。 this将引用One的实例。这是更合乎逻辑的方式。

最后你可以说One的实例会感觉almost就像一个对象。

与对象比较

我说几乎主要是因为如果One是：

var One_object = {
  foo: function(){}
}

确实没有，除非你对一个对象而不是函数的instance更灵活。

//This will not work.
var a = new One();
a.titi = function(){
   alert('titi');
}

//This will work
One_object.titi = function(){
   alert('titi');
}

改进示例

One作为实例变得有趣的唯一方法是声明多个实例。表现明智和记忆明智，它会更有趣。

var One = function(foo){
   //auto instantiate it's self
   if(!(this instanceof One)){
      return new One(foo);
   }
   this.foo = foo || function(){};
}

创建具有相同功能的One的多个实例可能会失败目的，因此这里有一个如何改进One的示例。

var a = One(function(){
    alert('instance one');
});

var b = One(function(){
    alert('instance two');
});

第2部分 - 第二个例子

var two = function() {
    foo: function() {}l
};

确实是错的，因为我确定你已经从评论中注意到了。它应该是：

var two = {
        foo: function() {}
    };

其中two实际上是object而不是function。

这种声明变量/函数的方式可确保您不会在全局范围内覆盖任何名为"foo"的其他函数。

当你有很多js而且你宣布了很多变量时，这非常有用。

在这种情况下，要访问foo，您只需拨打two.foo();

老实说，这是我声明变量的首选方式。

变量不会散布在整个js文件中。
它们不会覆盖任何具有相同名称的现有变量
它干净且易于维护。
他们可以很容易地四处移动。

考虑到这一点，这是一个例子：

var options = {
  foo: function(){
    console.log('This is foo');
  },
  toto: function(){
    console.log('This is titi');
  }
};

var example = function(options){
  options.foo();
  options.toto();
}
example(options);

第3部分 - 野蛮

var three = function() {
    var _foo = function() {};

    three.foo = _foo;
}

编写代码时的一个好标准是保持代码可读。虽然这可行，但这不是好习惯。编写Javascript的主要问题是它很容易变得难以理解..在这种情况下，它感觉野蛮（个人意见）。

结论

正如您可能已经注意到，在声明对象时，我的首选方式（以及我所知道的其他方式）是出于以下原因：

结构化
组织
易于处理
易于维护
灵活性
没有冲突

随意指出我错过的任何事情。

Answer 2

在JavaScript中，您可以声明＆＃34;对象＆＃34;通过几种方式。最简单的方法是：

var myObject = {}

从这里开始，添加方法或属性也很容易：

myObject.myFirstMethod = function(){};
myObject.myFirstAttr = true;
myObject.mySecondAttr = "hello world!";

在这种情况下，您可以将这些函数和属性添加到＆＃34; myObject＆＃34;宾语。但是有更好，更清洁的方法来做这些事情：

var myObject = function();
myObject.prototype.method1 = function(){};
myObject.prototype.method2 = functiion(){};
myObject.prototype.attr1 = true;
myObject.prototype.attr2 = "hello world!";
myObject.prototype.setAttr1 = function(value){
    this.attr1 = value;
}
myObject.prototype.setAttr2 = function(value){
    this.attr2 = value;
}

如果您以这种方式声明对象，则可以使用

var myObjectInstance = new myObject();

此Object现在已经获得了您在原型中定义的所有方法和属性。更多关于原型的信息：

http://www.w3schools.com/js/js_object_prototypes.asp

编辑：

请注意＆＃34;这个＆＃34;在JavaScript中意味着＆＃34;元素＆＃34;，什么叫实际方法而不是对象本身...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

差异在声明Javascript对象

2 个答案:

简介