Front end interviewer (iii) : JS prototype and prototype chain

This article is updated on my homepage

The back is done

Use posture: try to answer the question before reading the answer, and put the answer away after reading the result ~

Understanding little helper

Introduction: Summative diagrams, code examples or written questions and explanations to make knowledge easier to understand

About constructors and stereotypes

Constructors: Equivalent to the existence of “classes” in Java, such as Array, Function, String, Date, etc. in native JS, are constructors. For example, new Date() is called with the new operator to create an instance of a Date object.

An easy to understand chestnut, describes the PROCESS of JS inheritance through the prototype pattern

function Animal (name) {                 // constructor
    this.name = name
}

Animal.prototype.type = 'animal'         // Attributes and methods on stereotypes can be inherited

Animal.prototype.eat = function () {
    console.log('eat')}let dog = new Animal(Hachiko the Loyal Dog)          // Create Animal instance dog by calling the constructor with new
console.log(dog.name)                    // Output: Hachiko
console.log(dog.type)                    // output: animal
dog.eat()                                // Output: eat

console.log(dog.__proto__)               // output: {type:'animal', eat: f, __proto__:... }
// dog.__proto__ points to the prototype object of its constructor Animal
Copy the code

A practical example of a prototype

function Elem(id) {
    this.elem = document.getElementById(id)
}

Elem.prototype.html = function (val) {
    var elem = this.elem 
    if (val) {
        elem.innerHTML = val
        return this    // chain programming
    }else{
        return elem.innerHTML
    }
}

Elem.prototype.on = function (type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('div1')
div1.html('Oven door carbongran').on('click', (e) => {
    alert('Oven door carbongran')})Copy the code

This idea, using prototypes to encapsulate operations on DOM nodes, makes it easy to insert the DOM and add event listeners simply by creating an Elem instance.

Prototype chain

All reference types will have a __proto__ attribute pointing to their constructor’s prototype, and when accessing the variables and methods of the reference type, the __proto__ attribute will be used up the hierarchy. For example, [] has not only methods on the Array prototype constructor, but also methods on the Object prototype that can be found through the prototype chain.

About instanceof and constructor

Instanceof: ** Determines whether the argument to the right of the operator is on the left prototype chain. ** So [] instanceof Object is also true

let obj = {}                                
let arr = []
console.log(typeof(obj))                    // object
console.log(typeof(arr))                    // object
console.log(obj instanceof Array)           // false
console.log(arr instanceof Array)           // true
console.log(obj.constructor === Array)      // false
console.log(arr.constructor === Array)      // true
Copy the code

You can learn how to use the instanceof keyword and the constructor attribute for data type determination.

Knowledge extension

Which came first, the chicken or the egg

JS comes first with Object or Function?

console.log(Function instanceof Object)     // Output: true
console.log(Object instanceof Function)     // Output: true
Copy the code

What is the relationship between Object and Function? This question puzzled me until I saw this picture

Simply understood as:

1. FunctioninObjectOn the prototype chain, becauseObjectIt’s the constructor, his__proto__Point to theFunctionThe prototype of the
2. ObjectinFunctionOn the prototype chain, becauseFunctionIt’s the constructor, his__proto__Pointing to his own archetype, howeverFunction.prototypeIt’s essentially an object, soFunction.prototype.__proto__Point to theObject.prototype.

About chain programming

In “a practical example of prototyping” above, chained programming is mentioned, and here is a brief introduction

function Dog(){
    this.run = function(){
        alert('dog is run... ')
        return this                    // The key to chained programming
    }
    this.eat = function(){
        alert('dog is eat... ')
        return this 
    }
    this.sleep = function(){
        alert('dog is sleep... ')
        return this}}var d1 = new Dog()
d1.run().eat().sleep()
Copy the code

As can be seen from the above code

1. The design pattern of chained programming is that when a function is called, it can continue to call other methods based on its return value.
2. The key is that the method needs to have a return value to continue calling after execution, such asthisAnd so on.

Kane — Everything is the choice of the stone gate