javascript - 在 Javascript 中创建对象的方式有何不同？

Question

经过一些研究，我发现了四种可以在 Javascript 中初始化对象的方法:

1.

var Game = { // I guess everything here is made public?
    canvas : document.createElement("canvas"),

    render : function(){

    }
}

2.

var Game  = function(){ //if this function isn't a self invoking one, how should it be called?
    var canvas = document.createElement("canvas");

    return {
    render : function(){ // why this does not work when being called? says it's undefined
        alert("a");
    }
  }
}

3.

var Game  = (function(){
    var canvas = document.createElement("canvas");

    function init_properties(){ // why is this not called?
        alert("test");
    }

    return {
    // whatever you want to be made public

    render : function(){
        alert(canvas);
    }
    }
}) ()

4.

function Game(){
    var privateVar = 10;
    this.publicVar = 20;

    this.render = function(){

    }
}

除了评论中的问题，每一个应该在什么情况下使用？使用其中一个时是否存在明显的性能差异？

Answer 1

你的第一个和第三个方法返回对象，你的第二个和第四个方法是实例化函数。第三个与第二个相同，但会立即调用以解析为对象。这称为立即调用函数表达式 (IIFE)。它用于创建返回对象的方法可以访问的私有(private)变量，而无需单独定义初始化函数。确实没有实际理由这样做。

在 JavaScript 中有两种方法可以实例化对象:直接实例化和通过初始化函数实例化。

当您不需要跟踪与对象关联的私有(private)变量时，您想使用直接实例化。如果确实需要私有(private)变量，请通过调用返回对象的初始化函数来实例化对象。

直接(你的第一种方法):

const Game = {
    canvas : document.createElement("canvas"),
    render : () => alert('a')
}

通过一个初始化函数(你的第二个和第四个方法):

const initGame = () => {
    const privateCounter = 0
    const canvas = document.createElement("canvas")
    return {
      render: () => alert('a')
    }
}

const Game = initGame()