__proto__ VS. prototipe dalam JavaScript

Gambar ini kembali menunjukkan bahwa setiap objek memiliki prototipe. Fungsi konstruktor Foo juga memiliki fungsi sendiri __proto__yaitu Function.prototype, dan yang pada gilirannya juga merujuk melalui __proto__propertinya lagi ke Object.prototype. Jadi, ulangi, Foo.prototype hanyalah properti eksplisit Foo yang mengacu pada prototipe objek b dan c.

var b = new Foo(20);
var c = new Foo(30);

Apa perbedaan antara __proto__dan prototype?

Sosok itu diambil dari dmitrysoshnikov.com .

__proto__adalah objek aktual yang digunakan dalam rantai pencarian untuk menyelesaikan metode, dll. prototypeadalah objek yang digunakan untuk membangun __proto__saat Anda membuat objek dengan new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

prototypeadalah properti dari objek Function. Ini adalah prototipe objek yang dibangun oleh fungsi itu.

__proto__adalah properti internal dari suatu objek, menunjuk pada prototipe-nya. Standar saat ini menyediakan Object.getPrototypeOf(O)metode yang setara , meskipun standar de facto __proto__lebih cepat.

Anda dapat menemukan instanceofhubungan dengan membandingkan fungsi prototypeke __proto__rantai objek, dan Anda dapat memutus hubungan ini dengan mengubah prototype.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

Berikut Pointadalah fungsi konstruktor, ia membangun objek (struktur data) secara prosedural. myPointadalah objek yang dibangun oleh Point()karena Point.prototypeitu disimpan myPoint.__proto__pada saat itu.

Properti prototipe dibuat ketika suatu fungsi dideklarasikan.

Contohnya:

 function Person(dob){
    this.dob = dob
 }; 

Person.prototypeproperti dibuat secara internal setelah Anda mendeklarasikan fungsi di atas. Banyak properti dapat ditambahkan ke Person.prototype yang dibagikan oleh instance Person yang dibuat menggunakan Person baru ().

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

Perlu dicatat bahwa Person.prototypeini adalah Objectliteral secara default (dapat diubah sesuai kebutuhan).

Setiap instance yang dibuat menggunakan new Person()memiliki __proto__properti yang menunjuk ke Person.prototype. Ini adalah rantai yang digunakan untuk melintasi untuk menemukan properti dari objek tertentu.

var person1 = new Person(somedate);
var person2 = new Person(somedate);

membuat 2 instance Person, 2 objek ini dapat memanggil agemetode Person.prototypeas person1.age,person2.age .

Pada gambar di atas dari pertanyaan Anda, Anda dapat melihat bahwa itu Fooadalah Function Objectdan oleh karena itu ia memiliki __proto__tautan Function.prototypeyang pada gilirannya adalah contoh dari Objectdan memiliki __proto__tautan ke Object.prototype. Link proto berakhir di sini dengan __proto__di Object.prototypemenunjuk kenull .

Objek apa pun dapat memiliki akses ke semua properti dalam rantai proto sebagaimana ditautkan olehnya __proto__, sehingga membentuk dasar untuk pewarisan prototipal.

__proto__ bukan cara standar untuk mengakses rantai prototipe, standar tetapi pendekatan yang serupa digunakan Object.getPrototypeOf(obj) .

Kode di bawah ini untuk instanceof operator memberikan pemahaman yang lebih baik:

objek instanceofKelas operator kembali trueketika suatu objek adalah turunan dari Kelas, lebih khusus jika Class.prototypeditemukan dalam rantai proto objek itu maka objek adalah turunan dari Kelas itu.

function instanceOf(Func){
  var obj = this;
  while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
      return true;
    obj = Object.getPrototypeOf(obj);
  }
  return false;
}      

Metode di atas dapat disebut sebagai: instanceOf.call(object, Class)yang mengembalikan true jika objek adalah turunan dari Kelas.

Cara yang baik untuk memikirkannya adalah ...

prototypedigunakan oleh constructor()fungsi. Seharusnya benar-benar disebut sesuatu seperti "prototypeToInstall",, karena memang begitu.

dan __proto__apakah "prototipe terpasang" pada objek (yang dibuat / diinstal pada objek dari constructor()fungsi tersebut)

Untuk menjelaskan, mari kita membuat fungsi

 function a (name) {
  this.name = name;
 }

