Bagaimana untuk memahami rantaian prototaip javascript

Rantai prototaip sebenarnya ialah rantaian terhad antara objek contoh terhad dan prototaip, yang digunakan untuk melaksanakan sifat kongsi dan warisan. Terdapat dua masalah utama: 1. Menyusahkan untuk menghantar parameter kepada jenis induk 2. Jenis rujukan dalam jenis induk dikongsi oleh semua keadaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Apa sebenarnya yang dilakukan oleh pengendali baharu Ia sebenarnya sangat mudah, ia melakukan tiga perkara.

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Dalam baris pertama, kami mencipta objek kosong obj

Dalam baris kedua, kami menghalakan ahli __proto__ objek kosong ini ke objek ahli prototaip objek fungsi asas

Dalam baris ketiga, kami menggantikan penunjuk ini bagi objek fungsi Base dengan obj, dan kemudian memanggil fungsi Base, jadi kami menetapkan pembolehubah ahli id ​​kepada objek obj Nilai pembolehubah ahli ini ialah "base ". Perihal Penggunaan fungsi panggilan.

Sebelum bercakap tentang rantai prototaip, kita mesti memahami dahulu apakah hubungan antara fungsi tersuai dan Fungsi, dan apakah hubungan yang tidak boleh dipisahkan antara pembina, prototaip dan kejadian? Malah, semua fungsi adalah contoh Fungsi. Terdapat prototaip atribut prototaip pada pembina, yang juga merupakan objek, kemudian terdapat atribut pembina pada objek prototaip, yang menunjuk kepada pembina dan terdapat atribut _proto_ pada objek contoh, yang juga menunjuk kepada prototaip . Objek, dan sifat ini bukan sifat standard dan tidak boleh digunakan dalam pengaturcaraan ini digunakan secara dalaman oleh penyemak imbas.

// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
    //prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的

Seterusnya, mari lihat gambar untuk bercakap.

1. Hubungan antara pembina, prototaip dan kejadian

① Objek

② Susunan Objek Fungsi

Setelah memahami perkara ini, mari kita bincangkan apa itu rantaian prototaip. Secara terang-terangan, ia sebenarnya adalah rantaian terhad yang terbentuk antara objek contoh terhad dan prototaip, yang digunakan untuk melaksanakan sifat dan warisan yang dikongsi. Seterusnya, mari kita lihat kod.

 var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
   obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
   var arr = [];
   arr -> Array.prototype ->Object.prototype -> null
   var o = new Object();
   o -> Object.prototype -> null;

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

Seterusnya ialah isu pewarisan.

2. Warisan

1) Warisan prototaip

function Animal(name){
       this.name = name;
   }
   function Tiger(color){
       this.color = color;
   }
//   var tiger = new Tiger('yellow');
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal('老虎');   //一种方式
   Object.prototype.name = '大老虎';   //第二种方式
        var tiger = new Tiger('yellow');
        console.log(tiger.color);
        console.log(tiger.name);

Perlu diingat bahawa terdapat dua masalah utama di sini: ① Menyusahkan untuk diserahkan kepada jenis induk Parameter; ②Jenis rujukan dalam jenis induk dikongsi oleh semua keadaan

2) ES5 menyediakan kaedah Object.create() untuk melaksanakan warisan

————做兼容
  //shim垫片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

Kaedah ini Ia adalah ciri baharu ES5, yang sebenarnya merupakan pewarisan salinan.

3) Salin warisan

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

4) Warisan pembina yang dipinjam

- ahli prototaip dalam pembina yang dipinjam tidak dipinjam

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

Masalah sedia ada: Masalah lulus parameter dalam warisan prototaip boleh diselesaikan, tetapi ahli (sifat dan kaedah) pada objek prototaip dalam jenis induk tidak boleh diwarisi kepada

5) Warisan gabungan

——Objek prototaip adalah dinamik

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student('张三',12);
stu.showName();
stu.showAge();

[Warisan prototaip meminjam warisan pembina] Cirinya ialah atribut disalin ke setiap contoh dan kaedah dikongsi

[ Ringkasan] Untuk menggunakan kata yang sangat kasar, rantai prototaip yang dipanggil adalah cara mencari ibu Ia boleh difahami bahawa manusia dilahirkan dari ibu manusia, dan raksasa dilahirkan dari raksasa. Sebenarnya hanya terdapat satu teras rantaian prototaip: perkongsian atribut dan kawalan bebas Apabila contoh objek anda memerlukan atribut bebas, intipati semua kaedah adalah untuk mencipta atribut dalam contoh objek. Jika anda tidak berfikir terlalu banyak, anda boleh menentukan secara langsung atribut bebas yang anda perlukan secara peribadi untuk mengatasi atribut prototaip. Ringkasnya, apabila menggunakan warisan prototaip, anda mesti memberi perhatian khusus kepada sifat-sifat dalam prototaip, kerana semuanya mempengaruhi seluruh badan. Kaedah yang paling biasa digunakan sekarang ialah mod gabungan.

1. Rantaian prototaip

1) Hubungan antara pembina, prototaip dan contoh

① Pembina mempunyai prototaip atribut, iaitu objek (contoh Objek )

②Prototaip objek prototaip mempunyai atribut pembina, yang menunjuk kepada pembina yang mana objek prototaip milik

③Objek instance mempunyai atribut _proto_, yang juga menunjuk kepada objek Prototaip pembina, ia adalah atribut bukan standard dan tidak boleh digunakan untuk pengaturcaraan. Ia digunakan oleh penyemak imbas itu sendiri

2) Hubungan antara prototaip dan _proto_

①Prototaip ialah Atribut pembina

②_proto_ ialah atribut objek contoh

                                                                                                                                                                                                                                                                                                                                                                                                                                     Pengumpulan pasangan nilai; nilai dalam pasangan nilai kunci boleh menjadi nilai mana-mana jenis data

iii) Objek ialah bekas dan bekas ini mengandungi (atribut dan kaedah)

3) Carian Atribut

① Apabila mengakses ahli objek, ia akan terlebih dahulu mencari sama ada

wujud dalam objek ② Jika ia tidak wujud dalam objek semasa, ia akan mencari

③ Jika ia tidak ditemui dalam objek prototaip, pergi ke prototaip objek prototaip

④ Sehingga prototaip objek prototaip Objek adalah batal

2. Fungsi

— —Semua fungsi adalah contoh Fungsi

①Objek tempatan: objek yang bebas daripada persekitaran hos (pelayar) - termasuk Objek, Array, Tarikh, RegExp, Fungsi, Ralat, Nombor, Rentetan, Boolean

②Objek terbina dalam - termasuk Matematik, Global (tetingkap, pembolehubah global dalam js), tiada

baharu diperlukan apabila menggunakannya ③Objek hos - termasuk objek tersuai, DOM, BOM

[Pembelajaran yang disyorkan:

Tutorial JavaScript Lanjutan

]

Atas ialah kandungan terperinci Bagaimana untuk memahami rantaian prototaip javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!