Creation of JAVASCRIPT objects and understanding and reverie of 6 inheritance modes

There are a total of six inheritance patterns in JS, including prototype chain, borrowed constructor, combined inheritance, prototypal inheritance, parasitic inheritance and parasitic combined inheritance. In order to facilitate understanding and memory, I imagined a process and briefly explained the 6 modes.

　It’s a very long story, let’s call it Nuwa’s Creation of Man.

　

　Creating objects

　 Nuwa pinched people (created objects) one by one, which was too slow, so she designed a machine (function), what kind of machine (function) she wanted to create, and told him what characteristics and functions this person had. Machines are made. This is the factory pattern (using the same interface to create objects will produce a lot of repeated code, thus inventing a function (mold)).

But it is also troublesome to make a human with a machine (digging soil, kneading mud, pinching the eyes, pinching the nose...) So the idea of ​​encapsulation came up. Pinch the nose, eyes and other things in advance for backup, modify the machine, and tell the person to be made. What kind of eyes and nose does the machine have? It can be installed directly. Such a machine is a constructor.

There is still a problem. If you want everyone to be able to run, the machine must install a 'run' function for everyone. This process is too slow and may cause errors. Find a third party (function method definition to constructor) outside the function, in the global scope). The third party is responsible for installing the function of running on all the people I pinch, and I take it and put it on the machine for use, saving the need for processing every time. Okay, people can run, which is very convenient, but the problem arises again. The built people still need N functions of "jump" and "walk". We can't find N third parties anymore. Then build the machine like this It makes no sense. So Nuwa (developer) created the prototype mode early... My Wa is amazing.

　Each function in prototype mode has a prototype attribute, which is a pointer pointing to the prototype object. The prototype object contains properties and methods that can be shared by all instances. This prototype object has a constructor attribute, which contains a pointer to the function where the prototype attribute is located.

It seems a bit confusing, but it is easy to understand from Nuwa’s perspective: the creator Nuwa has also invented various molds (prototype objects), and she is about to start creating them: 1. Create a kind of person-->Use This is the mold for making such people. After all, everything can be made, and whatever mold is used to make it. All human-making machines (functions) have their own unique mold (prototype object), and the machine has a label [prototype], pointing to the mold. This mold has a [constructor] attribute that can be labeled with a production mark, pointing to this machine, indicating that it is This machine is used for mold production. Therefore, if you want to create a certain type of person, you only need to change the mold. This is the benefit of prototype objects, convenient and fast.

　The production process is as follows: 1. Build machine A: function jqA(){}; //There is a prototype attribute pointing to the mold (prototype object)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　： jqA.prototype={

　　　constructor: jqA, // Equivalent to labeling, produced by machine A,

}

}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Irine can in me in me can in my life can be in the life in a person named lili, can have white skin, and be able to run.

　　　　　3 Create a person of this type var person1=new jqA();

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ded in a person of this type; Template A is processed, pointing to template A

It’s perfect, but the problem comes again. The people produced in this way are all the same. Five identical white-skinned and graceful beauties came forward, and then there were five more identical short and ugly ones. terrible. So while using the template, Machine A can also make the people it creates have different characteristics according to the female instructions, such as: this one has blue eyes, that one is fatter. . This additional function is implemented through the constructor ---》Using the constructor and prototype mode in combination

　　　The production process is as follows:　　　

        //组合使用构造函数模式和原型模式
            function  Person(name,skill,country) {
                this.name=name;
                this.age=skill;
                this.country=country;
                this.member=["刘封","刘婵"];
            } //机器可以听命令
 
            Person.prototype={
                constructor:Person,
                sayName:function () {
                    alert(this.name);
                }
            }  //还可以用模板
             var person1=new Person('马超','铁骑','蜀国');
             var person2=new Person('刘备','仁德','蜀国');

At this time, Nuwa was too lazy to take care of the machine and the template at the same time, so she directly installed the template on the machine Medium: Initialize the prototype object in the constructor ---》Dynamic prototype mode is more convenient

　　The production process is as follows:

　　　 function  Person(name,skill,country) {
              　　  this.name=name;
             　　   this.skill=skill;
                　　this.country=country;
             if(typeof this.sayCountry !=undefined){
               　　  Person.prototype.sayCountry=function () {
                 　　    alert(this.country);
              　　   };
          　　   }
       　　     }
            var friend=new Person('张飞','咆哮','蜀国');
            friend.sayCountry();

Any questions? Ok, provide the parasitic constructor mode: add an internal machine to the machine, this internal machine is responsible for production, and provides the people produced to the external machine, and the external machine provides such people to the outside. (Usually not used...)

Inheritance (my understanding—_—)

　　问题：女娲要造另一批人B，这批人的模板B造好了，但是想让这批人有之前造过的那批人的特点，怎么办？先让这些人过滤一下先前的模板A，在放到B中造就ok,这样类‘B人'就继承了‘A’类人的特点。如何过滤：父实例=子原型  建B的模板，造一个a出来，这个a肯定要过滤A模板，所以让B的模板等于a就ok,问题解决。　

　//父函数，机器A，A类人。它的实例a中有[[Prototype]]属性和自定义的property属性

　　　　function SuperType(){
　　　　this.property=true;
　　　　}
　　　　//在SuperType原型对象(模具A)中添加getSuperValue方法
　　　　SuperType.prototype.getSuperValue=function(){
　　　　return this.property 
　　　　　　}
 
　　　　//子函数，机器B，B类人。构造函数SubType,它的实例中有[[Prototype]]属性和自定义的subproperty属性
　　　　function SubType(){
　　　　this.subproperty=false;
　　　　　　}
　　　　//继承了SuperType （原型链）
　　　　SubType.prototype=new SuperType();  //机器B=a
　　　　//在SubType原型对象（模具B）中添加getSubValue方法
　　　　SubType.prototype.getSubValue=function(){
return tis.subproperty;
　　　　}；　　
　　　　var insatance=new SubType();
　　　　alert(insatance.getSuperValue()); //true

 问题：引用类型值会改变，因为实例共享属性，和原型模式中的问题相同 

 解决方案：经典继承 （借用构造函数）：其实就是把模具A设计到机器B中，但是它已经不是模板了，机器B会给生产的b们添加这些A中的属性和方法，但是可以人为控制，女娲又命令机器B根据传递不同的命令生产不同的b。

　　

在子类构造函数的内部调用超类构造函数

　　　　 相当于把父类的属性实例化到子类中？Java中的super（） 存在疑问

　

　　　function SuperType(){
　　this.colors=['red','blue','green'];
　　　　}
　　　　function SubType(){
　　　　//继承了SuperTYpe
　　　　SuperType.call(this);
　　　　　}
　　　　var insatance1=new SubType();
　　　　insatance1.colors.push('black');
　　　　alert(insatance1.colors);// 'red,blue,green,black'
 
　　　　var insatance2=new SubType();
 　　　alert(insatance2.colors);//'red,blue,green'

    1传递参数：

　　　　　　借用构造参数可以在子类型构造参数中向超类型构造参数传递参数

　

　　　　　function SuperType(name){
   this.name=name;
　　　　　　}
　　　　　　function SubType(){
　　　　//继承了SuperTYpe,同时还传递了参数
　　　　SuperType.call(this，'赵云');
 
　　　　//实例属性
　　　　this.age=29；
　　　　}

　　　　var insatance=new SubType();

 

　　　　alert(insatance.name); //赵云

　　　 alert(insatance.age); //29

为了确保SuperType构造函数不会重写子类型的属性，可以在调用超类型构造函数之后，再添加应该在子类型中定义的属性。

问题：浪费劳动力，在机器中创建A具有的功能和属性，那么A模板就没用了，相当于回到工厂模式，都有打火机了，还要钻木取火吗....

　　解决方案：组合继承   

　　　　在公司加班没事做，现在赶着下班，故事编不下去了，后面的继承模式搬之前的记录吧..　　　

　        原型链和构造函数技术组合到一起，使用原型链实现对原型属性和方法的继承，借用构造函数来实现对实例属性的继承。这样通过在原型上定义方法实现了函数的复用，有能够保证每个实例都有它自己的属性

　　　　原型继承：方法可以，实例属性无法继承； 借用构造函数：实例属性可以，方法不行。 一起用，完美。

　　 　　

  function SuperType(name){
　　 this.name=name;
　　 thi.colors=['red','blue','green'];
　　　 　}
　　　　SuperType.prototype.sayName=function(){
　 　alert(this.name);
　　　　};
 
　　　　function SubType(name，age){
　　//继承属性
　　SuperType.call(this,name);
　　this.age=age；
　　　　}
　　　　 //继承方法
 　　SubType.prototype=new SuperType();
 
 　　SubType.prototype.sayAge=function(){
  　　alert(this.age);
　　 }
 
　　var instance1=new SubType('zhaoyun',29);
　　instance1.colors.push('black');
　　alert(instance1.colors); //'red,blue,green,black'
　　instance1.sayName();//zhaoyun
　　instance1.sayAge();//29
 
　　var insatance2=new SubType('诸葛瑾'，25)；
　　alert(instance2.colrs);'red,blue,green'
　　instance22.sayName();//诸葛瑾
　　instance2.sayAge();//25