Ketika JavaScript mengeksekusi kode ini, ia menambahkan prototypeproperti ke a, prototypeproperti adalah objek dengan dua properti:

1. constructor
2. __proto__

Jadi ketika kita melakukannya

a.prototype ia kembali

     constructor: a  // function definition
    __proto__: Object

Sekarang seperti yang Anda lihat constructorhanyalah fungsi aitu sendiri dan __proto__menunjuk ke tingkat rootObject JavaScript.

Mari kita lihat apa yang terjadi ketika kita menggunakan afungsi dengan newkata kunci.

var b = new a ('JavaScript');

Ketika JavaScript mengeksekusi kode ini, ia melakukan 4 hal:

1. Itu menciptakan objek baru, objek kosong // {}
2. Ini menciptakan __proto__pada bdan membuatnya menunjuk ke a.prototypesehinggab.__proto__ === a.prototype
3. Ini mengeksekusi a.prototype.constructor(yang merupakan definisi fungsi a) dengan objek yang baru dibuat (dibuat pada langkah # 1) sebagai konteksnya (ini), maka nameproperti dilewatkan sebagai 'JavaScript' (yang ditambahkan kethis ) akan ditambahkan ke objek yang baru dibuat.
4. Ini mengembalikan objek yang baru dibuat di (dibuat pada langkah # 1) sehingga var bakan ditugaskan ke objek yang baru dibuat.

Sekarang jika kita menambah a.prototype.car = "BMW"dan melakukannya b.car , output "BMW" muncul.

ini karena ketika JavaScript mengeksekusi kode ini di mana ia mencari carproperti b, itu tidak menemukan kemudian JavaScript digunakan b.__proto__(yang dibuat untuk menunjuk ke 'a.prototype' pada langkah # 2) dan menemukan carproperti jadi kembalikan "BMW".

Prototipe VS. __proto__ VS. [[Prototipe]]

Saat membuat fungsi, objek properti yang disebut prototipe sedang dibuat secara otomatis (Anda tidak membuatnya sendiri) dan sedang dilampirkan ke objek fungsi (itu constructor).
Catatan : Prototipe baru ini Objek juga menunjuk ke, atau memiliki tautan internal-pribadi ke, Obyek JavaScript asli.

Contoh:

function Foo () {
    this.name = 'John Doe';
}

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' + this.name;
}

Jika Anda membuat objek baru Foodengan menggunakan newkata kunci, pada dasarnya Anda membuat (antara lain) objek baru yang memiliki tautan internal atau pribadi ke Fooprototipe fungsi yang telah kita bahas sebelumnya:

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true

Untuk lebih spesifik, __proto__sebenarnya adalah fungsi pengambil yang milik Objek JavaScript asli. Ia mengembalikan hubungan prototipe internal pribadi apa pun thismengikat (pengembalian yang [[Prototype]]dari b):

b.__proto__ === Foo.prototype // true

Perlu dicatat bahwa mulai dari ECMAScript5, Anda juga dapat menggunakan metode getPrototypeOf untuk mendapatkan tautan pribadi internal:

Object.getPrototypeOf(b) === b.__proto__ // true

Untuk membuatnya sedikit jelas selain jawaban-jawaban hebat di atas:

function Person(name){
    this.name = name
 }; 

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

Contoh memiliki __proto__ , kelas memiliki prototipe .

Dalam JavaScript, fungsi dapat digunakan sebagai konstruktor. Itu berarti kita dapat membuat objek dari mereka menggunakan kata kunci baru. Setiap fungsi konstruktor dilengkapi dengan objek bawaan yang dirantai dengannya. Objek bawaan ini disebut prototipe.Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

1. Pertama kami membuat konstruktor: function Foo(){} . Agar jelas, Foo hanyalah fungsi lain. Tetapi kita dapat membuat objek darinya dengan kata kunci baru. Itu sebabnya kami menyebutnya fungsi konstruktor

2. Setiap fungsi memiliki properti unik yang disebut properti prototipe. Jadi, fungsi Konstruktor Foomemiliki properti prototipe yang menunjuk ke prototipe, yaituFoo.prototype (lihat gambar).

3. Fungsi konstruktor sendiri adalah fungsi yang merupakan turunan dari konstruktor sistem yang disebut konstruktor [[Fungsi]]. Jadi kita dapat mengatakan bahwa function Fooitu dibangun oleh konstruktor [[Fungsi]]. Jadi, tentu __proto__saja kami Foo functionakan menunjukkan prototipe konstruktornya, yaitu Function.prototype.

4. Function.prototypeitu sendiri tidak lain adalah objek yang dibangun dari konstruktor sistem lain yang disebut [[Object]]. Jadi, [[Object]]adalah konstruktor dari Function.prototype. Jadi, bisa kita katakan Function.prototypeadalah turunan dari [[Object]]. Jadi __proto__dari Function.prototypepoin keObject.prototype .

5. Object.prototypeadalah orang terakhir yang berdiri di rantai prototipe. Maksud saya belum dibangun. Sudah ada di sistem. Jadi itu __proto__menunjuk kenull .

6. Sekarang kita sampai pada contoh Foo. Ketika kita membuat instance menggunakan new Foo(), itu menciptakan objek baru yang merupakan instance dari Foo. Itu artinya Fooadalah konstruktor dari instance ini. Di sini kami membuat dua instance (x dan y). __proto__dari x dan y dengan demikian menunjuk ke Foo.prototype.

Ringkasan:

The __proto__properti dari objek adalah properti yang memetakan ke prototypefungsi constructor objek. Dengan kata lain:

instance.__proto__ === constructor.prototype // true

Ini digunakan untuk membentuk prototyperantai suatu objek. The prototypechain adalah mekanisme lookup untuk properti pada objek. Jika properti objek diakses, JavaScript pertama-tama akan melihat objek itu sendiri. Jika properti itu tidak ditemukan di sana, itu akan naik hingga protochainsampai ditemukan (atau tidak)

Contoh:

function Person (name, city) {
  this.name = name;
}

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

Log pertama kita menghasilkan true, ini karena seperti yang disebutkan __proto__properti instance yang dibuat oleh konstruktor merujuk keprototype properti konstruktor. Ingat, dalam JavaScript, fungsi juga merupakan Objek. Objek dapat memiliki properti, dan properti default dari fungsi apa pun adalah salah satu properti bernama prototipe.

Kemudian, ketika fungsi ini digunakan sebagai fungsi konstruktor, objek yang dipakai darinya akan menerima properti yang disebut __proto__. Dan __proto__properti ini merujuk ke prototypeproperti fungsi konstruktor (yang secara default memiliki setiap fungsi).

Mengapa ini berguna?

JavaScript memiliki mekanisme ketika mencari properti Objectsyang disebut 'warisan prototypal' , di sini yang dasarnya:

• Pertama, itu diperiksa jika properti itu terletak di Object itu sendiri. Jika demikian, properti ini dikembalikan.
• Jika properti tidak terletak pada objek itu sendiri, itu akan 'memanjat protochain'. Ini pada dasarnya terlihat pada objek yang dirujuk oleh __proto__properti. Di sana, ia memeriksa apakah properti tersedia pada objek yang dirujuk oleh __proto__.
• Jika properti tidak terletak pada __proto__objek, ia akan memanjat __proto__rantai, sampai ke Objectobjek.
• Jika tidak dapat menemukan properti di mana saja pada objek dan prototyperantainya, ia akan kembali undefined.

Sebagai contoh:

function Person (name) {
  this.name = name;
}

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

Saya kebetulan belajar prototipe dari You Don't Know JS: this & Object Prototypes , yang merupakan buku yang bagus untuk memahami desain di bawahnya dan mengklarifikasi begitu banyak kesalahpahaman (itulah sebabnya saya berusaha menghindari penggunaan pewarisan dan hal-hal seperti instanceof).

Tetapi saya memiliki pertanyaan yang sama dengan yang ditanyakan orang-orang di sini. Beberapa jawaban sangat membantu dan mencerahkan. Saya juga ingin berbagi pemahaman saya.

Apa itu prototipe?

Objek dalam JavaScript memiliki properti internal, dilambangkan dalam spesifikasi sebagai [[Prototype]], yang hanya merupakan referensi ke objek lain. Hampir semua benda diberi nullnilai untuk properti ini, pada saat penciptaannya.

Bagaimana cara mendapatkan prototipe objek?

melalui __proto__atauObject.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

Apa itu prototype?

prototypeadalah objek yang secara otomatis dibuat sebagai properti khusus dari suatu fungsi , yang digunakan untuk menetapkan rantai delegasi (warisan), alias rantai prototipe.

Ketika kita membuat fungsi a, prototypesecara otomatis dibuat sebagai properti khusus adan menyimpan kode fungsi aktif sebagai constructoraktif prototype.

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

Saya ingin mempertimbangkan properti ini sebagai tempat untuk menyimpan properti (termasuk metode) dari objek fungsi. Itu juga alasan mengapa fungsi utilitas di JS didefinisikan seperti Array.prototype.forEach(),Function.prototype.bind() ,Object.prototype.toString().

Mengapa harus menekankan sifat suatu fungsi ?

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

Jadi, Arary, Function, Objectsemua fungsi. Saya harus mengakui bahwa ini menyegarkan kesan saya di JS. Saya tahu fungsi adalah warga negara kelas satu di JS tetapi tampaknya dibangun berdasarkan fungsi.

Apa perbedaan antara __proto__dan prototype?

__proto__referensi berfungsi pada setiap objek untuk merujuk ke [[Prototype]]propertinya.

prototypeadalah objek yang secara otomatis dibuat sebagai properti khusus dari suatu fungsi , yang digunakan untuk menyimpan properti (termasuk metode) dari objek fungsi.

Dengan keduanya, kita bisa memetakan rantai prototipe secara mental. Seperti yang diilustrasikan gambar ini:

function Foo() {}
var b = new Foo();

b.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

Dalam JavaScript, Setiap objek (fungsi juga objek!) Memiliki __proto__properti, properti tersebut merujuk pada prototipe-nya.

Ketika kami menggunakan newoperator dengan konstruktor untuk membuat objek baru, __proto__properti objek baru akan ditetapkan dengan konstruktorprototype properti , maka konstruktor akan dipanggil oleh objek baru, dalam proses itu "ini" akan menjadi referensi ke objek baru dalam lingkup konstruktor, akhirnya mengembalikan objek baru.

Prototipe konstruktor adalah __proto__properti, properti konstruktor prototypebekerja dengan newoperator.

Konstruktor harus berupa fungsi, tetapi fungsi tidak selalu merupakan konstruktor walaupun memiliki prototypeproperti.

Rantai prototipe sebenarnya adalah __proto__properti objek untuk referensi prototipe, dan __proto__properti prototipe untuk referensi prototipe prototipe, dan seterusnya, sampai referensi __proto__properti prototipe objek yang mengacu pada nol.

Sebagai contoh:

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

[[Prototype]]dan __proto__properti sebenarnya adalah hal yang sama.

Kita dapat menggunakan metode getPrototypeOf Object untuk mendapatkan prototipe sesuatu.

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

Fungsi apa pun yang kami tulis dapat digunakan untuk membuat objek dengan newoperator, sehingga siapa pun dari fungsi tersebut dapat menjadi konstruktor.

Cara lain yang baik untuk memahaminya:

var foo = {}

/* 
foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
*/
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

Hanya setelah IE11 __proto__didukung. Sebelum versi itu, seperti IE9, Anda bisa menggunakan constructoruntuk mendapatkan __proto__.

prototipe

prototipe adalah properti dari suatu Fungsi. Ini adalah cetak biru untuk membuat objek dengan menggunakan fungsi (konstruktor) dengan kata kunci baru.

__proto__digunakan dalam rantai pencarian untuk menyelesaikan metode, properti. ketika sebuah objek dibuat (menggunakan fungsi konstruktor dengan kata kunci baru), __proto__diatur ke (Konstruktor) Function.prototype

function Robot(name) {
    this.name = name;
}
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

Inilah penjelasan (khayalan) saya untuk menghapus kebingungan:

Bayangkan ada kelas imajiner (cetak biru / pemotong coockie) yang terkait dengan fungsi. Kelas imajiner itu digunakan untuk instantiate objek. prototypeadalah mekanisme ekstensi (metode ekstensi dalam C #, atau Swift Extension) untuk menambahkan sesuatu ke kelas imajiner itu.

function Robot(name) {
    this.name = name;
}

Di atas dapat dibayangkan sebagai:

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

} 

Begitu,

var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

Sekarang menambahkan metode ke prototypeRobot:

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

Di atas dapat dibayangkan sebagai ekstensi dari kelas Robot:

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y
    }
}

Yang pada gilirannya,

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y
    };
}

Untuk membuatnya lebih sederhana:

> var a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

Ini memungkinkan Anda untuk melampirkan properti ke X.prototype SETELAH objek tipe X telah dipakai, dan mereka masih akan mendapatkan akses ke properti baru melalui referensi __proto__ yang digunakan mesin Javascript untuk berjalan di rantai prototipe.

Prototipe atau Object.prototype adalah properti dari objek literal. Ini mewakili objek prototipe objek yang dapat Anda timpa untuk menambahkan lebih banyak properti atau metode lebih lanjut di sepanjang rantai prototipe.

__proto__ adalah properti accessor (fungsi get and set) yang mengekspos prototipe internal objek melalui mana ia diakses.

Referensi:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

2. http://www.w3schools.com/js/js_object_prototypes.asp

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

Saya tahu, saya terlambat tetapi biarkan saya mencoba menyederhanakannya.

Katakanlah ada fungsi

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

Fungsi Foo akan memiliki objek prototipe yang ditautkan. Jadi, Setiap kali kita membuat fungsi dalam JavaScript, ia selalu memiliki objek prototipe yang terhubung dengannya.

Sekarang mari kita pergi ke depan dan membuat dua objek menggunakan fungsi Foo.

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);

1. Sekarang kita memiliki dua objek, objek a dan objek b. Keduanya dibuat menggunakan konstruktor Foo. Perlu diingat konstruktor hanyalah sebuah kata di sini.
2. Objek a dan b keduanya memiliki salinan properti pesan.
3. Kedua objek a dan b ini terkait dengan objek prototipe konstruktor Foo.
4. Pada objek a dan b, kita dapat mengakses prototipe Foo menggunakan properti proto di semua browser dan di IE kita dapat menggunakan Object.getPrototypeOf (a) atau Object.getPrototypeOf (b)

