Penciptaan Objek JavaScript: Corak dan Amalan Terbaik

Artikel ini meneroka pelbagai cara untuk membuat objek JavaScript, menjelaskan hubungan antara pendekatan yang berbeza untuk kedua -dua pemula dan pemaju yang berpengalaman. Walaupun sintaks mungkin berbeza -beza, prinsip -prinsip yang mendasari adalah serupa.

Mata utama:

JavaScript menyediakan pelbagai kaedah penciptaan objek: literal objek, fungsi kilang, rantai prototaip, dan kelas ES5/ES6. Setiap menawarkan kelebihan dan kekurangan, tetapi semua konsep asas berkongsi.
Pada masa ini, kaedah yang paling lazim adalah sintaks kelas dan fungsi kilang. Sintaks kelas biasanya dianggap lebih cekap dan merupakan standard, menawarkan struktur yang lebih bersih dan mudah. ​​
Penulis lebih suka sintaks kelas kerana penyeragaman, kesederhanaan, kecekapan, dan set ciri komprehensifnya, melampaui keupayaan sekali unik kepada fungsi kilang.

literals objek:

Kaedah yang paling mudah melibatkan penciptaan objek secara langsung menggunakan literal objek. Ini mudah:

Walau bagaimanapun, penciptaan objek berulang membawa kepada duplikasi kod. Penyelesaian yang lebih berskala diperlukan.

<code class="language-javascript">var o = {
  x: 42,
  y: 3.14,
  f: function() {},
  g: function() {}
};</code>

Fungsi kilang:

Fungsi kilang menyediakan penyelesaian untuk mewujudkan pelbagai objek dengan struktur dan fungsi yang sama. Daripada penciptaan literal objek langsung, objek literal dikembalikan dari fungsi:

Kelemahan di sini adalah ketidakcekapan memori yang berpotensi kerana setiap objek yang memiliki salinan fungsi sendiri.

<code class="language-javascript">function thing() {
  return {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
  };
}

var o = thing();</code>

Rantai prototaip:

rantaian prototaip JavaScript membolehkan perkongsian data yang cekap di kalangan objek. Fungsi kilang boleh mewakilkan akses harta kepada objek bersama:

Corak ini sangat biasa bahawa sokongan terbina dalam wujud. Objek prototaip dibuat secara automatik dengan setiap fungsi:

<code class="language-javascript">var thingPrototype = {
  f: function() {},
  g: function() {}
};

function thing() {
  var o = Object.create(thingPrototype);
  o.x = 42;
  o.y = 3.14;
  return o;
}

var o = thing();</code>

redundansi tetap menjadi masalah, bagaimanapun.

<code class="language-javascript">thing.prototype.f = function() {};
thing.prototype.g = function() {};

function thing() {
  var o = Object.create(thing.prototype);
  o.x = 42;
  o.y = 3.14;
  return o;
}

var o = thing();</code>

kelas es5:

Untuk menangani redundansi, kod berulang boleh dikemas dalam fungsi:

Ini menyerupai kata kunci

, yang memudahkan proses:

<code class="language-javascript">function create(fn) {
  var o = Object.create(fn.prototype);
  fn.call(o);
  return o;
}

// ...

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = create(Thing);</code>

Ini dikenali sebagai kelas ES5. new

<code class="language-javascript">Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = new Thing();</code>

Kelas ES6:

kelas ES6 menawarkan sintaks yang lebih ringkas:

Perbandingan:

<code class="language-javascript">class Thing {
  constructor() {
    this.x = 42;
    this.y = 3.14;
  }

  f() {}
  g() {}
}

const o = new Thing();</code>

Pendekatan yang paling biasa adalah sintaks kelas dan fungsi kilang. Perbezaan prestasi sering diabaikan kerana pengoptimuman enjin, tetapi sintaks kelas biasanya lebih cepat dan standard pilihan. Pariti ciri wujud antara kedua -dua kaedah dalam JavaScript moden.

Kesimpulan:

Penulis mengesyorkan sintaks kelas untuk kesederhanaan, kecekapan, dan set ciri komprehensifnya.

Soalan Lazim (Soalan Lazim):

Seksyen Soalan Lazim memberikan jawapan ringkas kepada soalan umum tentang penciptaan objek JavaScript, termasuk penggunaan kata kunci new, Object.create(), fungsi pembina, kaedah, warisan prototip, kata kunci this, sifat peribadi, dan terbaik amalan.

Atas ialah kandungan terperinci Penciptaan Objek JavaScript: Corak dan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!