Xiaobai spricht über das Verständnis der Chain_Javascript-Fähigkeiten von JS-Prototypen

Die Prototypenkette ist etwas verwirrend und es gibt viele Informationen im Internet. Immer wenn ich nachts nicht schlafen kann, finde ich im Internet immer wieder Artikel zu Prototypenketten und Verschlüssen. und die Wirkung ist ausgezeichnet.

Lassen Sie sich nicht auf diesen Haufen Terminologie ein, es wird Ihnen wirklich nichts weiterbringen, als Ihren Verstand zu verdrehen. Schauen wir uns die Prototypenkette einfach und grob an und denken wir an Dinge, die nichts mit Code zu tun haben, wie Menschen, Monster und Transen.

1) Menschen werden aus Menschen geboren, Monster werden aus Monstern geboren. Sowohl Menschen als auch Dämonen sind Objektinstanzen, und Menschen und Dämonen sind Prototypen. Prototypen sind auch Objekte, sogenannte Prototypobjekte.

2) Sex mit einer menschlichen Mutter und einem menschlichen Vater kann eine Menge menschlicher Babys zur Welt bringen, und Sex mit einer dämonischen Mutter und einem dämonischen Vater kann eine Menge dämonischer Babys zur Welt bringen Konstrukteur, allgemein bekannt als Erschaffung von Menschen.

3) Renfu zeichnet die Geschlechtsinformationen auf, sodass Sie die Geschlechtsinformationen über Renfu finden können, was bedeutet, dass Sie den Konstruktor über das Prototypobjekt finden können.

4) Menschen können viele Babys zur Welt bringen, aber diese Babys haben nur eine Mutter. Das ist die Einzigartigkeit des Prototyps.

5) Menschen werden auch aus Menschen geboren, und durch Menschen können wir andere Menschen finden. Diese Beziehung wird als Prototypenkette bezeichnet.

6) Die Prototypenkette ist nicht unendlich. Wenn Sie weiter nach oben schauen, werden Sie feststellen, dass keiner der Menschen... kein Mensch ist, und darauf weist die Prototypenkette letztendlich hin.

7) Die von einem Menschen geborene Person wird wie ein Mensch aussehen und das von einem Monster geborene Monster wird hässlich wie ein Monster sein. Dies nennt man Vererbung.

8) Du hast die Hautfarbe deiner Mutter geerbt, deine Mutter hat die Hautfarbe deiner Mutter geerbt, die Hautfarbe deiner Mutter, die deiner Mutter ..., das ist das Erbe der Prototypenkette.

9) Wenn Sie kein Zuhause haben, dann bezieht sich Ihr Zuhause auf das Zuhause Ihrer Mutter; wenn Ihre Mutter kein Zuhause hat, dann bezieht sich Ihr Zuhause auf das Zuhause Ihrer Mutter... Dies ist die Aufwärtssuche des Prototyps Kette.

10) Sie werden das Aussehen Ihrer Mutter erben, aber Sie können Ihre Haare auch färben, waschen, schneiden und föhnen, was bedeutet, dass die Eigenschaften des Objekts angepasst werden können und die geerbten Eigenschaften überschreiben.

11) Obwohl Ihre Haare nach dem Waschen, Schneiden und Föhnen gelb gefärbt sind, können Sie das Aussehen Ihrer Mutter nicht ändern. Die jüngeren Geschwister Ihrer Mutter haben nichts mit Ihren gelben Haaren zu tun Die Eigenschaften der Objektinstanz können nicht geändert werden.

12) Aber wenn Ihr Haus durch Ihr Spiel mit dem Feuer niedergebrannt wird, bedeutet das, dass Ihr Haus, das Haus Ihrer Mutter und die Häuser Ihrer Brüder alle niedergebrannt sind. Dies ist die gemeinsame Nutzung von Prototypattributen.

13) Der Spitzname deiner Mutter ist A-Zhen, und die Tanten von nebenan nennen dich A-Zhen'er, aber die Frisur deiner Mutter wurde von „Rejoice“ in „Golden Retriever Lion Queen“ geändert, und die Tanten von nebenan haben ihre Haare geändert Name, um Sie Golden Retriever Lion Prince zu nennen. Dies wird als Prototyp-Geschlecht bezeichnet.