Sekarang, Foo.prototype, a. proto , dan b. proto all menunjukkan objek yang sama.

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

semua di atas akan mengembalikan true.

Seperti yang kita ketahui, dalam JavaScript properti dapat ditambahkan secara dinamis. Kita dapat menambahkan properti ke objek

    Foo.prototype.Greet = function(){

         console.log(this.message);
    }
    a.Greet();//a
    b.Greet();//b
    a.constructor.prototype.Greet();//undefined 

Seperti yang Anda lihat kami menambahkan metode Greet () di Foo.prototype tetapi dapat diakses di a dan b atau objek lain yang dibangun menggunakan Foo.

Saat menjalankan a.Greet (), JavaScript pertama-tama akan mencari Greet in object a pada daftar properti. Jika tidak menemukan, itu akan naik dalam rantai proto a. Sejak. proto dan Foo.prototype adalah objek yang sama, JavaScript akan menemukan metode Greet () dan menjalankannya.

Saya harap, sekarang prototipe dan proto disederhanakan sedikit.

Contoh penjelasan:

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

sekarang, myPupppie memiliki __proto__properti yang mengarah ke Dog.prototype.

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

tetapi myPuppie TIDAK memiliki properti prototipe.

> myPuppie.prototype
>> undefined

Jadi, __proto__dari mypuppie adalah referensi ke properti .prototype dari fungsi konstruktor yang digunakan untuk instantiate objek ini (dan objek myPuppie saat ini memiliki hubungan "delegasi ke" dengan ini__proto__ objek ), sedangkan properti .protype dari myPuppie tidak ada (karena kami tidak mengaturnya).

