Rumah hujung hadapan web tutorial js JavaScript面向对象-原型的内存模型

JavaScript面向对象-原型的内存模型

Jan 19, 2017 pm 03:10 PM

在JavaScript中,每一个函数都有一个prototype(原型)属性,该属性是一个对象,它的作用是使特定类型的所有对象实例可以共享它所包含的属性和方法。

原型是JavaScript中非常特殊的一个对象,当一个函数创建之后,会随之产生一个原型对象,当通过这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中,就会有一个属性指向原型。

下面的代码演示了通过原型创建JavaScript对象的方式。使用基于原型的创建可以将属性和方法设置为对象Person专有的的属性和方法,它们不能再通过window来调用,因此满足了对象的封装性的要求。

function Person(){};
 
Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = fucntion(){
  alert(this.name + "," + this.age);
}
 
var p1 = new Person();
p1.say();
Salin selepas log masuk

原型的内存模型分析

在使用原型方法创建类的过程中,原型在内存中会有4种不同的状态。我们仍然以上面创建Person类的例子来分析原型的内存模型。代码如下:

// 第一种状态
function Person(){};
 
// 第二种状态
Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = fucntion(){
  alert(this.name + "," + this.age);
}
 
// 第三种状态,创建了一个对象之后会有一个_proto_属性指向原型
// 在使用时如果对象内部没有找到该属性,就会去原型中查找
var p1 = new Person();
p1.say();
 
// 第四种状态
var p2 = new Person();
p2.name = "Ada";
p2.say();
Salin selepas log masuk

首先,我们通过function Person(){};来创建了一个Person函数,此时Person函数的原型内存模型如下图所示:

// 第一种状态
function Person(){};
Salin selepas log masuk

423.jpg

在内存中会为Person函数分配一块空间,在这个空间中有一个prototype属性,另外还会为该函数创建一个原型对象,在原型对象中有一个constructor属性。Person函数和它的原型对象的关系如图中所示。我们称这时的内存模型为原型的第一种状态。

接着我们通过原型为Person函数设置属性和方法,这是原型内存模型的第二种状态。

// 第二种状态
Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = fucntion(){
  alert(this.name + "," + this.age);
}
Salin selepas log masuk

添加上面的代码后,原型的内存模型结构如下图所示:

424.jpg

此时,通过原型添加的方法和属性都被存储在原型的内存空间中。

接下来,我们完成Person类的创建之后,就可以通过new关键字来创建Person对象,这是原型内存模型的第三种状态。

// 第三种状态
var p1 = new Person();
p1.say();
Salin selepas log masuk

原型内存模型的第三种状态如下图所示:

425.jpg

我们通过new Person()创建了一个Person对象p1,此时会在内存中为p1对象分配一块内存空间,在p1的内存空间中会有一个_proto_内部属性,这个内部属性是不能被访问的,它也指向Person原型。

虽然_proto_内部属性是隐藏的,但是我们可以通过Person.prototype.isPrototypeOf(p1)方法来检测出p1是否有_proto_指向Person的原型。

console.info(Person.prototype.isPrototypeOf(p1));   // 控制台输出:true
Salin selepas log masuk

在完成p1对象的创建之后,通过p1对象调用了say()方法。此时,在p1对象的内存空间中是没有say()方法的。当在p1的内存空间中找不到say()方法的时候,JavaScript会通过_proto_属性到Preson的原型中去查找,找到之后就会执行相应的say()方法。

除了上面的三种状态之外,原型的内存模型还有第四种状态。

如果我们再创建一个Person对象p2,并且将p2对象的name属性修改为“Ada”,此时就会出现原型内存模型的第四种状态。

// 第四种状态var p2 = new Person();p2.name = "Ada";p2.say();
Salin selepas log masuk

调用上面的代码之后的原型内存模型如下图所示:

426.jpg

当创建对象p2的时候,同样会在内存中为它分配空间,在p2对象的空间中也会有一个_proto_内部属性指向Person的原型。

当我们通过p2.name = "Ada";为对象p2的name属性赋值的时候,JavaScript会在p2的内存空间中设置自己的name属性,并将值设置为“Ada”。

接着我们调用了say()方法,该方法中需要获取p2的name属性,它首先会在p2对象自己的内存空间中查找是不是有name属性,如果找到了,就不会再去Person原型中取查找了。显然此时在p2对象的空间中存在一个name属性,所以调用say()方法打印出来的名字是“Ada”,而不是“Leon”。

需要特别注意的是:原型中的值是不会被替换的,仅仅只是在属性查找时被对象自己空间中的同名属性所覆盖。

以上就是原型内存模型的4种状态,理解这4种状态是掌握原型的关键所在。

以上就是JavaScript面向对象-原型的内存模型的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Terokai pengaturcaraan berorientasikan objek dalam Go Terokai pengaturcaraan berorientasikan objek dalam Go Apr 04, 2024 am 10:39 AM

