Tutorial Pembelajaran Asas tentang Pewarisan Prototaip dalam Pengetahuan Asas JavaScript

Dalam kebanyakan bahasa pengaturcaraan, terdapat kelas dan objek, dan satu kelas boleh mewarisi kelas lain.
Dalam JavaScript, warisan adalah berasaskan prototaip, yang bermaksud tiada kelas dalam JavaScript, sebaliknya satu objek mewarisi objek lain. :)

1. warisan, proto
Dalam JavaScript, apabila arnab objek mewarisi haiwan objek lain, ini bermakna akan terdapat atribut khas dalam objek arnab: arnab.__proto__ = haiwan;
Apabila mengakses objek arnab, jika jurubahasa tidak dapat mencari atribut dalam arnab, maka ia akan mengikuti rantai __proto__ dan mencari
dalam objek haiwan. Atribut __proto__ dalam chestnut hanya boleh diakses dalam Chrome dan FireFox Sila lihat chestnut:

var animal = { eats: true }
var rabbit = { jumps: true }

rabbit.__proto__ = animal // inherit

alert(rabbit.eats) // true

Atribut makan diakses daripada objek haiwan.
Jika harta telah ditemui dalam objek arnab, harta proto tidak akan diperiksa.
Contoh lain, apabila subkelas juga mempunyai atribut eat, yang dalam kelas induk tidak akan diakses.

var animal = { eats: true }
var fedUpRabbit = { eats: false}

fedUpRabbit.__proto__ = animal 

alert(fedUpRabbit.eats) // false

Anda juga boleh menambah fungsi dalam haiwan, dan ia juga boleh diakses dalam arnab.

var animal = {
 eat: function() {
  alert( "I'm full" )
  this.full = true
 }
}


var rabbit = {
 jump: function() { /* something */ }
}

rabbit.__proto__ = animal 

(1) arnab.makan():
Fungsi rabbit.eat() dilaksanakan dalam dua langkah berikut:
Pertama, jurubahasa mencari arnab.makan Tiada fungsi makan dalam arnab, jadi ia mencari arnab.__proto__ dan menemuinya dalam haiwan.
Fungsi dijalankan dengan ini = arnab. Nilai ini langsung tiada kaitan dengan atribut __proto__.
Oleh itu, this.full = benar dalam arnab:
Mari lihat penemuan baharu yang kita ada di sini Objek memanggil fungsi kelas induk, tetapi ini masih menunjuk kepada objek itu sendiri.
Objek yang dirujuk oleh __proto__ dipanggil prototaip, dan haiwan ialah prototaip arnab (Nota Penterjemah: Ini kerana atribut __proto__ arnab merujuk kepada atribut prototaip haiwan)
(2) Cari semasa membaca, bukan semasa menulis
Apabila membaca objek, seperti this.prop, jurubahasa mencari sifat dalam prototaipnya.
Apabila menetapkan nilai harta, seperti this.prop = nilai, tiada sebab untuk mencarinya, harta (prop) akan ditambah terus ke objek (di sini ini). delete obj.prop adalah serupa, ia hanya memadamkan sifat objek itu sendiri dan sifat dalam prototaip kekal utuh.
(3) Mengenai proto
Jika anda membaca panduan, apa yang kami panggil __proto__ di sini diwakili sebagai [[Prototaip]] dalam panduan. Tanda kurung dua adalah penting kerana terdapat satu lagi atribut yang dipanggil prototaip.

2. Object.create, Object.getPrototypeOf
__proto__ ialah atribut bukan standard yang disediakan oleh Chrome/FireFox dan kekal tidak kelihatan dalam penyemak imbas lain.
Semua penyemak imbas moden kecuali Opera (IE > 9) menyokong dua fungsi standard untuk mengendalikan isu prototaip:

Object.ceate(prop[,props])

Buat objek kosong dengan proto yang diberikan:

var animal = { eats: true }

rabbit = Object.create(animal)

alert(rabbit.eats) // true

Kod di atas mencipta objek arnab kosong dan menetapkan prototaip kepada haiwan
Selepas objek arnab dicipta, kita boleh menambah atribut padanya:

var animal = { eats: true }

rabbit = Object.create(animal)
rabbit.jumps = true

Prop parameter kedua bagi fungsi Object.creat adalah pilihan, yang membenarkan menetapkan sifat seperti objek baharu. Ia ditinggalkan di sini kerana pewarisan hubungan kami.
(1) Object.getPrototypeOf(obj)
Mengembalikan nilai obj.__proto__. Fungsi ini adalah standard dan boleh digunakan dalam penyemak imbas yang tidak mempunyai akses terus kepada atribut __proto__.

var animal = {
 eats: true
}

rabbit = Object.create(animal)

alert( Object.getPrototypeOf(rabbit) === animal ) // true

Pelayar moden membenarkan membaca nilai atribut __proto__, tetapi tidak menetapkannya.

3. Prototaip
Terdapat beberapa cara pelayar silang yang baik untuk menetapkan atribut __proto__, yang akan menggunakan fungsi pembina. ingat! Sebarang fungsi mencipta objek melalui kata kunci baharu.
Berangan:

function Rabbit(name) {
 this.name = name
}

var rabbit = new Rabbit('John')

alert(rabbit.name) // John

Operasi baharu menetapkan atribut prototaip kepada atribut __proto__ objek arnab.
Mari kita lihat cara ia berfungsi, contohnya, objek Arnab baharu dan Arnab mewarisi daripada haiwan.

var animal = { eats: true }

function Rabbit(name) {
 this.name = name
}

Rabbit.prototype = animal

var rabbit = new Rabbit('John')

alert( rabbit.eats ) // true, because rabbit.__proto__ == animal

Arnab.prototaip = haiwan bermaksud literal: set __proto__ = haiwan

untuk semua objek yang dicipta oleh Arnab baharu

4. Cross-browser Object.create(proto)
Fungsi Object.create(prop) berkuasa kerana ia membenarkan pewarisan terus daripada objek tertentu. Ia boleh disimulasikan oleh kod berikut:

function inherit(proto) {
 function F() {}
 F.prototype = proto
 return new F
}

warisan(haiwan) adalah sama sepenuhnya dengan Object.create(animal), mengembalikan objek kosong dan objek.__proto__ = haiwan.
Berangan:

var animal = { eats: true }

var rabbit = inherit(animal)

alert(rabbit.eats) // true
alert(rabbit.hasOwnProperty('eats')) // false, from prototype

Mari kita lihat cara ia berfungsi:

function inherit(proto) {
 function F() {}   // (1)
 F.prototype = proto // (2)
 return new F()   // (3)
}

（1） 创建了一个新函数，函数没有向this设置任何属性，以此`new F` 会创建一个空对象。
（2） `F.prototype`被设置为proto
（3） `new` F创建了一个空对象，对象的`__proto__ = F.prototype`
（4） Bingo! 我们得到了一个继承`proto`的空对象
这个函数广泛适用于各种库和框架之中。
你的函数接受了一个带有options 的对象

/* options contains menu settings: width, height etc */
function Menu(options) {
 // ...
}
你想设置某些options
function Menu(options) {
 options.width = options.width || 300 // set default value
 // ...
}

。。。但是改变参数值可能会产生一些错误的结果，因为options可能会在外部代码中使用。一个解决办法就是克隆options对象，复制所有的属性到一个新的对象中，在新对象中修改，
怎样用继承来解决这个问题呢？ P.S. options可以添加设设置，但是不能被删除。
Solution
你可以继承options，并且在它的子类的中修改或者添加新的属性。

function inherit(proto) {
 function F() {}
 F.prototype = proto
 return new F
}

function Menu(options) {
 var opts = inherit(options)
 opts.width = opts.width || 300
 // ...
}

所有的操作只在子对象中有效，当Menu方法结束时，外部代码仍然可以使用没有修改的过的options对象。delete操作在这里非常重要，如果width是一个prototype中的属性，delete opts.width不会产生任何作用

5. hasOwnProperty
所有的对象都有hasOwnProperty函数，它可以用来检测一个属性是否对象自身还是属于原型
一个栗子：

function Rabbit(name) {
 this.name = name
}

Rabbit.prototype = { eats: true }

var rabbit = new Rabbit('John')

alert( rabbit.hasOwnProperty('eats') ) // false, in prototype

alert( rabbit.hasOwnProperty('name') ) // true, in object

6. Looping with/without inherited properties
for..in循环输出一个对象的所有属性，包括自身的和原型的。

function Rabbit(name) {
 this.name = name
}

Rabbit.prototype = { eats: true }

var rabbit = new Rabbit('John')

for(var p in rabbit) {
 alert (p + " = " + rabbit[p]) // outputs both "name" and "eats"
}

用hasOwnProperty可以过滤得到属于对象自己的属性：

function Rabbit(name) {
 this.name = name
}

Rabbit.prototype = { eats: true }

var rabbit = new Rabbit('John')

for(var p in rabbit) {
 if (!rabbit.hasOwnProperty(p)) continue // filter out "eats"
 alert (p + " = " + rabbit[p]) // outputs only "name"
}

7. Summary
JavaScript是通过一个特殊的属性proto来实现继承的
当访问一个对象的属性时，如果解释器不能在对象中找到，它就会去对象的原型中继续寻找 对函数属性来说，this指向这个对象，而不是它的原型。
赋值obj.prop = value， 删除delete obj.prop
管理proto:
Chrome和FireFox可以直接访问对象的__proto__属性，大多数现代浏览器支持用Object.getPrototypeOf(obj)只读访问。
Object.create(proto) 可以用给定的proto生成空的子对象，或者通过如下代码达到相同的功能：

function inherit(proto) {
   function F() {}   
   F.prototype = proto
   return new F()  
  }

其他方法：
for..in循环输出一个对象的所有属性（包括自身的和原型的）和对象的原型链。
如果一个属性prop属于对象obj那么obj.hasOwnProperty(prop)返回true，否则返回false。