Penjelasan yang baik oleh MPJ di sini: proto vs prototipe - Pembuatan Objek dalam JavaScript

Saya telah membuat sendiri gambar kecil yang mewakili cuplikan kode berikut:

var Cat = function() {}
var tom = new Cat()

Saya memiliki latar belakang OO klasik, jadi sangat membantu untuk mewakili hierarki dengan cara ini. Untuk membantu Anda membaca diagram ini, perlakukan persegi panjang pada gambar sebagai objek JavaScript. Dan ya, fungsi juga objek. ;)

Objek dalam JavaScript memiliki properti dan __proto__hanya salah satunya.

Gagasan di balik properti ini adalah untuk menunjuk ke objek leluhur dalam hierarki (warisan).

Objek root dalam JavaScript adalah Object.prototypedan semua objek lainnya adalah turunan dari objek ini. The __proto__properti dari objek akar null, yang merupakan akhir rantai warisan.

Anda akan melihat bahwa itu prototypeadalah properti fungsi. Catadalah fungsi, tetapi juga Functiondan Objectmerupakan fungsi (asli). tombukan fungsi, jadi tidak memiliki properti ini.

Gagasan di balik properti ini adalah untuk menunjuk ke objek yang akan digunakan dalam konstruksi, yaitu ketika Anda memanggil newoperator pada fungsi itu.