14) Deine Mutter liebt Schönheit, deshalb ist sie nach Korea gegangen, um sich einer Schönheitsoperation zu unterziehen, sodass deine Mutter sie nicht einmal wiedererkennen kann. Obwohl sich die Haare deiner Mutter wieder in Freude verwandelt haben, nennt dich die Nachbarin von nebenan immer noch Golden Retriever Prinz. Da niemand Ihre Mutter erkannte, wurde Ihre Mutter nach einer Schönheitsoperation neu erstellt. Dies ist eine völlige Neufassung des Prototyps.

Nein! Du hast genug! Nicht BB! Zeig mir den Code!

function Person (name) { this.name = name; }
function Mother () { }
Mother.prototype = { //Mother的原型
age: 18,
home: ['Beijing', 'Shanghai']
};
Person.prototype = new Mother(); //Person的原型为Mother
//用chrome调试工具查看，提供了__proto__接口查看原型
var p1 = new Person('Jack'); //p1:'Jack'; __proto__:18,['Beijing','Shanghai']
var p2 = new Person('Mark'); //p2:'Mark'; __proto__:18,['Beijing','Shanghai']
p1.age = 20; 
/* 实例不能改变原型的基本值属性，正如你洗剪吹染黄毛跟你妈无关
* 在p1实例下增加一个age属性的普通操作，与原型无关。跟var o{}; o.age=20一样。
* p1：下面多了个属性age，而__proto__跟 Mother.prototype一样，age=18。
* p2：只有属性name，__proto__跟 Mother.prototype一样
*/
p1.home[0] = 'Shenzhen'; 
/* 原型中引用类型属性的共享，正如你烧了你家，就是烧了你全家的家
* 这个先过，下文再仔细唠叨一下可好？
* p1：'Jack',20; __proto__:18,['Shenzhen','Shanghai']
* p2：'Mark'; __proto__:18,['Shenzhen','Shanghai']
*/
p1.home = ['Hangzhou', 'Guangzhou']; 
/* 其实跟p1.age=20一样的操作。换成这个理解: var o{}; o.house=['big','house']
* p1：'Jack',20,['Hangzhou','Guangzhou']; __proto__:18,['Shenzhen','Shanghai']
* p2：'Mark'; __proto__:18,['Shenzhen','Shanghai']
*/
delete p1.age; 
/* 删除自定义的属性之后，原本被覆盖的原型值就重见天日了。这里就是向上搜索机制，所以才有下面的动态性
* p1：'Jack',['Hangzhou','Guangzhou']; __proto__:18,['Shenzhen','Shanghai']
* p2：'Mark'; __proto__:18,['Shenzhen','Shanghai']
*/
Person.prototype.lastName = 'Jin'; 
/* 改写原型，动态反应到实例中。正如你妈变新潮了，邻居提起你都说是潮妇的儿子
* 注意，这里我们改写的是Person的原型，就是往Mother里加一个lastName属性，等同于Mother.lastName='Jin'
* 这里并不是改Mother.prototype，改动不同的层次，效果往往会有很大的差异。
* p1：'Jack',['Hangzhou','Guangzhou']; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai']
* p2：'Mark'; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai']
*/
Person.prototype = { 
age: 28, 
address: { country: 'USA', city: 'Washington' }
};
var p3 = new Person('Obama'); 
/* 重写原型！这个时候Person的原型已经完全变成一个新的对象了，也就是说Person换了个娘。
* 换成这样理解：var a=10; b=a; a=20; c=a。所以b不变，变得是c，所以p3变化了，与Mother无关。
* p1：'Jack',['Hangzhou','Guangzhou']; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai']
* p2：'Mark'; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai']
* p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
Mother.prototype.no = 9527;
/* 改写原型的原型，动态反应到实例中。正如你妈他妈变新潮了，邻居提起你都说你丫外婆真潮
* 注意，这里我们改写的是Mother.prototype，p1p2会变，但上面p3跟Mother已经了无瓜葛了，不影响他。
* p1：'Jack',['Hangzhou','Guangzhou']; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai'],9527
* p2：'Mark'; __proto__:'jin';__proto__:18,['Shenzhen','Shanghai'],9527
* p3:'Obama';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
Mother.prototype = { 
car: 2, 
hobby: ['run','walk']
};
var p4 = new Person('Tony');
/* 重写原型的原型！这个时候Mother的原型已经完全变成一个新的对象了！
* 由于上面Person与Mother已经断开联系了，这时候Mother怎么变已经不影响Person了。
* p4:'Tony';__proto__: 28 {country: 'USA', city: 'Washington'}
*/
Person.prototype = new Mother(); //再次绑定
var p5 = new Person('Luffy');
// 这个时候如果需要应用这些改动的话，那就要重新将Person的原型绑到mother上了
// p5:'Luffy';__proto__: 2, ['run','walk']
p1.__proto__.__proto__.__proto__.__proto__ //null，你说原型链的终点不是null？
Mother.__proto__.__proto__.__proto__ //null，你说原型链的终点不是null？ 

