在 JavaScript 中创建自定义对象时如何选择原型设计和闭包？-js教程-PHP中文网

在 JavaScript 中创建自定义对象时如何选择原型设计和闭包？

Barbara Streisand

发布： 2024-12-19 17:33:14

原创

959 人浏览过

How to Choose Between Prototyping and Closure for Creating Custom Objects in JavaScript?

如何在 JavaScript 中创建自定义对象

JavaScript 提供了多种创建自定义对象的方法。这里有两个不同的模型：

原型制作方式

原型模型是 JavaScript 原生的。它涉及使用构造函数的原型属性向实例添加属性和方法：

function Shape(x, y) {
  this.x = x;
  this.y = y;
}

Shape.prototype.toString = function() {
  return 'Shape at ' + this.x + ', ' + this.y;
};

function Circle(x, y, r) {
  Shape.call(this, x, y); // Invoke base constructor
  this.r = r;
}

Circle.prototype = new Shape(); // Inherit prototype

Circle.prototype.toString = function() {
  return 'Circular ' + Shape.prototype.toString.call(this) + ' with radius ' + this.r;
};

登录后复制

优点：

轻量级且原生于 JavaScript
重用现有原型
支持instanceof

缺点：

必须在子类构造函数中调用基础构造函数
子类化时需要处理构造函数

关闭方式

闭包模型通过使用闭包封装特定于实例的数据和方法来避免继承：

function Shape(x, y) {
  var that = this;

  this.x = x;
  this.y = y;

  this.toString = function() {
    return 'Shape at ' + that.x + ', ' + that.y;
  };
}

function Circle(x, y, r) {
  var that = this;

  Shape.call(this, x, y);
  this.r = r;

  var _baseToString = this.toString;
  this.toString = function() {
    return 'Circular ' + _baseToString.call(that) + ' with radius ' + that.r;
  };
};

var mycircle = new Circle();

登录后复制

优点：