js inheritance in several ways

inherit

JS inherited concepts:

• By [a certain way] so that an object can have access to the properties and methods of another object, we call this approach inheritance 并不是所谓的xxx extends yyy

Why should I use inheritance?

• Some objects have methods (action, behavior), but these methods are functions, if these methods and functions are declared in the constructor can lead to memory waste

    function Person(){
        this.say=function(){
            console.log("你好")
        }
    }
    var p1=new Person();
    var p2=new Person();
    console.log(p1.say === p2.say);   //false

The first way inheritance: the prototype chain to inherit 1

    Person.prototype.say=function(){
        console.log("你好")
    }

• Disadvantages: Add 1,2 method does not matter, but if many methods lead to excessive redundancy codes

The second way inheritance: the prototype chain to inherit 2

    Person.prototype = {
        //切记不能忘记
        constructor:Person,
        say:function(){
            console.log("你好");
        },
        run:function(){
            console.log("正在进行百米冲刺");
        }
    }

• important point:
• a, under normal circumstances, we should change the prototype object, and then create an object
• Under B, generally, the new prototype is added a constructor property so as not to destroy the original structure of the object prototype

Inherited third way: Inheritance copy (Inherited mixed: a mixin)

• Scene: Sometimes you want to use an object in the property, but can not modify it directly, so you can create a copy of the object
• practical use:
  • jquery: $ extend:. the only way to write jquery plugins
    • Jquery package based on a table control

    var o1={ age:2 };

    var o2 = o1;
    o2.age=18;      
    //1、修改了o2对象的age属性
    //2、由于o2对象跟o1对象是同一个对象
    //3、所以此时o1对象的age属性也被修改了

    var o3={gender:"男",grade:"初三",group:"第五组",name:"张三"};
    var o4={gender:"男",grade:"初三",group:"第五组",name:"李四"};
    //上述代码中，如果使用拷贝继承对代码进行优化会非常和谐

    //实现拷贝继承：
    //1、已经拥有了o3对象
    //2、创建一个o3对象的拷贝(克隆)：for...in循环
    

    //3、修改克隆对象，把该对象的name属性改为"李四"
    

• Achieve 1:

    var source={name:"李白",age:15}
    var target={};
    target.name=source.name
    target.age=source.age;

• Shallow vs. deep copy
  • Shallow copy just one copy attribute, no internal objects
  • In fact, a deep copy is to use the principle of recursive copy out several layers of the object's properties

      var students=[
          {name:"",age:""},
          {name:"",age:""}
      ]

• Obviously the above manner can not be reused, the actual code writing process, very often use the copy inherits the way, so in order to reuse, you can write a function to encapsulate them:

    function extend(target,source){
        for(key in source){
            target[key]=source[key];
        }
        return target;
    }
    extend(target,source)

• Since the copy inherited usage scenario very much in the actual development, so a lot of libraries have achieved this
  • jquery：$.extend
• With the es6 <object extension operators> is specifically designed to copy if the succession of Health:
  • Pros: Simple outrageous

    var source={name:"李白",age:15}
    //让target是一个新对象，同时拥有了name、age属性
    var target={ ...source }
  
    var target2={ ...source,age:18 }

The fourth mode of inheritance: prototypal inheritance :( Douglas in his book butterflies come)

• Scenes:
  • a, create a pure object: what the object properties are not
  • b, create a child object inherits from a parent object
    js var parent={ age:18,gender:"男"}; var student=Object.create(parent); //student.__proto__===parent
• Use:
  • Empty object: Object.create (null)

      var o1={ say:function(){} }
      var o2=Object.create(o1);

Fifth way inheritance: borrow constructor inheritance

• Scenario: the logic applies to the constructor between two kinds of similar situations
• Principle: call function, apply invocation

function Animal(name,age,gender){
    this.name=name;
    this.age=age;
    this.gender=gender;
}
function Person(name,age,gender,say){
    this.name=name;
    this.age=age;
    this.gender=gender;

    this.say=function(){

    }
}

• Limitations: Animal (parent class constructor) code must be fully applicable to the Person (subclass constructor)

• The above code constructor implemented borrowed

function Animal(name,age){
    this.name=name;
    this.age=age;
}
function Person(name,age,address){
    Animal.call(this,name);
    //this.name=name;
    //this.age=age;
    this.address=address;
}

• Inheritance parasitic, parasitic combination inheritance