Können Sie es grundsätzlich verstehen, nachdem Sie es gelesen haben?

Lassen Sie uns nun über den Unterschied zwischen p1.age = 20, p1.home = ['Hangzhou', 'Guangzhou'] und p1.home[0] = 'Shenzhen' sprechen. p1.home[0] = 'Shenzhen'; Zusammenfassend hat es die Form p1.object.method, p1.object.property.

p1.age = 20; p1.home = ['Hangzhou', 'Guangzhou']; Vergessen Sie zunächst den Prototyp und überlegen Sie, wie wir einem gewöhnlichen Objekt Attribute hinzufügen 🎜>

var obj = new Object();
obj.name='xxx'; 
obj.num = [100, 200]; 

p1.home = []; 
p1.home[0] = 'Shenzhen'; 

function Mother (age) {
this.age = age;
this.hobby = ['running','football']
}
Mother.prototype.showAge = function () {
console.log(this.age); 
};
function Person (name, age) { 
Mother.call(this, age);　　//第二次执行
this.name = name; 
}
Person.prototype = new Mother(); 　//第一次执行
Person.prototype.constructor = Person;
Person.prototype.showName = function () {
console.log(this.name);
}
var p1 = new Person('Jack', 20); 
p1.hobby.push('basketball'); //p1:'Jack'; __proto__:20,['running','football']
var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football'] 

function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(Person, Mother){
var prototype = object(Mother.prototype); 
prototype.constructor = Person; 
Person.prototype = prototype; 
}
function Mother (age) {
this.age = age;
this.hobby = ['running','football']
}
Mother.prototype.showAge = function () {
console.log(this.age); 
};
function Person (name, age) { 
Mother.call(this, age);
this.name = name; 
}
inheritPrototype(Person, Mother);
Person.prototype.showName = function () {
console.log(this.name);
}
var p1 = new Person('Jack', 20); 
p1.hobby.push('basketball');//p1:'Jack'; __proto__:20,['running','football']
var p2 = new Person('Mark', 18); //p2:'Mark'; __proto__:18,['running','football'] 

//1.原始模式，对象字面量方式
var person = { 
name: 'Jack',
age: 18,
sayName: function () { alert(this.name); }
};
//1.原始模式，Object构造函数方式
var person = new Object();
person.name = 'Jack';
person.age = 18;
person.sayName = function () {
alert(this.name);
}; 

//2.工厂模式，定义一个函数创建对象
function creatPerson (name, age) {
var temp = new Object(); 
person.name = name;
person.age = age;
person.sayName = function () {
alert(this.name);
};
return temp; 
}

//3.构造函数模式，为对象定义一个构造函数
function Person (name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}; 
}
var p1 = new Person('Jack', 18); //创建一个p1对象
Person('Jack', 18); //属性方法都给window对象，window.name='Jack'，window.sayName()会输出Jack 

//4.原型模式，直接定义prototype属性
function Person () {}
Person.prototype.name = 'Jack';
Person.prototype.age = 18;
Person.prototype.sayName = function () { alert(this.name); };
//4.原型模式，字面量定义方式
function Person () {}
Person.prototype = {
name: 'Jack',
age: 18,
sayName: function () { alert(this.name); }
};
var p1 = new Person(); //name='Jack'
var p2 = new Person(); //name='Jack' 

//5. 原型构造组合模式，
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
hobby: ['running','football'];
sayName: function () { alert(this.name); },
sayAge: function () { alert(this.age); }
};
var p1 = new Person('Jack', 20); 
//p1:'Jack',20; __proto__: ['running','football'],sayName,sayAge
var p2 = new Person('Mark', 18); 
//p1:'Mark',18;__proto__: ['running','football'],sayName,sayAge