Question

我试图更好地理解JavaScript中的函数和模块，特别是了解创建自己的数据类型的最佳方法。我有下面两个文件的列表，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，那么构建模块就像你做的那样很好。

了解JavaScript中的函数和模块

1 个答案: