首頁 >web前端 >js教程 >原型與閉包:哪種 JavaScript 物件建立方法適合您?

原型與閉包:哪種 JavaScript 物件建立方法適合您?

DDD
DDD原創
2024-12-11 04:37:09702瀏覽

Prototype vs. Closure: Which JavaScript Object Creation Method is Right for You?

自訂JavaScript 物件的正確實作

JavaScript 提供了兩種不同的方法來建立具有屬性和方法的自訂物件:原型方式和閉包方式。

Prototype Way

這種方法對於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(); // Set subclass prototype

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

閉包方式

此方法完全避免了原型繼承,為每個實例建立一個新的閉包。

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); // Invoke base constructor
  this.r = r;
  var _baseToString = this.toString;
  this.toString = function() {
    return 'Circular ' + _baseToString.call(that) + ' with radius ' + this.r;
  };
}

var myCircle = Circle(); // Using `new` is optional here

選擇與注意事項

兩種方法各有優點

原型方式

  • 重物件繼承效率更高
  • 原生JavaScript,方便使用instance
  • 需要正確的建構函式呼叫子類別

閉包方式

  • 每個實例都有自己的方法副本(效率較低)
  • 簡化方法的綁定實例
  • 不支援instanceof,需要自訂檢查

最終,最佳選擇取決於特定的專案要求和偏好。

以上是原型與閉包:哪種 JavaScript 物件建立方法適合您?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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