Perhatikan bahwa objek prototipe (persegi kuning) memiliki properti lain yang disebut constructoryang menunjuk kembali ke objek fungsi masing-masing. Untuk alasan singkatnya ini tidak digambarkan.

Memang, ketika kita membuat tomobjek dengan new Cat(), objek yang dibuat akan memiliki __proto__properti yang disetel ke prototypeobjek fungsi konstruktor.

Pada akhirnya, mari kita bermain dengan diagram ini sedikit. Pernyataan berikut ini benar:

• tom.__proto__properti menunjuk ke objek yang sama dengan Cat.prototype.

• Cat.__proto__menunjuk ke Function.prototypeobjek, seperti suka Function.__proto__dan Object.__proto__lakukan.

• Cat.prototype.__proto__dan tom.__proto__.__proto__arahkan ke objek yang sama dan itu Object.prototype.

Bersulang!

DEFINISI

(angka di dalam tanda kurung () adalah 'tautan' ke kode yang ditulis di bawah ini)

prototype- objek yang terdiri dari:
=> fungsi (3) khusus ini ConstructorFunction.prototype(5) yang dapat diakses oleh masing-masing objek (4) dibuat atau akan dibuat melalui fungsi konstruktor ini (1)
=> fungsi konstruktor itu sendiri (1) )
=> __proto__objek khusus ini (objek prototipe)

__proto__ (dandor proto?) - tautan ANTARA objek apa pun (2) dibuat melalui fungsi konstruktor tertentu (1), DAN properti objek prototipe (5) dari konstruktor itu YANG memungkinkan setiap objek yang dibuat (2) memiliki akses ke fungsi prototipe dan metode (4) (__proto__ secara default termasuk dalam setiap objek tunggal di JS)

KLARIFIKASI KODE

1.

    function Person (name, age) {
        this.name = name;
        this.age = age;  

    } 

2.

    var John = new Person(‘John’, 37);
    // John is an object

3.

    Person.prototype.getOlder = function() {
        this.age++;
    }
    // getOlder is a key that has a value of the function

4.

    John.getOlder();

5.

    Person.prototype;

Saya akan mencoba penjelasan kelas 4:

Segalanya sangat sederhana. A prototypeadalah contoh bagaimana sesuatu harus dibangun. Begitu:

• Saya functiondan saya membangun objek baru yang mirip dengan sayaprototype

• Saya seorang objectdan saya dibangun menggunakan __proto__contoh saya

bukti :

function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined

Setiap fungsi yang Anda buat memiliki properti yang disebut prototype, dan ia memulai kehidupannya sebagai objek kosong. Properti ini tidak digunakan sampai Anda menggunakan fungsi ini sebagai fungsi konstruktor yaitu dengan kata kunci 'baru'.

Ini sering dikacaukan dengan __proto__properti dari suatu objek. Beberapa orang mungkin menjadi bingung dan kecuali bahwa prototypeproperti dari suatu objek mungkin menjadikan mereka proto dari suatu objek. Tapi ini tidak terjadi. prototypedigunakan untuk mendapatkan __proto__objek yang dibuat dari function constructor.

Dalam contoh di atas:

function Person(name){
    this.name = name
}; 

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

Saya harap ini masuk akal.

Bagaimana dengan menggunakan __proto__metode statis?

function Foo(name){
  this.name = name
  Foo.__proto__.collection.push(this)
  Foo.__proto__.count++

}

Foo.__proto__.count=0
Foo.__proto__.collection=[]

var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.count;//2
Foo.collection // [{...}, {...}]
bar.count // undefined

(function(){ 
      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();
      console.log(a.b);
      console.log(q.b) 
    })()

Coba kode ini untuk mengerti

Hanya ada satu objek yang digunakan untuk rantai protypal. Objek ini jelas memiliki nama dan nilai: __proto__adalah namanya, dan prototypeadalah nilainya. Itu saja.

untuk membuatnya lebih mudah dipahami, lihat diagram di bagian atas posting ini (Diagram oleh dmitry soshnikov), Anda tidak akan pernah menemukan __proto__poin ke hal lain selain prototypesebagai nilainya.

