Question

这些是创建javascript对象的方法：

function apple(optional_params) {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function() {
        return this.color + ' ' + this.type + ' apple';
    }
}

我真的更喜欢后者，因为它是Json语法，但我看到的第一个比后者更多。

它们之间是否存在功能上的差异？
他们每个人都可以被扩展，继承和克隆/复制吗？
在后者中我可以轻松创建嵌套元素，第一个可能吗？
在后者中，我无法传递可选参数？
他们服务的目的不同吗？如果是的话，你能否给出我会使用其中任何一个的场景。

Answer 1

不同之处在于您可以重复使用第一个。例如：

function Apple(type, color) {
  this.type = type;
  this.color = color;
  this.getInfo = function () {
    return this.color + ' ' + this.type + ' apple';
  }
}

var red = new Apple("Macintosh", "red");
var green = new Apple("Granny Smith", "green");

VS

var red = {
  type: "Macintosh",
  color: "red",
  getInfo: function() {
    return this.color + ' ' + this.type + ' apple';
  }
};

var green = {
  type: "Granny Smith",
  color: "green",
  getInfo: function() {
    return this.color + ' ' + this.type + ' apple';
  }
};

Answer 2

对于你的第一个对象，你想把成员函数放在原型中，如：

function apple(optional_params) {
    this.type = "macintosh";
    this.color = "red";
}

apple.prototype.getInfo = function () {
    return this.color + ' ' + this.type + ' apple';
}

这会导致“对象”仅在内存中创建两个新字段（类型和颜色），同时将该函数保留为该对象原型的一部分。您的第二个对象（哈希表）为每个对象创建一个新函数。

因为你可以看到使用函数方法很好，如果你有很多函数，因为函数不会占用额外的内存。

澄清：您的两个示例产生相同的结果，但如果您将该函数放入原型中，结果会有所不同。

Answer 3

第二个示例只是定义Object的实例，并设置了一些属性。第一个更有趣。

JavaScript中的函数具有双重目的，一个作为普通函数/过程，另一个作为原型继承的基础，类似于普通OOP中的“类”。

例如：

var apple = function() {
    this.type = 'granny smith';
};
var myApple = new apple();
alert(myApple.type); // -> 'granny smith'

在这里，我们定义了一个名为apple的“类”，其初始化程序设置type属性。然后，myApple被创建为apple的实例，type属性由apple()初始化程序设置。

（另外，new apple()也可以被称为new apple，省略括号，结果仍然相同，仍然调用初始化程序，它只接收不参数）

使用new给我们的另一个主要问题是原型继承。所有函数都带有一个我们可以设置属性的原型对象。然后，这些属性将成为没有定义自己值的实例对象的后备值。

示例：

var greenApple = function() { };
var myApple = new apple();
alert(myApple.color); // -> undefined
greenApple.prototype.color = 'green'
alert(myApple.color); // -> green

此处，设置greenApple.prototype.color会影响我们已创建的myApple的颜色属性。这就是所谓的原型继承，它具有广泛的用途。

编辑： 以下内容是指我在撰写本文时编辑的问题的早期版本。除非你特别感兴趣，否则你可以放心地忽略它。

现在，回到你的第一个例子：

var apple = new function() { ... }

因为在函数定义之前有new关键字，所以效果就像创建apple类，创建myApple对象，然后抛弃apple类。如果您有权访问此类，则可以使用.prototype添加原型属性，但不是 - 所有apple变量中包含的内容（以OOP术语表示）都是该类的实例，不是班级本身。

Answer 4

这是我在大多数情况下创建Javascript对象的方式：

/**
 * This becomes the constructor of Apple, a type of fruit.
 */
 var Apple = function() {
    // Object init here
    // This becomes a "private" variable
    var seeds = 50;

    // This becomes "public" properties
    this.color  = 'red';
    this.weight = 100; // in grams if you wonder. 

    /**
     * Do stuff to count the seeds
     * This becomes a privileged method that can access private variables
     * and be called from outside the object
     */
    this.countSeeds = function() {
        // Do stuff to count the seeds.
        return seeds;
    }
}

/**
 * Static functions can be utility functions that can be called separate from 
 * object instances. They do not have access to any variables or functions
 * in the constructor.
 */
Apple.getTypes = function() {
    return ['golden', 'granny', 'red', 'pink'];
}

/**
 * Public function that gets the default color
 */
Apple.prototype.getColor = function() {
    return Apple.color;
} 

/**
 * Public function that sets the color of the object instance.
 */
Apple.prototype.setColor = function(color) {
    this.color = color;
    return this.color;
}

var golden = new Apple();
golden.setColor('yellow');
alert('The color of the apple is ' + golden.color);

Answer 5

抱歉，我仍然是javascript的小菜鸟，但不是这些功能而不是对象吗？面向对象，是的，但功能？实际上非常感兴趣。

哦，我只使用过第一个。我认为它看起来更清晰，因为它完全宣称“新功能”。

有两种创建javascript对象的方法，我应该使用哪种方法？

5 个答案: