This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

Five principles of prototyping

Remember, remember, remember, remember, remember that important things are not to be said three times, but to be cooked to the heart

  • All reference types (functions, objects, arrays) have object properties, that is, the ability to extend properties freely. (Except for null accidents)
  • All reference types (functions, objects, arrays) have an _proto_We call him hereStealth prototype) property whose value is a normal object.
  • All functions have a Prototype property, and the property value is a normal function
  • All reference types (functions, objects, arrays),*proto* Attribute values point to itsThe constructor’s prototype(explicit attribute) attribute value.
  • When trying to get a property of an object, if the object itself does not have the property, then its _ is removedproto_(his constructor’s prototype). If not, then it will look up all the way back to object. prototype. That is, all objects inherit the properties of object. prototype.

After summarizing the above rules, what I feel most is that everything in JS is NULL, which is really too profound.

The role of the Prototype property

When we instantiate a function through a constructor, its internal properties and methods are available only to the function itself, not to other instances. Why?

example

function Animal(type,name) {
    this.name = name;
    this.type = type;
    this.tell = function() {
        console.log('hello')}}var dog = new Animal('dog'.'lunky');
var cat = new Animal('cat'.'miao');
dog.tell === cat.tell//false
Copy the code

So how do you share this tell? This is where the stereotype object comes into play. If we define properties and methods in the stereotype, then all instances of the function can share the methods or properties defined on the stereotype. An example

function Animal(type,name) {
    this.name = name;
    this.type = type;
}
var dog = new Animal('dog'.'lunky');
var cat = new Animal('cat'.'miao');
Animal.prototype.color = 'red';
dog.color === cat.color //true
Copy the code
The next thing you need to know is the constructor attribute

A Prototype object has a constructor property that, by default, points to the constructor in which the prototype object resides

Here’s an example

function Example(name){
    this.name = name
}
Example.prototype.constructor === Example //true
Copy the code

What does it do

A common use is for constructor to know which constructor generated the object for an instance. Such as:

function Example(name){
    this.name = name
}
var e = new Example('ha')
e.constructor === Example// true
e.constructor === Date// false
Copy the code

In the Example above, the e constructor is Example, not Date.

An example close to work

We usually use prototypes in our work, mainly when we register some third-party plug-ins globally. For example, we usually write a plug-in with Vue, instantiate it, define it to the prototype chain through vue. prototype, and then use the vue. use method. Then we can call this method globally. How to write a good example in a few minutes when facing the interviewer?

// A piece of HTML goes up
 <div id='example'></div>

//JS
function ElemDom(id) {
    this.elemDom = document.getElementById(id)
};
// Define a method to write content
ElemDom.prototype.html = function(val){
    var tempElemDom = this.elemDom;
    if(val){
        tempElemDom.innerHTML = val;
        return this;// Why return this
    }else {
        return tempElemDom.innerHTML
    }
}
// Define an event
ElemDom.prototype.on = function(type,fn){
    var tempElemDom = this.elemDom;
    tempElemDom.addEventListener(type,fn);
    return this;
}

var divDom = new ElemDom('example');
divDom.html('<p>hello world</p>').on('click'.function(){
  console.log('i am coming')
}).html('<h1>footer</h1>')
Copy the code

Return this in the code so that the method can be called in a chain, if you see the JQ feeling. The example above may seem simple, but if you can manually write it out during the interview and then step by step explain the prototype chain, it will make a good impression on the interviewer. Hopefully this short article has helped you.

If this article helped you, remember to like 👍 collection and follow oh 😊, hope to like a lot more…

If there are any mistakes in this post, feel free to correct them in the comments section