Pemahaman mendalam tentang pembina javascript dan kemahiran objek

Beberapa mod penciptaan objek yang biasa digunakan

Buat menggunakan kata kunci baharu
Kaedah penciptaan objek yang paling asas tidak lebih daripada sama seperti dalam kebanyakan bahasa lain: tiada objek, anda mencipta yang baharu!

var gf = new Object();
gf.name = "tangwei";
gf.bar = "c++";
gf.sayWhat = function() {
  console.log(this.name + "said:love you forever");
}

Salin selepas log masuk

Buat menggunakan literal

Ini nampaknya sesuai, tetapi bagaimanakah geeks menyukai cara yang rumit dan rendah untuk mentakrifkan pembolehubah Sebagai bahasa skrip, ia sepatutnya mempunyai gaya yang sama seperti saudara lain, jadi ia muncul Bagaimana literal objek ditakrifkan? 🎜>

var gf = {
  name : "tangwei",
  bar : "c++",
  sayWhat : function() {
    console.log(this.name + "said:love you forever");
  }
}

Salin selepas log masuk

Mod Kilang

Sebenarnya, ini adalah cara yang paling biasa digunakan untuk mentakrifkan objek dalam amalan, tetapi apakah yang perlu saya lakukan jika saya ingin mempunyai banyak objek dengan sifat yang serupa (memikirkannya adalah mengujakan...)? Jika kita mentakrifkannya satu demi satu, banyak kod akan dihasilkan Mengapa tidak membina kilang dan menghasilkan objek kita dalam kelompok Oleh itu, bayi kembung pertama dalam dunia JavaScript. . . Tidak, "model kilang" telah dilahirkan!

function createGf(name, bar) {
  var o = new Object();
  o.name = name;
  o.bar = bar;
  o.sayWhat = function() {
    alert(this.name + "said:love you forever");
  }
  return o;
}
var gf1 = createGf("bingbing","d");
var gf2 = createGf("mimi","a");

Salin selepas log masuk

Pembina

Corak kilang menyelesaikan masalah mencipta berbilang objek yang serupa, tetapi masalah itu datang lagi. Semua objek ini dicipta daripada Objek Bagaimana membezakan jenis objek tertentu. Pada masa ini kita perlu bertukar kepada mod lain, mod pembina:

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian","f");
var gf2 = new Gf("vivian2","f");

Salin selepas log masuk

Di sini kita menggunakan pembina yang bermula dengan huruf besar untuk menggantikan createGf dalam contoh di atas Perhatikan bahawa mengikut konvensyen, huruf pertama pembina mesti menggunakan huruf besar. Di sini kita mencipta objek baharu, kemudian menetapkan skop pembina kepada objek baharu dan memanggil kaedah dalam pembina.

Nampaknya tidak ada yang salah dengan kaedah di atas, tetapi kita dapati bahawa kaedah sayWhat dalam pembina yang dipanggil dalam kedua-dua keadaan bukanlah contoh Fungsi yang sama:

console.log(gf1.sayWhat == gf2.sayWhat); //false

Salin selepas log masuk

Memanggil kaedah yang sama tetapi mengisytiharkan keadaan berbeza adalah pembaziran sumber. Kita boleh mengoptimumkan dan mengisytiharkan fungsi sayWhat di luar pembina:

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = sayWhat
}
function sayWhat(){
  alert(this.name + "said:love you forever");
}

Salin selepas log masuk

Ini menyelesaikan masalah berbilang kejadian yang mentakrifkan contoh kaedah yang sama beberapa kali, tetapi masalah baharu timbul. Kata yang kami takrifkan ialah kaedah skop global, tetapi kaedah ini tidak boleh dipanggil secara langsung. Bagaimana untuk menentukan objek dengan sifat enkapsulasi tertentu dengan lebih elegan? Mari kita lihat pada corak objek prototaip JavaScript.

Corak Objek Prototaip

Memahami objek prototaip

