Memahami prototaip dan rantaian prototaip dalam javascript

Artikel ini memperkenalkan prototaip dan rantaian prototaip dalam JavaScript Rakan yang memerlukan boleh merujuknya.

Prototaip

Seperti yang kita sedia maklum, JavaScript tidak mengandungi model warisan kelas tradisional, tetapi menggunakan model prototaip prototaip. Pelaksanaan kod lebih kurang seperti ini

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

Kimy sendiri tidak mempunyai kaedah sebut apabila dia tidak dapat mencari kaedah dalam objeknya sendiri, dia akan kembali ke prototaipnya untuk mencarinya, iaitu Pelajar.prototaip objek. Di sini kita menggunakan Pelajar pembina

pembina, __proto__ dan rantai prototaip

Kecuali IE, pelayar lain adalah Pada contoh objek Objek , atribut __proto__ bukan standard (dua garis bawah sebelum dan selepas) digunakan, menunjuk kepada objek prototaip objek, iaitu, atribut prototaip pembina.

Mencuri sekeping kod dan gambar

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

Kita dapat melihat bahawa setiap objek mengandungi atribut __proto__, b __proto__ menghala ke atribut prototaip daripada Foo, kaedah pembina untuk membina b; dan Foo.prototaip juga merupakan objek, dan ia juga mempunyai prototaip __proto__ yang menunjuk kepada Objek kaedah pembina yang membinanya. __proto__ Object.prototype dihalakan ke null, yang membentuk rantai prototaip.

Anda juga perlu memahami sekeping kod ini di sini:

Object instanceof Function
//true
Function instanceof Object
//true

Apa yang baru dilakukan

Terdapat juga masalah kecil di sini, ia adalah biasa dalam js Nampaknya tidak banyak perbezaan dalam bentuk fungsi dan pembina (ia tidak perlu menggunakan huruf besar pertama, tetapi huruf pertama pembina biasanya menggunakan huruf besar). Apakah sebenarnya yang dilakukan oleh kata kunci baharu?

Contohnya:

var Kimy = new Student();

baru melakukan tiga perkara:

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1 Mentakrifkan objek kosong

2 🎜>

3. Objek permulaan

Dengan cara ini anda boleh memahami sebab Kimy.__proto__ menunjuk kepada Student.prototype (rujukan yang sama ternyata yang baharu memainkan peranan penting!

Di atas adalah keseluruhan kandungan artikel ini Saya harap anda semua menyukainya. Untuk lebih banyak tutorial berkaitan, sila layari

Tutorial Video JavaScript!