In den meisten Programmiersprachen gibt es Klassen und Objekte, und eine Klasse kann andere Klassen erben.
In JavaScript erfolgt die Vererbung prototypbasiert, was bedeutet, dass es in JavaScript keine Klassen gibt, sondern ein Objekt ein anderes Objekt erbt. :)
1. Vererbung, der Proto
Wenn in JavaScript ein Objektkaninchen ein anderes Objekttier erbt, bedeutet dies, dass das Kaninchenobjekt ein spezielles Attribut enthält: Rabbit.__proto__ = animal;
Wenn der Interpreter beim Zugriff auf das Kaninchenobjekt das Attribut im Kaninchen nicht finden kann, folgt er der __proto__-Kette und sucht im Tierobjekt nach
.
Das __proto__-Attribut in der Kastanie ist nur in Chrome und Firefox verfügbar. Bitte sehen Sie sich eine Kastanie an:
var animal = { eats: true }
var rabbit = { jumps: true }
rabbit.__proto__ = animal // inherit
alert(rabbit.eats) // true
Der Zugriff auf das eats-Attribut erfolgt über das Tierobjekt.
Wenn die Eigenschaft im Rabbit-Objekt gefunden wurde, wird die Proto-Eigenschaft nicht überprüft.
Ein weiteres Beispiel: Wenn die Unterklasse auch das Attribut eats hat, wird nicht auf das Attribut in der übergeordneten Klasse zugegriffen.
var animal = { eats: true }
var fedUpRabbit = { eats: false}
fedUpRabbit.__proto__ = animal
alert(fedUpRabbit.eats) // false
Sie können eine Funktion auch in animal hinzufügen und auch in Rabbit darauf zugreifen.
var animal = {
eat: function() {
alert( "I'm full" )
this.full = true
}
}
var rabbit = {
jump: function() { /* something */ }
}
rabbit.__proto__ = animal
(1) Rabbit.eat():
Die Funktion Rabbit.eat() wird in den folgenden zwei Schritten ausgeführt:
Zuerst sucht der Interpreter nach Rabbit.eat. Da es in Rabbit keine Eat-Funktion gibt, sucht er nach Rabbit.__proto__ und findet sie in Animal.
Die Funktion wird mit this = Rabbit ausgeführt. Der Wert this hat absolut nichts mit dem Attribut __proto__ zu tun.
Daher ist this.full = true in Rabbit:
Mal sehen, welche neue Entdeckung wir hier haben. Ein Objekt ruft eine übergeordnete Klassenfunktion auf, aber dies zeigt immer noch auf das Objekt selbst. Dies ist Vererbung.
Das Objekt, auf das __proto__ verweist, wird als Prototyp bezeichnet, und animal ist der Prototyp des Kaninchens (Anmerkung des Übersetzers: Dies liegt daran, dass sich das Attribut __proto__ des Kaninchens auf das Prototypattribut des Tieres bezieht)
(2) Suche beim Lesen, nicht beim Schreiben
Beim Lesen eines Objekts wie this.prop sucht der Interpreter nach der Eigenschaft in seinem Prototyp.
Beim Festlegen eines Eigenschaftswerts wie this.prop = value gibt es keinen Grund, danach zu suchen. Die Eigenschaft (prop) wird direkt zum Objekt (hier this) hinzugefügt. delete obj.prop ist ähnlich, es löscht nur die Eigenschaften des Objekts selbst und die Eigenschaften im Prototyp bleiben erhalten.
(3) Über Proto
Wenn Sie den Leitfaden lesen, wird das, was wir hier __proto__ nennen, im Leitfaden als [[Prototyp]] dargestellt. Die doppelten Klammern sind wichtig, da es ein weiteres Attribut namens Prototyp gibt.
2. Object.create, Object.getPrototypeOf
__proto__ ist ein nicht standardmäßiges Attribut, das von Chrome/FireFox bereitgestellt wird und in anderen Browsern unsichtbar bleibt.
Alle modernen Browser außer Opera (IE > 9) unterstützen zwei Standardfunktionen zur Behandlung von Prototypproblemen:
Object.ceate(prop[,props])
Erstellen Sie ein leeres Objekt mit dem angegebenen Proto:
var animal = { eats: true }
rabbit = Object.create(animal)
alert(rabbit.eats) // true
Der obige Code erstellt ein leeres Kaninchenobjekt und setzt den Prototyp auf Tier
Nachdem das Kaninchenobjekt erstellt wurde, können wir ihm Attribute hinzufügen:
var animal = { eats: true }
rabbit = Object.create(animal)
rabbit.jumps = true
Der zweite Parameter props der Funktion Object.creat ist optional und ermöglicht das Festlegen von Eigenschaften wie einem neuen Objekt. Aufgrund der Vererbung unserer Beziehung wird hier darauf verzichtet.
(1) Object.getPrototypeOf(obj)
Gibt den Wert von obj.__proto__ zurück. Diese Funktion ist Standard und kann in Browsern verwendet werden, die keinen direkten Zugriff auf das __proto__-Attribut haben.
var animal = {
eats: true
}
rabbit = Object.create(animal)
alert( Object.getPrototypeOf(rabbit) === animal ) // true
Moderne Browser erlauben das Lesen des Attributwerts __proto__, aber nicht das Setzen.
3. Der Prototyp
Es gibt einige gute browserübergreifende Möglichkeiten, das __proto__-Attribut festzulegen, das Konstruktorfunktionen verwendet. erinnern! Jede Funktion erstellt ein Objekt über das Schlüsselwort new.
Eine Kastanie:
function Rabbit(name) {
this.name = name
}
var rabbit = new Rabbit('John')
alert(rabbit.name) // John
Die neue Operation setzt die Attribute des Prototyps auf das Attribut __proto__ des Rabbit-Objekts.
Werfen wir einen Blick darauf, wie es funktioniert, zum Beispiel das neue Rabbit-Objekt, und Rabbit erbt von 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 literal bedeutet: setze __proto__ = animal
für alle von new Rabbit erstellten Objekte4. Browserübergreifendes Object.create(proto)
Die Funktion Object.create(prop) ist leistungsstark, da sie die direkte Vererbung von einem bestimmten Objekt ermöglicht. Es kann durch den folgenden Code simuliert werden:
function inherit(proto) {
function F() {}
F.prototype = proto
return new F
}
inherit(animal) ist völlig äquivalent zu Object.create(animal), gibt ein leeres Objekt zurück und object.__proto__ = animal.
Eine Kastanie:
var animal = { eats: true }
var rabbit = inherit(animal)
alert(rabbit.eats) // true
alert(rabbit.hasOwnProperty('eats')) // false, from prototype
Schauen wir uns an, wie es funktioniert:
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。
