首頁 >web前端 >js教程 >在 JavaScript 中建立自訂物件時如何選擇原型設計和閉包?

在 JavaScript 中建立自訂物件時如何選擇原型設計和閉包?

Barbara Streisand
Barbara Streisand原創
2024-12-19 17:33:14957瀏覽

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();

優點:

  • 防止實例共用方法
  • 方法自動綁定到實例

缺點:

  • 由於每個實例的方法副本而效率較低
  • 沒有自訂邏輯就無法使用instanceof

以上是在 JavaScript 中建立自訂物件時如何選擇原型設計和閉包?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn