The concept of prototypes and why prototypes are used

Comparison of object of prototype JS

Since JS is the language in which the execution is interpreted, then the function and object in the code are repeated, creating multiple copies

2. Code that repeats in code is prone to duplicate objects
4. Create an Student constructor to create the object. Name, age, gender and sayhi are required.
6. Errors that occur in the code

    // 1 function Student() { var o = {}; o.name = ... return o; } // 2 function Student () { name: .... age: .... ... }

8. The traditional way of constructing methods can affect performance, and it is easy to cause multiple objects to have multiple copies of methods. The method should be extracted separately. Let all the objects share the method.
10. You can consider putting all the methods out there, but there are security implications.
    • Various frameworks or libraries are introduced in development. The more members you customize, the more likely you are to have a naming conflict
    • There may be multiple constructors in development. Each constructor should have more than one method. Then it becomes not easy to maintain.
12. Any object will be linked to its prototype by default.
    • Create a function. Creates a special object that comes with it. The object uses a function. Prototype reference. It is called a prototype property of a function.
    • Each object created by the function as a constructor will be connected to the object by default.
    • When the object accesses a method or property, if it does not, it will be found in the mysterious object.

Problems with traditional constructors

 function fuc() { this.sayHi = function () { } }

2. Because the object was created by the call new fuc() . So each object is created, the function sayhi is created once
4. Then each object contains a separate, different, but functional logic function. Like what:{} == {}
6. In code, the method consumes performance. The most typical resource is memory.
8. The best way to do this is to put the function body outside the constructor. Then you only need to reference the function in the constructor to

    function sayHi () {} function fuc () { this.say = sayHi; }

10. will become difficult in development: introduce a framework hazard, and code cumbersome to maintain. The solution is if the outside function does not occupy the name. And it's good in the function.
12. When each function is defined, a mysterious object is created.
14. Each object created by the constructor will be connected to the mysterious object by default.

     var f1 = new fuc(); var f2 = new fuc(); f1.sayHi(); // 如果 f1 没有 sayHi, 那么就会在 fuc.prototype 中去找 f2.sayGoodBye(); // 如果 f2 没有改方法, 那么就会在 fuc.prototype 中去找

16. The many objects created by the constructor share an object, which is the constructor. prototype

18. Just put something that's shared, and repeat the memory-hogging stuff into the constructor. prototype, then all the objects can be shared.

     function fuc() {} fuc.prototype.sayHi = function () { console.log( ... ); }; var f1 = new fuc(); f1.sayHi(); var f2 = new fuc(); f2.sayHi(); f1.sayHi === f2.sayHi

20. Example: Write a constructor Student, which requires name, age, gender, sayhi, study. Requires a constructor with parameters.

Common errors

1. The
2. writes the constructor. When prototype, the attribute is added to the inside.

      function Span class= "Hljs-title" >student () {} Student.prototype.name =  Hu '; var p = new Student ();       

4. Error in assigning a value

    function Student() {} Student.prototype.name = ‘胡歌‘; var p1 = new Student(); var p2 = new Student(); p1.name = ‘霍建华‘; console.log( p1.name ); console.log( p2.name ); // 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找 // 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值

Concepts related to prototypes

2. about object-oriented concepts
   • Class class: Constructor in JS
     • in the traditional object-oriented language, a template is defined using something called a class. Then use the template to create the object.
     The
     • also has similar functionality in the constructor method. So called the class

         //in Java, The smallest unit of code is the class class program {//member}        

   • Instance (instance) and object (object) A
     • instance is typically an object created by a constructor. We become an instance of the xxx constructor
     • instance is the object. The object is a general term.
     • instance and object are a synonym
   • key-value pairs and properties and methods
     • a collection of key-value pairs in JS is called an object
     • if the value is data (not a function), it is called the key-value pair as property
     • If the value is a function (method), This is called the key value pair as a method,
   • parent class and subclass
     • Traditional object-oriented languages use classes to implement inheritance. Then there is the parent class, the concept of a subclass
     • The parent class is also called the base class, and the subclass Called a derived class,
     • is often referred to as a parent object, child object, in JS. A base object, a derived object.
4. Prototype-related concepts
   • A mysterious object is called a "prototype attribute" for a constructor function.
     • The mysterious object is the prototype property of the constructor.
     • Abbreviation prototype
   • The mystery object is also related to the object created by the constructor.
     • What's the relationship?
     • The object created by the mysterious object for the constructor is called the prototype object.
     • Abbreviation prototype
   • Object inherits from its prototype
     • constructor-created object inherits the prototype property from the constructor
     • The object that the constructor creates inherits from the prototype object of the object
     • The object that the constructor creates for the object that is represented by the constructor's prototype property is two different objects
       • Members in the prototype that can be used directly by the instance object
       • That is, the instance object directly "contains" the members of the prototype.
       • So the instance object inherits from the prototype
       • Such inheritance is "Prototype inheritance"
6. Some questions
   • What is the {} constructor?
   • Every literal object has a constructor.
     • {} Object
     • [] Array
     • /./REGEXP
     • Function ... Function

How to use Prototypes

Why use prototypes?

1. Using the dynamic properties of objects
   • constructor. prototype.xxx = VVVV;
2. Use Direct replacement

    Student.prototype = { sayHello: function () {}, study: function () {} };

The concept of prototypes and why prototypes are used