Penjelasan mendetail tentang prototipe JavaScript dan poin pengetahuan rantai prototipe

1. Prototipe

1. Konsep

Dalam JavaScript, fungsi adalah objek bertipe Function yang berisi properti dan metode. Prototipe (Prototype) adalah atribut dari objek tipe Function .

Atribut prototype disertakan ketika fungsi didefinisikan, dan nilai awalnya adalah objek kosong. Tidak ada tipe prototipe yang ditentukan untuk fungsi dalam JavaScript, sehingga prototipe dapat berupa tipe apa pun.

Prototipe digunakan untuk menyimpan properti dan metode bersama dari objek . Properti dan metode prototipe tidak mempengaruhi properti dan metode dari fungsi itu sendiri.

// Properti tipe Fungsi -> properti yang dimiliki semua fungsi console.log(Function.prototype); //[Function]

//Definisikan fungsi fungsi fn() {
    console.log('ini adalah fungsi');
}

//Nilai default prototipe adalah objek kosong console.log(fn.prototype); //fn {}

// Fungsi berisi konstruktor --> semua tipe referensi sebenarnya adalah konstruktor console.log(Number.prototype); //[Nomor: 0]

console.log(Object.prototype);//{}

2. Mendapatkan prototipe.

Anda bisa mendapatkan prototipe objek dengan dua cara berikut untuk menyetel properti dan metode bersama:

• melalui atribut prototype konstruktor
• dan melalui getPrototype dari metode Objek objek (obj).

fungsi fn() {
    console.log('ini adalah fungsi');
}

//Gunakan struktur sintaksis atribut dari objek akses console.log(fn.prototype); //fn {}
console.log(fn['prototipe']);//fn {}

//Jenis objek menyediakan metode getPrototypeOf() console.log(Object.getPrototypeOf(fn)); //[Function]

3. Memahami atribut konstruktor pada prototipe fungsi.

Metode Object.getOwnPropertyDescriptors() digunakan untuk mendapatkan deskriptor dari semua propertinya sendiri dari suatu objek.

var hasil = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //Hasil outputnya adalah sebagai berikut:
//{
// nilai: [Fungsi: Objek],
// dapat ditulis: benar,
// dapat dihitung: salah,
// dapat dikonfigurasi: benar
// }

constructor是在创建函数的时候自动添加的，指向构造函数本身

4. Mengatur properti dan metode pada prototipe

Anda dapat mengatur properti dan metode prototipe dengan dua cara berikut:

• Properti dan metode prototipe didefinisikan secara terpisah.

Constructor.prototype.Attribute name = nilai atribut; Constructor.prototype.Method name = function(){};

• Mendefinisikan secara langsung objek baru untuk prototipe.

Ketika kita perlu menambahkan banyak atribut ke prototipe, terlalu merepotkan untuk menulis构造函数.prototype.属性名berulang kali. Kita dapat langsung memodifikasi seluruh prototype

konstruktor.prototipe = {
    Nama atribut: nilai atribut,
    Nama metode: function(){}}

function foo () {}foo.prototype = {
    konstruktor: foo,
    nama: 'selai',
    usia: 18,
    alamat: 'Beijing'}var fn = new foo()console.log(fn.address) //Beijing

5.isPrototypeOf() metode

Setiap objek akan memiliki metode isPrototypeOf() , yang digunakan untuk menentukan apakah objek tersebut prototipe objek lain.

Contoh kodenya adalah sebagai berikut:
// Definisikan objek melalui penginisialisasi var obj = {
    nama: 'selai'
}
//Definisikan fungsi konstruktor Hero() {}
// Tetapkan objek obj ke prototipe konstruktor Hero Hero.prototype = obj;
// Membuat objek melalui konstruktor var hero = new Hero();

// Metode isPrototypeOf() menentukan apakah objek yang ditentukan merupakan prototipe objek lain var result = obj.isPrototypeOf(hero);
console.log(result);//true

memverifikasi bahwa objek obj adalah prototipe dari objek hero

2. Rantai prototipe