Bahasa Go menyokong pengaturcaraan berorientasikan objek melalui definisi jenis dan perkaitan kaedah. Ia tidak menyokong warisan tradisional, tetapi dilaksanakan melalui gubahan. Antara muka menyediakan ketekalan antara jenis dan membenarkan kaedah abstrak ditakrifkan. Kes praktikal menunjukkan cara menggunakan OOP untuk mengurus maklumat pelanggan, termasuk mencipta, mendapatkan, mengemas kini dan memadam operasi pelanggan.

Ciri Lanjutan PHP: Amalan Terbaik dalam Pengaturcaraan Berorientasikan Objek Ciri Lanjutan PHP: Amalan Terbaik dalam Pengaturcaraan Berorientasikan Objek Jun 05, 2024 pm 09:39 PM

Amalan terbaik OOP dalam PHP termasuk konvensyen penamaan, antara muka dan kelas abstrak, pewarisan dan polimorfisme, dan suntikan kebergantungan. Kes praktikal termasuk: menggunakan mod gudang untuk mengurus data dan menggunakan mod strategi untuk melaksanakan pengisihan.

Analisis ciri berorientasikan objek bahasa Go Analisis ciri berorientasikan objek bahasa Go Apr 04, 2024 am 11:18 AM

Bahasa Go menyokong pengaturcaraan berorientasikan objek, mentakrifkan objek melalui struct, mentakrifkan kaedah menggunakan penerima penunjuk, dan melaksanakan polimorfisme melalui antara muka. Ciri berorientasikan objek menyediakan penggunaan semula kod, kebolehselenggaraan dan enkapsulasi dalam bahasa Go, tetapi terdapat juga pengehadan seperti kekurangan konsep tradisional kelas dan pewarisan dan hantaran tandatangan kaedah.

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Adakah terdapat ciri berorientasikan objek seperti kelas di Golang? Adakah terdapat ciri berorientasikan objek seperti kelas di Golang? Mar 19, 2024 pm 02:51 PM

Tiada konsep kelas dalam erti kata tradisional dalam Golang (bahasa Go), tetapi ia menyediakan jenis data yang dipanggil struktur, yang melaluinya ciri berorientasikan objek yang serupa dengan kelas boleh dicapai. Dalam artikel ini, kami akan menerangkan cara menggunakan struktur untuk melaksanakan ciri berorientasikan objek dan menyediakan contoh kod konkrit. Definisi dan penggunaan struktur Pertama, mari kita lihat definisi dan penggunaan struktur. Di Golang, struktur boleh ditakrifkan melalui kata kunci jenis dan kemudian digunakan di mana perlu. Struktur boleh mengandungi atribut

Bagaimana untuk melaksanakan sistem tandatangan elektronik dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem tandatangan elektronik dalam talian menggunakan WebSocket dan JavaScript Dec 18, 2023 pm 03:09 PM

Gambaran keseluruhan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tandatangan elektronik dalam talian: Dengan kemunculan era digital, tandatangan elektronik digunakan secara meluas dalam pelbagai industri untuk menggantikan tandatangan kertas tradisional. Sebagai protokol komunikasi dupleks penuh, WebSocket boleh melakukan penghantaran data dua hala masa nyata dengan pelayan Digabungkan dengan JavaScript, sistem tandatangan elektronik dalam talian boleh dilaksanakan. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk membangunkan dalam talian yang mudah

Pemahaman mendalam tentang pengaturcaraan berorientasikan objek PHP: Teknik nyahpepijat untuk pengaturcaraan berorientasikan objek Pemahaman mendalam tentang pengaturcaraan berorientasikan objek PHP: Teknik nyahpepijat untuk pengaturcaraan berorientasikan objek Jun 05, 2024 pm 08:50 PM

Dengan menguasai status objek penjejakan, menetapkan titik putus, pengecualian penjejakan dan menggunakan sambungan xdebug, anda boleh menyahpepijat kod pengaturcaraan berorientasikan objek PHP dengan berkesan. 1. Jejak status objek: Gunakan var_dump() dan print_r() untuk melihat atribut objek dan nilai kaedah. 2. Tetapkan titik putus: Tetapkan titik putus dalam persekitaran pembangunan, dan penyahpepijat akan berhenti seketika apabila pelaksanaan mencapai titik putus, menjadikannya mudah untuk menyemak status objek. 3. Pengecualian jejak: Gunakan blok try-catch dan getTraceAsString() untuk mendapatkan jejak tindanan dan mesej apabila pengecualian berlaku. 4. Gunakan penyahpepijat: Fungsi xdebug_var_dump() boleh memeriksa kandungan pembolehubah semasa pelaksanaan kod.

See all articles