How to answer a technical notation, or your understanding of XXXX

For example, you explain your understanding of closures

A: 1. What is XXX

2. Application scenario

3. The advantages and disadvantages

4. Concrete implementation

5. Is there a better solution?

A, closures

What are closures made of

Closure = function + lexical scope

Lexical scope: refers to the position where the variable declaration is defined. If the current position is not defined, the parent position is accessed

Var a=1000; function fn1() { alert(a) } fn1()

Closure in the narrow sense: 1. Function nested function 2. The child function referenced the related variables of the parent function

Features: Long-term resident memory

Closure application scenarios and implementation code

/ / sum
function makeAdd(x) {


    return function(y) {

     return x+y

   }

}
// Set the font size
function setFontSize(size) {


   return function() {

     document.body.style.fontSize=size+"px"}}// Loop the form
function makeHelp(help) {
    
    return function() {
       console.log(help)
        document.querySelector('.help').innerHTML=help
    }
 }
function init() {
    var userInfo=[
        {id:'username'.helpText:'Please enter a user name'},
        {id:'email'.helpText:'Please enter email'},
        {id:'address'.helpText:'Please enter address'},]// Bind the onFocus event dynamically
    for(var i=0; i<userInfo.length; i++) {var item=userInfo[i];
        document.getElementById(item.id).onfocus=makeHelp(item.helpText)

    }
}
init()

// Encapsulate components or plug-ins
var Counter=(function() {

   // Private variables
   var index=0;

   // Private method
   var add=function() {
       return index++;
   }

   var jian=function() {}return {
       // Expose the method to the user
       increment:function() {
           add()
       },
       getValue:function() {
           returnindex; }}}) ()Copy the code

Advantages and disadvantages of closures 1. Long memory resident, can cache data 2. Can isolate scope, avoid global pollution

Two, prototype chain

1,prototype chain is a unique inheritance mechanism 2,prototype chain will be involved in ___proto___, 3, the top of the prototype chain is null 4, use the same or similar method on the prototype, easy to instantiate the object reuse cons: It’s hard to understand, and usually only front-end people understand 6. ES6 uses class extends to implement inheritanceWorld class reference prototype chain pictures without one: below

JavaScript inheritance

1. Inheritance is one of the characteristics of object-oriented development

2. Three characteristics of interviewees: encapsulation, inheritance and polymorphism

3. Inheritance mainly includes ES5 and ES6 inheritance methods

Inheritance in ES5 – Class prototype chain inheritance is implemented mainly through functions

// Create a superclass
function Parent() {
    this.name='jack'

}

Parent.prototype.getName=function() {
    return this.name;
}

// Create a subclass
function Child() {}// The prototype of a child class is equal to the instantiated object of the parent class
Child.prototype=new Parent();

var c1=new Child()
Copy the code

Disadvantages: 1. Cannot pass parameter does not solve object reference problem

Inherit from the constructor

// Create a superclass
function Parent(name) {
    this.name=name ||'jack'
    this.colors=['red'.'green'.'blue']

}

Parent.prototype.getName=function() {
    return this.name;
}

// Create a subclass
function Child(name) {
    // Use a parent class to inherit instance properties, but not methods
    Person.call(this,name)
    
}
Copy the code

Disadvantages: Cannot inherit superclass methods

Combination inheritance = prototype chain inheritance + borrowing constructor inheritance

// Create a superclass
function Parent(name) {
    this.name=name ||'jack'
    this.colors=['red'.'green'.'blue']

}

Parent.prototype.getName=function() {
    return this.name;
}

var p1=new Parent();
p1.getName();


// Create a subclass
function Child(name) {

    Parent.call(this,name)
    
}

Child.prototype=new Parent();

var c1=new Child()
c1.getName()
Copy the code

Advantages: you can inherit the prototypical methods of the parent class and also pass parameter properties

ES6 inheritance

To implement // inheritance via class,extends,super, you must write super

// Create a superclass
class Parent {
   constructor(name) {
        this.name=name ||'jack'
        this.colors=['red'.'green'.'blue']}getName() {
    return this.name; }}// Create a subclass
 class Child extends Parent {

      constructor(name) {
          super(name)  // Super is the Parent class
      }

      getValue(){}}Copy the code

To sum up, is when we go to the interview, for technical problems for the orientation of the description, from what, to the application scenario, advantages and disadvantages, specific implementation, there is no better solution, such answer does not dare to say that the interviewer is 100% sure of you, but at least more than 80%. The interview is focused on your image score + technical score, all things considered. Hope this article, to you are looking for a job you have certain help.