1. Pemahaman rantai prototipe

Selanjutnya kita menggunakan sepotong kode untuk memperluas pemahaman kita tentang rantai prototipe:

Skenario : Temukan objek pada objek obj Langkah-langkah yang dilakukan oleh atribut alamat js:
    1. Operasi get akan dipicu. 2. Pencarian atribut pada objek saat ini. 3. Jika tidak ditemukan, pencarian akan dilakukan pada objek rantai prototipe (__proto__) 1. Pencarian akan berakhir .Jika tidak ditemukan, maka akan terus mencari sepanjang rantai prototipe hingga prototipe tingkat atas ditemukan (prototipe tingkat atas untuk sementara tidak jelas)

1.1 Kode contohnya adalah sebagai berikut:

var obj = {
    nama: 'selai',
    usia: 19
}
/* 
    Persyaratan: Temukan atribut alamat pada objek obj*/

// Rantai prototipe dicari lapis demi lapis. Jika tidak ditemukan, maka akan dicari hingga prototipe tingkat atas ditemukan.
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    alamat: 'Beijing'
}

console.log(obj.address) // Beijing console.log(obj.__proto__.__proto__.__proto__) // { alamat: 'Beijing' }

1.2 Peta memori

Terakhir temukan atribut alamat
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下

2. Apa yang dimaksud dengan prototipe tingkat atas?

Seperti yang kami sebutkan di atas, kami tidak akan mencari tanpa henti di sepanjang rantai prototipe. Ketika prototipe tingkat atas ditemukan, undefined akan dikembalikan jika belum ditemukan.

Jadi apa prototipe tingkat atas itu?
Contoh kodenya adalah sebagai berikut:

var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) //

Prototipe objek literal null obj adalah: {} . {} adalah prototipe tingkat atas. Saat kita terus mencetak __proto__ ke atas, nilai null dikembalikan, yang membuktikan bahwa lapisan sebelumnya sudah menjadi prototipe tingkat

atas hilang di potongan kode pertama:

顶层原型就是Object.prototype

3. Prototipe objek (Object.prototype)

3.1 Jadi di manakah akhir dari rantai prototipe? Misalnya, apakah objek ketiga juga memiliki atribut prototype __proto__ ?

var obj = {nama:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}

Kami menemukan bahwa hasil cetak di atas adalah空对象{}

• Faktanya, prototipe ini adalah prototipe tingkat atas kami

  var obj = {
    nama: 'selai',
    usia: 19
    }
    konsol.log(obj.__proto__) // {}
    console.log(Objek.prototipe) // {}
    console.log(obj.__proto__ === Object.prototype) // true

  Object adalah kelas induk dari semua kelas, jadi obj.__proto__ sebenarnya adalah Object.prototype,
  console.log(obj.__proto__ === Object.prototype) // true kita dapat melihat bahwa hasil Object.prototype adalah prototipe tingkat atas.

• Prototipe objek yang dibuat langsung dari Object adalah {}

3.2 Lalu kita mungkin bertanya : {} Apakah ada yang spesial dari prototipe?

• Poin khusus 1: Objek memiliki atribut prototipe, tetapi atribut prototipenya sudah menunjuk ke null, yaitu prototipe tingkat atas

  console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null

• poin khusus 2: Ada banyak properti dan metode default pada objek ini;
  • meskipun hasil pencetakan Object.prototype constructor objek kosong {}, namun tidak kosong, tetapi properti di dalamnya tidak dapat dihitung properti untuk dilihat

    <!-- Terlihat ada atribut konstruktor dan tidak kosong -->console.log(Object.prototype.constructor) // [Fungsi: Objek] <!-- konstruktor merujuk kembali ke Objek -->

  • kami Anda juga bisa mendapatkan deskriptor semua propertinya di Object.prototype melalui metode Object.getOwnPropertyDescriptors() .

    console.log(Object.getOwnPropertyDescriptors(Object.prototype)) //Seperti yang ditunjukkan pada tangkapan layar panjang di bawah

    

4. Grafik memori hubungan rantai prototipe