Golden Three Silver four 2021 front-end interview notes

It’s the prime time to look for a job again. Job-hopping is a part of everyone’s career in March and April, and I recently reviewed some questions about javascript and Vue in interviews. See this article if you feel helpful to you, as quality three even, code word is not easy, thank you for your support!

JavaScript

The data type

Describe how data types and values are stored in JS

• There are eight data types in JavaScript, including Null, Undefined, Boolean, String, Number, Bigint, and Symbol.

There is also an object data type: function, Array, Date, etc.

• The basic data types are stored in the stack area, occupying small space and fixed size.

Reference data types are stored on the stack and heap and take up large space and are of variable size. The reference data type stores Pointers in the stack to the actual address of the heap. When the interpreter looks for a reference value, it first retrieves its address in the stack and then retrieves the entity from the heap.

Js data type judgment

Describe the method of determining data type in JS

typeof

• Typeof determines the original data type, except for null:

    console.log(typeof 2) //number
    console.log(typeof 'hello') //string
    console.log(typeof null) //object
    console.log(typeof true)//boolean
    console.log(typeof undefined) //undefined
    console.log(typeof []) //object
Copy the code

• Because because the special value null is considered a reference to an empty object

instanceof

• Instanceof can correctly determine the type of the object because the internal mechanism is to determine if the prototype of the object can be found in the prototype chain:

    console.log([] instanceof Array) //true
    console.log({} instanceof Object)//true
    console.log(function(){} instanceof Function)//true
    console.log(1 instanceof Number)//false
Copy the code

constructor

• Constructor refers to the constructor of the instance

    console.log((1).constructor === Number) //true
    console.log('1'.constructor===String)//true
    console.log((function(){}).constructor===Function) //true
    console.log([].constructor===Array) //true
    console.log(({}).constructor===Object) //true
Copy the code

• Constructor has the merit of being unreliable if we create an object and then modify its prototype:

    function Func(){}

    Func.prototype=new Array(a);const f=new Func()

    console.log(f.constructor===Function)//false
Copy the code

Object.prototype.toString.call

• ToString: toString: toString: toString: toString: toString: toString: toString: toString: toString: toString: toString

    var toString = Object.prototype.toString;
    console.log(toString.call(2)) //[object Number]
    console.log(toString.call(true)) //[object Boolean]
    console.log(toString.call(function(){})) //[object Function]
Copy the code

Scope and scope chain

Talk about your understanding of scopes and scope chains.

• Scope: A scope is the area where variables are defined. It has a set of rules for accessing variables that govern how the browser engine looks up variables (identifiers) in the current and nested scopes.

• Scope chains: Scope chains guarantee ordered access to all variables and functions in the execution environment.

• A scope chain is essentially a list of Pointers to a variable object. A variable object is an object that contains all variables and functions in the execution environment. The scope chain is always preceded by the variable object of the current execution context. The variable object of the global execution context (that is, the global object) is always the last object in the scope chain. When we look for a variable, we can look back down the scope chain if it is not found in the current execution environment

this

Talk about your understanding of this and the context of this

• In the browser, this points to the window object in global scope

• In functions, this always refers to the object on which it was last called (except the arrow function).

• In the constructor, this refers to the new object that comes out of new.

• This in call, apply, and bind is strongly bound to the specified object.

• The arrow function this is this in the parent scope, not this when called.

Prototype, prototype chain

Talk a little bit about prototypes, prototype chains, in JavaScript

• In JS, constructors create objects. Each constructor has a Prototype property whose value is an object containing properties and methods shared by all instances of the constructor. When we access a property of an object, if that property doesn’t exist inside the object, then it will look for that property in its prototype object, and that prototype object will have its own prototype, and so on and so forth, the concept of prototype chain. The end of the prototype chain is usually Object.prototype.

    function Func(name){
        this.name=name
    };

    let tom=new Func('TOM');

    console.log(tom)


    console.log(tom.__proto__===Func.prototype) //true
    console.log(tom.__proto__.constructor==Func) //true

Copy the code

• Let me do the last picture to make a little bit more sense

• What the prototype object does:

    function Func(name){
        this.name=name;
        this.say=function(){
            console.log(this.name)
        }
    }

    let m=new Func('tom');
    let n=new Func('tom')

    console.log(m)
    console.log(n)

    console.log(m.say===n.say) //false 
Copy the code

• Every time we do new, we create a new area, which is obviously bad, so we can put common methods on the prototype object to avoid memory waste:

    function Func(name){
        this.name=name;
    }
    Func.prototype.say=function(){
        console.log(this.name)
    }
    let m=new Func('tom');
    let n=new Func('tom')

    console.log(m)
    console.log(n)

    console.log(m.say===n.say) //true
Copy the code

closure

Talk about your understanding of closures and how they can be used

• Closures are functions that have access to variables in the scope of another function. Closures are most commonly used to create functions within functions that have access to local variables of the current function.

• By using closures, we can access variables inside the function by calling the closure function externally. We can use this method to create private variables.

• Another use is to keep a variable object in the context of a function that has already run out of memory, because the closure retains a reference to the variable object, so it is not recycled.

    function func(){
        let n=0;
        function add(){
            n++;
            console.log(n)
        }
        return add
    }

    let a=func();
    a() / / 1
    a()/ / 2
Copy the code

The event model

What is an event? What kinds of events are there?

• Events refer to the interactions or operations of the web page when users operate the page. There are three event models in the browser:

• Dom0-level model: This model does not propagate and does not have the concept of event flow, but some browsers now support bubbling. It can define listeners directly in the web page or specify listeners through JS properties.

• IE event model: In this event model, an event has two processes, the event processing phase and the event bubbling phase. The event processing phase first executes the listening event of the target element binding. Then there is the event bubbling phase, bubbling refers to the event from bubbling to document, and check whether the node that passes through is bound to the event listener function, which will be carried out in sequence.

• Dom2-level event model: in this event model, an event has a total of three processes, the first process is the event capture stage, capture refers to the event propagated from document all the way down to the target element, check whether the node through the event listener function is bound, if there is, then execute. The next two phases are basically the same as the IE event model. In such an event model, the event-bound function is addEventListener, where the third parameter specifies whether the event is executed during the capture phase.

    //DMO0
     element.onclick=function(){}

    //DOM2
    element.addEventListener('click'.function(){},false)

    //DOM3 adds mouse and keyboard events
    element.addEventListener('keyup'.function(){},false)

Copy the code

• DOM events capture process: the window – > document — — — — — — > > HTML body – > transfer gradually

• DOM event bubbling process: the target element — — — > parent – > body — — — — — — > > HTML document — – > Windows

Common uses of the Event object

• Event.preventdefault () // preventDefault behavior than prevent a TAB skip

• Event.stoppropagation () // Prevents event bubbles

• Event. StoplmmediatePropagation () / / registered two events at the same time, priority decision event

• Event.currenttarget () // Event proxy, which delegates the child element’s events to the parent element

• Event.target () // The element currently clicked

Asynchronous programming

Talk about asynchronous programming in JS, what does it solve?

• When you were writing code, you might have nested functions, and if you had multiple nested functions, the structure would be messy and not easy to maintain, and that’s where the concept of asynchronous programming comes in.

Promise

• Promise is a solution to asynchronous programming that makes more sense and is more powerful than traditional solutions — callback functions and events. It was first proposed and implemented by the community, and ES6 has written it into the language standard, unifying usage, and providing Promise objects natively.

• A Promise is simply a container that holds the result of an event (usually an asynchronous operation) that will end in the future. Syntactically, a Promise is an object from which to get messages for asynchronous operations. Promise provides a uniform API, and all kinds of asynchronous operations can be handled in the same way.

• The state of the Promise object is not affected by the outside world. It has three states, which are pending, fulfilled and rejected. Only the result of an asynchronous operation can determine the current state, and no other operation can change the state. That’s where the name “Promise” comes from. Its English name means “Promise,” indicating that nothing else can change it. Its state can change from Pending to depressing or from Pending to Rejected.

Then method

• Promise can only simplify the writing method of layer upon layer callback. In essence, the essence of Promise is “state”, and the callback function can be invoked in time by maintaining state and transferring state, which is much simpler and more flexible than passing callback function.

    const testPormise=new Promise((resovle,reject) = >{
       console.log("hi,Pormise");
       let test=true;
       if(test){
            resovle('Success ~')}else{
           reject("Failed.")}}); testPormise.then((res) = >{
        console.log(res)
    }).catch((erro) = >{
        console.log(erro)
    })
Copy the code

rejected

• Only the rejected callback can be captured in then and then execute the failed callback:

 let p = new Promise((resolve, reject) = > {
        // Do some asynchronous operations
      setTimeout(function(){
            var num = Math.ceil(Math.random()*10); // Generate random numbers from 1 to 10
            if(num<=3){
                resolve(num);
            }
            else{
                reject('The numbers are too big'); }},2000);
    });
    p.then((data) = > {
            console.log('resolved',data);
        },(err) = > {
            console.log('rejected',err); });Copy the code

catch

• Catch, like then, is used to specify the callback of reject:

    p.then((data) = > {
        console.log('resolved',data);
    }).catch((err) = > {
        console.log('rejected',err);
    });
Copy the code

all

• All takes an array of arguments and returns a Promise object that executes the callback on whichever one executes slowly:

    let Promise1 = new Promise(function(resolve, reject){})
    let Promise2 = new Promise(function(resolve, reject){})
    let Promise3 = new Promise(function(resolve, reject){})

    let p = Promise.all([Promise1, Promise2, Promise3])

    p.then(funciton(){
    // If all three are successful, they are successful
    }, function(){
    // If there is a failure, there is a failure
    })
Copy the code

race

• The callback is performed based on the runner who runs fast. The timeout period of a request is set and the corresponding callback is executed after the request times out.

Event Loop

What is the event execution mechanism in JS?

• JavaScript is a single-threaded, asynchronous, non-blocking, interpreted scripting language. One of the hallmarks of the JavaScript language is single-threaded, which means you can only do one thing at a time. In order to coordinate events, user interaction, scripting, UI rendering and network processing, and prevent the main thread from not blocking, the Event Loop scheme was applied.

• In JS, the task enters the execution stack and determines the task type first. If it is a synchronous task, it directly enters the main thread for execution. If it is an asynchronous task, the task will be put into an asynchronous queue, and when the synchronous task is finished, the event-triggering thread will fetch the function from the message queue, and execute it one by one if there is one.

    console.log(1)

    setTimeout(() = > {
        console.log(2)},1000);
    
    console.log(3)

    / / 1 2 3
Copy the code

Micro tasks

• In JS, setTimeout is a macro task, like Promise is a microtask,

    console.log(1)

    setTimeout(() = > {
        console.log(2)},1000);

    let test=new Pormise((resolve) = >{
        console.log(3);
        resolve();
    })
    .then(=>console.log(4))


    console.log(5)
    1.3 5 4.2
Copy the code

• Will output 1 first, and then meet with setTimeout, registered task then meet Pormise, first output 3 first, and then registered task, then the output 5, at this time the execution stack not executable, and then will be taken from the queue, this time will take out small tasks to perform first, into the then, output 4, when the stack is empty, yet It continues to fetch a task from the queue, and it prints 2.

inheritance

How is inheritance implemented? How to perfect inheritance?

• Constructor inheritance, with the help of the constructor to change the reference to implement inheritance through call Apply, but this method has a disadvantage: you cannot inherit properties from the parent prototype object, only properties from the constructor.

    function Parent1(){
        this.name='Parent1'
    };

    Parent1.prototype.say=function(){
        console.log(this.name)
    }

    function Child1(){
        Parent1.call(this);//apply
        this.type='Child1'
    }

    let n=new Child1();
    console.log(n.say)//undefined
Copy the code

• Prototype chain implementation inheritance, disadvantages: instances out of the common.

   function Parent(){
        this.name='Parent1';
        this.arr=[1.2.3.4.5]}; Parent.prototype.say=function(){
        console.log(this.name)
    }

    function Child(){
        this.type='Child1'
    }

    Child.prototype=new Parent();

    var s1=new Child();
    var s2=new Child();
    s1.arr.push(6)
    console.log(s1.arr) / / [6]
    console.log(s2.arr) / / [6]
    // They are in the same room
    console.log(s1.__proto__===s2.__proto__) //true
Copy the code

• Combinatorial inheritance (take advantage of the above two)

    function Parent(){
        this.name='tom';
    };

    Parent.prototype.say=function(){
        console.log(this.name)
    };

    function Child(){
        Parent.call(this)
        this.age=18;
    };

    Child.prototype=Object.create(Parent.prototype);

    Child.prototype.constructor=Child;
Copy the code

Vue

Vue life cycle

How many lifecycles does a Vue have? Which lifecycle can get the real DOM? What life cycle is triggered by modifying data in data? Why is component data a function?

• In simple terms, the vUE lifecycle can be divided into three categories: create phase, run phase, and destroy phase.

Create a stage

• BeforeCreate: The instance is just created in memory. Data and methods are not initialized yet, and only some built-in life cycle functions are included.

• Created: Instances are created in memory, data and methods are created.

• BeforeMount: The template is compiled at this point but not rendered into the page.

• Mounted: Specifies a rendering template. The creation stage is complete. This is where you can manipulate the DOM.

Operation phase

• BeforeUpdate: The data in the interface is old, but the data has been updated. The page has not been synchronized with the data. Modifying data triggers this function.

• Updated: The page is rerendered and the data in the page is consistent with data. Modifying data triggers this function.

Destruction of phase

• BeforeDestroy: When this method is executed, the Vue life cycle is already in the destruction phase, but various data on the instance is still available.

• Destroyed: Components are destroyed, Vue instance is destroyed, and any data in Vue is not available

Vue component communication

How do VUE components communicate? How many ways are there?

• Component communication in VUE can be divided into parent-child component communication and non-parent-child component communication.

Parent-child component communication: props; parent/parent / parent/children; provide / inject ; ref ; Attrs /attrs /attrs /listeners Vuex cross-level communication: eventBus; Vuex; Provide/inject, attrs/attrs /attrs /attrs /listeners

props / $emit

• The parent component passes data to the child component via props, while the $EMIT child component communicates to the parent.

Parent component passing value to child component (props)

Prop can only be passed from one level of component to the next level (parent and child components), known as one-way data flow. Prop is read-only and cannot be modified, and any changes are invalidated with warnings.

    <! -- Section parent component -->
    <template>
        <div class="section">
            <com-article :articles="articleList"></com-article>
        </div>
    </template>

    <script>
        import comArticle from './test/article.vue'
        export default {
        name: 'HelloWorld'.components: { comArticle },
        data() {
            return {
            articleList: [A Dream of Red Mansions.Journey to the West.Romance of The Three Kingdoms]}}}</script>// Child component article.vue<template>
        <div>
            <span v-for="(item, index) in articles" :key="index">{{item}}</span>
        </div>
    </template>

    <script>
    export default {
        props: ['articles']}</script>

Copy the code

Child component passes value to parent component ($emit)

$EMIT binds a custom event. When the statement is executed, the arG parameter is passed to the parent component, which listens and receives the parameter via V-ON.

    <! -- // Parent component -->
    <template>
        <div class="section">
            <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
            <p>{{currentIndex}}</p>
        </div>
    </template>

    <script>
        import comArticle from './test/article.vue'
        export default {
            name: 'HelloWorld'.components: { comArticle },
            data() {
                return {
                currentIndex: -1.articleList: [A Dream of Red Mansions.Journey to the West.Romance of The Three Kingdoms]}},methods: {
                onEmitIndex(idx) {
                this.currentIndex = idx
                }
            }
        }
    </script>

    <! -- Subcomponent -->
    <template>
        <div>
            <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
        </div>
    </template>

    <script>
        export default {
            props: ['articles'].methods: {
                emitIndex(index) {
                  this.$emit('onEmitIndex', index)
                }
            }
        }
    </script>
Copy the code

$children /$parent

Parent and parent and parent and children can access component instances. What does the instance represent? Represents all methods and data that have access to this component. Holding parent on #app yields an instance of newVue(), holding parent on #app yields an instance of newVue(), holding parent on #app yields an instance of newVue(), holding parent on #app yields an instance of newVue(), holding parent on #app yields undefined, And the children at the bottom is an empty array. Also notice that children is an empty array. Also notice that children is an empty array. Also notice that the value of parent and children is different, children is different, children is an array, and parent is an object. In ∗∗ VUe3.0 ∗∗, ∗parent is an object. In vue3.0, parent is an object. For ∗∗vue3.0∗∗, ∗children** has been removed.

    <template>
        <div class="hello_world">
            <div>{{msg}}</div>

            <! -- child -->
            child
            <com-a></com-a>
            <button @click="changeA">Click Change child component values</button>
        </div>
    </template>

    <script>
        import ComA from './child'
        export default {
            name: 'HelloWorld'.components: { ComA },
            data() {
                return {
                msg: 'Welcome'}},methods: {
                changeA() {
                    // Get the child component A
                    console.log(this.$children)
                    this.$children[0].messageA = 'this is new value'}}}</script>


    <! -- Subcomponent -->
    <template>
        <div class="com_a">
            <span>{{messageA}}</span>
            <p>Get the value of the parent component: {{parentVal}}</p>
        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                messageA: 'this is old'}},computed: {parentVal(){
                    return this.$parent.msg; }}}</script>

Copy the code

ref/refs

Ref: If used on a normal DOM element, the reference refers to the DOM element; When used on a child component, the reference refers to the component instance, through which you can directly invoke the component’s methods or access data

    <! -- // Subcomponent -->
    <template>
        <div >child</div>
    </template>
    <script>
        export default {
            data() {
                return {
                    name: 'this is child'}},methods: {
                sayHello(){
                    return 'say hello'}}},</script>

    <! -- Parent component -->
    <template>
        <div >
            <com-a ref="child"></com-a>
        </div>
    </template>

    <script>
        import ComA from './child'
        export default {
        components: { ComA },
            data() {
                return {
                msg: 'Welcome'}},mounted() {
                const child = this.$refs.child;
                console.log(child.name) //this is child
                console.log(child.sayHello()) //say hello}},</script>
Copy the code

eventBus

EventBus, also known as the eventBus, can be used in vue as a bridge concept, as all components share the same event center to which they can register to send and receive events, so that components can notify other components. EventBus also has its drawbacks. When a project is large, it can be a disaster that is difficult to maintain.

vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

Vuex solves the problem of multiple views relying on the same state and behavior from different views needing to change the same state, focusing developers’ efforts on updating data rather than transferring data between components.

The principle of bidirectional binding

Vue2 uses data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listening callbacks. Vue3 uses a Proxy, which can listen to data changes in the array.

Why does data have to be a function in a Vue component?

If data is an object, when reusing components, because data points to the same reference type address, any changes to the data of one component will change the data of the other reused components as well.

If data were a function that returns an object, this problem would not occur because each time a component is reused it returns a new object with a different reference address.

What is the difference between computed and Watch in Vue

Computed properties computed:

(1) Support caching, only when the dependent data changes, will re-calculate the function; (2) Asynchronous operation is not supported in computing attributes; (3) There is a get(default, get calculated property) and a set(manually add, set calculated property) method in the function to calculate the property; (4) The calculated attribute automatically listens to the change of the dependent value, so as to dynamically return the content.

Listening property Watch:

(1) Cache is not supported. As long as data changes, listener functions will be executed; (2) Asynchronous operation is supported in the listening attribute; (3) The value of the listening attribute can be an object that receives handler callbacks, deep, and immediate. (3) Listening is a process that triggers a callback and does other things when the listening value changes.

At the end

More front-end learning articles, please click on the front-end advanced class, welcome to pay attention to! Remember quality three even!