Intinya adalah ini: __proto__adalah nama yang mereferensikan objek prototypal, dan prototypemerupakan objek prototypal yang sebenarnya.

Ini seperti mengatakan:

let x = {name: 'john'};

xadalah nama objek (penunjuk), dan {name: 'john'}merupakan objek aktual (nilai data).

CATATAN: ini hanya petunjuk sederhana yang disederhanakan tentang bagaimana mereka terkait pada tingkat tinggi.

Pembaruan: Ini adalah contoh javascript konkret sederhana untuk ilustrasi yang lebih baik:

let x = new String("testing") // Or any other javascript object you want to create

Object.getPrototypeOf(x) === x.__proto__; // true

Ini berarti bahwa ketika Object.getPrototypeOf(x)membuat kita nilai sebenarnya dari x(yang merupakan prototipe), adalah apa yang __proto__dari xmenunjuk ke. Oleh karena __proto__itu memang menunjuk ke prototipe x. Demikian __proto__referensi x(penunjuk x), dan prototypemerupakan nilai x(prototipe-nya).

Saya harap ini agak jelas sekarang.

Ini adalah pertanyaan yang sangat penting yang relevan bagi siapa saja yang ingin memahami warisan prototipikal. Dari apa yang saya mengerti, prototipe ditugaskan secara default ketika suatu objek dibuat dengan yang baru dari suatu fungsi karena Fungsi memiliki objek prototipe menurut definisi:

function protofoo(){
}
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]

Ketika kita membuat objek biasa tanpa yang baru, yaitu secara eksplisit dari suatu fungsi, ia tidak memiliki prototipe tetapi memiliki proto kosong yang dapat diberikan prototipe.

var foo={
  check: 10
};
console.log(foo.__proto__); // empty
console.log(bar.prototype); //  TypeError
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo

Kita dapat menggunakan Object.create untuk menautkan objek secara eksplisit.

// we can create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`

__proto__adalah basis untuk membangun prototypedan fungsi konstruktor misalnya: function human(){}memiliki prototypeyang dibagikan melalui __proto__dalam instance baru dari fungsi konstruktor. Bacalah lebih rinci di sini

Seperti ini dinyatakan dengan benar

__proto__adalah objek aktual yang digunakan dalam rantai pencarian untuk menyelesaikan metode, dll. prototipe adalah objek yang digunakan untuk membangun __proto__saat Anda membuat objek dengan yang baru:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

Kita selanjutnya dapat mencatat bahwa __proto__properti dari objek yang dibuat menggunakan titik-titik fungsi konstruktor ke lokasi memori yang ditunjukkan oleh prototipe properti konstruktor masing-masing.

Jika kita mengubah lokasi memori prototipe fungsi konstruktor, __proto__objek yang diturunkan masih akan terus mengarah ke ruang alamat asli. Oleh karena itu untuk membuat properti umum tersedia di rantai pewarisan, selalu tambahkan properti ke prototipe fungsi konstruktor , alih-alih menginisialisasi ulang (yang akan mengubah alamat memorinya).

Perhatikan contoh berikut:

function Human(){
    this.speed = 25;
}

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;
}

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25

Pemahaman saya adalah: __proto__ dan prototipe semuanya disajikan untuk teknik rantai prototipe. perbedaannya adalah fungsi yang diberi nama underscore (seperti __proto__) tidak bertujuan untuk pengembang yang dipanggil secara eksplisit sama sekali. dengan kata lain, mereka hanya untuk beberapa mekanisme seperti pewarisan dll. mereka adalah 'back-end'. tetapi fungsi-fungsi yang dinamai tanpa garis bawah dirancang untuk dipanggil secara eksplisit, mereka 'front-end'.

!!! INI ADALAH PENJELASAN TERBAIK DI DUNIA !!!!!

var q = {}
var prototype = {prop: 11}

q.prop // undefined
q.__proto__ = prototype
q.prop // 11

dalam fungsi konstruktor panggilan mesin javascript ini q.__proto__ = prototypesecara otomatis ketika kita menulis new Class, dan masuk ke __proto__set propClass.prototype

function Class(){}
Class.prototype = {prop: 999} // set prototype as we need, before call new

var q = new Class() // q.__proto__ = Class.prototype
q.prop // 999

Nikmati %)