Apabila kita mencipta fungsi, fungsi itu akan mempunyai atribut prototaip, yang menunjuk kepada objek prototaip fungsi yang dicipta melalui pembina. Dalam istilah orang awam, objek prototaip ialah objek dalam ingatan yang menyediakan sifat dan kaedah yang dikongsi untuk objek lain.

Dalam mod prototaip, tidak perlu mentakrifkan atribut contoh dalam pembina, dan maklumat atribut boleh diberikan terus kepada objek prototaip:

function Gf(){
  Gf.prototype.name = "vivian";
  Gf.prototype.bar = "c++";
  Gf.prototype.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
gf1.sayWhat();
var gf2 = new Gf();

Salin selepas log masuk

Perbezaan daripada pembina ialah sifat dan kaedah objek baharu di sini boleh dikongsi oleh semua kejadian Dalam erti kata lain, gf1 dan gf2 mengakses sifat dan kaedah yang sama. Selain atribut yang kami tetapkan kepada objek prototaip, terdapat juga beberapa atribut terbina dalam Semua objek prototaip mempunyai atribut pembina, yang merupakan penunjuk kepada fungsi yang mengandungi atribut prototaip (berani anda pergi lebih jauh!). Mari kita fahami dengan jelas proses pemutihan lidah ini melalui gambar:

Semua objek mempunyai objek prototaip (prototaip) Objek prototaip mempunyai atribut pembina yang menunjuk ke fungsi yang mengandungi atribut prototaip gf1 dan gf2 kedua-duanya mengandungi atribut dalaman yang menunjuk ke objek prototaip (ditunjukkan dalam pelayar firefox. ialah proto harta persendirian), apabila kita mengakses harta dalam objek, kita akan bertanya dahulu sama ada harta itu wujud dalam objek contoh, dan jika tidak, teruskan mencari objek prototaip.

Gunakan objek prototaip
Dalam contoh sebelumnya, kami mendapati bahawa apabila menambahkan atribut pada objek prototaip, kami perlu menambahkan Gf.prototype pada setiap satu. Kerja ini sangat berulang Dalam mod penciptaan objek di atas, kami tahu bahawa kami boleh menggunakan literal bentuk Cipta objek, kami juga boleh memperbaikinya di sini:

function Gf(){}
Gf.prototype = {
  name : "vivian",
  bar : "c++",
  sayWhat : function(){
    alert(this.name + "said:love you forever");
  }
}

Salin selepas log masuk

Terdapat satu perkara yang memerlukan perhatian khusus di sini Atribut pembina tidak lagi menunjuk ke objek Gf, kerana setiap kali fungsi ditakrifkan, objek prototaip akan dibuat untuknya pada masa yang sama dapatkan atribut pembina baharu. Ini ialah Kami menggunakan Gf.prototype pada asasnya menimpa objek prototaip asal, jadi pembina menjadi sifat pembina objek baharu, tidak lagi menunjuk ke Gf, tetapi Objek:

var gf1 = new Gf();
console.log(gf1.constructor == Gf);//false
console.log(gf1.constructor == Object)//true

Salin selepas log masuk

一般情况下，这个微妙的改变是不会对我们造成影响的，但如果你对constructor有特殊的需求，我们也可以显式的指定下Gf.prototype的constructor属性：

Gf.prototype = {
  constructor : Gf,
  name : "vivian",
  bar : "c++",
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
console.log(gf1.constructor == Gf);//true

Salin selepas log masuk

通过对原型对象模式的初步了解，我们发现所有的实例对象都共享相同的属性，这是原型模式的基本特点，但往往对于开发者来说这是把“双刃剑”，在实际开发中，我们希望的实例应该是具备自己的属性，这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中，我们可以使用构造函数来定义对象的属性，使用原型来定义共享的属性和方法，这样我们就可以传递不同的参数来创建出不同的对象，同时又拥有了共享的方法和属性。

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
}
Gf.prototype = {
  constructor : Gf,
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian", "f");
var gf2 = new Gf("vivian1", "c");

Salin selepas log masuk

在这个例子中，我们再构造函数中定义了对象各自的属性值，在原型对象中定义了constructor属性和sayWhat函数，这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式，包括很多js库（bootstrap等）默认的采用的模式。