了解JavaScript中的功能和模塊

Question

我試圖更好地理解JavaScript中的函數和模塊，特別是了解創建自己的數據類型的最佳方法。 我在下面列出了2個文件，即Rectangle1.js和Rectangle2.js，以及它們的示例輸出，我為了更好地理解這一點而創建了它們。

我希望獲得社區的幫助，以幫助我了解其中的哪一種（或另一種方式）是構造代碼以創建自己的數據類型的最佳方法。

Rectangle1.js

function Rectangle(x,y,w,h) {
  width = w;
  height = h;

  this.area1 = function() {
    return width*height;
  }
}

Rectangle.prototype.area2 = function() {
  return width * height;
};

Rectangle.area3 = function() {
  return width * height;
}

exports.Rectangle = Rectangle;

Rectangle2.js

var RECTANGLE = (function(my) {
  function init(x,y,w,h) {
    this.w = w;
    this.h = h;
  }

  function area() {
    return this.w * this.h;
  }

  my.init = init;
  my.area = area;
  return my;
})(RECTANGLE || {});

exports.RECTANGLE = RECTANGLE;

樣本互動

var r2 = require('Rectangle2.js');
r2.RECTANGLE.init(1,2,3,4);
r2.RECTANGLE // ...can see the private properties
r2.RECTANGLE.area() // returns 12

var r1 = require('Rectangle1.js');
r1 // shows area3 in r1
var rect = new r1.Rectangle(1,2,3,4);
rect // shows area1 in rect
rect.area1() // visible in methods, spits out 12
rect.area2() // not visible in methods, spits out 12
r1.Rectangle.area3() // not visible in rect, spits out 12

Answer 1

盡管有一些問題，但用javascript構造對象的首選方法更接近於您在Rectangle1.js中編寫的對象：

首先，在Rectangle(x,y,w,h)構造函數中接受參數時，您沒有將它們分配給實例變量，而是分配給了一個不太安全的全局范圍，這解釋了為什么Rectangle.area3()返回相同的結果。 使用this關鍵字可以分配和訪問實例變量。 保持一切一樣，你寧願需要像這樣定義構造函數（請注意使用的this. ）：

function Rectangle(x,y,w,h) {

  this.width = w;
  this.height = h;

  this.area1 = function() {
    return this.width*this.height;
  }
}

Rectangle.prototype.area2 = function() {
  return this.width * this.height;
};

此外，理想情況下，當你定義，將相同的跨相同對象的所有實例可以重復使用的功能，這是一個更好的做法，以確定他們Rectangle.prototype而不是this在您的構造函數。 在第一種情況下，僅創建一個Function對象，並為Rectangle所有實例共享該對象； 在后者中，將為每個Rectangle實例創建一個新實例。

考慮到您的目標是一個JavaScript平台，您可以在該平台上組織結構類似於CommonJS的模塊（如Node.js）中的代碼，因此構造模塊的方法非常好。