Tutoriel d'apprentissage de base sur l'héritage prototypique en JavaScript_Basic Knowledge

Dans la plupart des langages de programmation, il existe des classes et des objets, et une classe peut hériter d'autres classes.
En JavaScript, l'héritage est basé sur un prototype, ce qui signifie qu'il n'y a pas de classes en JavaScript, mais qu'un objet hérite d'un autre objet. :)

1. l'héritage, le proto
En JavaScript, lorsqu'un objet lapin hérite d'un autre objet animal, cela signifie qu'il y aura un attribut spécial dans l'objet lapin : lapin.__proto__ = animal;
Lors de l'accès à l'objet lapin, si l'interprète ne trouve pas l'attribut dans lapin, alors il suivra la chaîne __proto__ et cherchera
dans l'objet animal. L'attribut __proto__ dans le châtaignier n'est accessible que dans Chrome et FireFox. Veuillez consulter un châtaigne :
.

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

rabbit.__proto__ = animal // inherit

alert(rabbit.eats) // true

L'attribut eats est accessible à partir de l'objet animal.
Si la propriété a été trouvée dans l'objet lapin, la propriété proto ne sera pas vérifiée.
Autre exemple, lorsque la sous-classe possède également l'attribut eats, celui de la classe parent ne sera pas accessible.

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

fedUpRabbit.__proto__ = animal 

alert(fedUpRabbit.eats) // false

Vous pouvez également ajouter une fonction en animal, et elle est également accessible en lapin.

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


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

rabbit.__proto__ = animal 

(1) lapin.eat() :
La fonction lapin.eat() s'exécute en deux étapes suivantes :
Tout d’abord, l’interprète recherche lapin.eat Il n’y a pas de fonction manger dans lapin, il recherche donc lapin.__proto__ et le trouve dans animal.
La fonction est exécutée avec this = lapin. La valeur this n'a absolument rien à voir avec l'attribut __proto__.
Donc this.full = true chez le lapin :
Voyons quelle nouvelle découverte nous avons ici. Un objet appelle une fonction de classe parent, mais cela pointe toujours vers l'objet lui-même. Il s'agit d'un héritage.
L'objet référencé par __proto__ est appelé un prototype, et l'animal est le prototype du lapin (Note du traducteur : c'est parce que l'attribut __proto__ du lapin fait référence à l'attribut prototype de l'animal)
(2) Rechercher en lisant, pas en écrivant
Lors de la lecture d'un objet, tel que this.prop, l'interpréteur recherche la propriété dans son prototype.
Lors de la définition d'une valeur de propriété, telle que this.prop = value, il n'y a aucune raison de la rechercher, la propriété (prop) sera ajoutée directement à l'objet (ici this). delete obj.prop est similaire, il supprime uniquement les propriétés de l'objet lui-même et les propriétés du prototype restent intactes.
(3) À propos du proto
Si vous lisez le guide, ce que nous appelons ici __proto__ est représenté par [[Prototype]] dans le guide. Les doubles crochets sont importants car il existe un autre attribut appelé prototype.

2. Objet.create, Objet.getPrototypeOf
__proto__ est un attribut non standard fourni par Chrome/FireFox et reste invisible dans les autres navigateurs.
Tous les navigateurs modernes, à l'exception d'Opera (IE > 9), prennent en charge deux fonctions standard pour gérer les problèmes de prototype :

Object.ceate(prop[,props])

Créez un objet vide avec le proto donné :

var animal = { eats: true }

rabbit = Object.create(animal)

alert(rabbit.eats) // true

Le code ci-dessus crée un objet lapin vide et définit le prototype sur animal
Une fois l'objet lapin créé, nous pouvons lui ajouter des attributs :

var animal = { eats: true }

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

Le deuxième paramètre props de la fonction Object.creat est facultatif, ce qui permet de définir des propriétés comme un nouvel objet. Il est omis ici en raison de l’héritage de notre relation.
(1) Objet.getPrototypeOf(obj)
Renvoie la valeur de obj.__proto__. Cette fonction est standard et peut être utilisée dans les navigateurs qui n'ont pas d'accès direct à l'attribut __proto__.

var animal = {
 eats: true
}

rabbit = Object.create(animal)

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

Les navigateurs modernes permettent de lire la valeur de l'attribut __proto__, mais pas de la définir.

3. Le prototype
Il existe de bonnes méthodes multi-navigateurs pour définir l'attribut __proto__, qui utilisera les fonctions du constructeur. souviens-toi! Toute fonction crée un objet via le nouveau mot-clé.
Une châtaigne :

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

var rabbit = new Rabbit('John')

alert(rabbit.name) // John

La nouvelle opération définit les attributs du prototype sur l'attribut __proto__ de l'objet lapin.
Jetons un coup d'œil à son fonctionnement, par exemple avec le nouvel objet Rabbit et Rabbit hérite d'un animal.

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

Rabbit.prototype = animal littéral signifie : définir __proto__ = animal

pour tous les objets créés par le nouveau Rabbit

4. Objet.create (proto) multi-navigateurs
La fonction Object.create(prop) est puissante car elle permet l'héritage direct d'un objet donné. Il peut être simulé par le code suivant :

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

inherit(animal) est complètement équivalent à Object.create(animal), renvoyant un objet vide, et object.__proto__ = animal.
Une châtaigne :

var animal = { eats: true }

var rabbit = inherit(animal)

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

Voyons comment cela fonctionne :

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。