preface

According to the moOCs “Quick Handling of front-end technology and matching big factory interview requirements” course organized by the topic, updated

Take interview questions often

Scenario questions

Take a look at these basic interview scenario questions. Can you write them? For the answers to the scene questions, please drag the scroll bar below, and then view the notes for reference and compare your answers

① Closure scenario 1

  function print(fn) {
            const a = 200
            fn()
        }
        // The function is passed as an argument
  const a = 100   function fn() {  console.log(a) // Look up the definition and find the global definition of a variable outside, so print 100  }   print(fn)  / / 100 Copy the code

② Closure scenario 2

  function create() {
            const a = 100
            return function () {
                console.log(a)
            }
 }  // function as return value   const fn = create()  const a = 200  fn()  / / print 100 Copy the code

③ This, call, bind

  function fn1() {
            console.log(this)
        }

        fn1()                             // window
  fn1.call( { x:100})// Call changes direction to execute directly  // {x:100}  const fn2 = fn1.bind( { x:200})// Returns a new function execution, so an assignment is required  fn2()  // {x:200} Copy the code

(4) this arrow

 const zhangsan = {
            name: 'Joe'.            sayHi() {
                                    // This is the current object
                console.log(this)
 },  wait() {  setTimeout(  function() {  console.log(this)  // this === window  // A function that is triggered by itself, but not by an object, can be treated as this function outside, so this refers to window  }  )  }  }  zhangsan.sayHi() // The current object  zhangsan.wait() // window Copy the code

(4) this arrow

  const zhangsan = {
            name: 'Joe'.            sayHi() {
                                    // This is the current object
                console.log(this)
 },  wait() {  setTimeout(  (a)= > {  console.log(this)  // This is the current object  // Arrow functions take the value of their parent scope  }  )  }  }  zhangsan.sayHi() // The current object  zhangsan.wait() // The current object Copy the code

(5) class, this

  class People {
            constructor(name) {
                this.name = name
                this.age = 20
            }
 sayHi() {  console.log(this)  }  }   const zhangsan = new People('Joe')  zhangsan.sayHi() // Select * from the list Copy the code

⑥ Scope interview scenario 1

  let i
        for( i = 1 ; i<=3 ; i++ ){
            setTimeout( function() {
                console.log(i)
},0 )
 }   // Print 3 times 4 Copy the code

⑦ Scope interview scenario question 1

  let a = 100

        function test () {
            alert(a)
            a = 10
 alert(a)  }   test()  alert(a)   / / 10 10, 100 Copy the code

1. Typeof determines which types

  • ① Identify all value types
  • ② Identify the function
  • ③ Check whether it is a reference type (cannot be subdivided)

2. When to use === and when to use ==

  • Use === in all cases except ‘== null’
  • If (obj. A = = null) is equivalent to the if (obj. A = = = null | | obj. A = = = undifined)
  • == type conversion occurs

3. Difference between value type and reference type

Common value types:

  • undifined
  • String String
  • The Number of numerical
  • Boolean Boolean
  • Symbol (new in ES6)

Common reference types

  • Object the object
  • Array an Array
  • The function function
  • Null special reference type

4. Deep copy by hand

function deepClone( obj = { } ){
 if( typeof obj ! = ='object' || obj == null) {     return obj
    }

 let result  if( obj instanceof Array) { result = []  }else {  result = {}  }    for( let key in obj ){  if( obj.hasOwnProperty(key) ){  result[key] = deepClone( obj[key] )  }  }   return result } Copy the code

5. How to determine if a variable is an array?

Direct instanceof Array, reason reference prototype, prototype chain

6. Write a simple JQuery by hand. Consider plug-ins and extensibility

It’s one thing to write or not to write, but first of all, you need to understand the topic, you need to think about plug-ins and extensibility, which means you can use class, you can inherit, you can operate through prototypes

  • Plug-ins to add various extensions to the original class
  • Extensibility, inheritance write your own class
class JQuery {
        constructor (selector) {
            const result = document.querySelectorAll(selector)
            const length = result.length
            for( let i = 0 ; i<length ; i++ ){
 this[i] = result[i]  }  this.length = length  }  get ( index ) {  return this[index]  }  each (fn) {  for ( let i = 0 ; i<this.length ; i++ ){  const elem = this[i]  fn(elem)  }  }  on ( type, fn ) {  return this.each( elem= > {  elem.addEvenListener( type, fn , false ) }) }  // Extend many DOM apis  } Copy the code

7. How to understand the prototypical nature of class?

nature

  • Class is a new feature in ES6 that allows you to define a class. In fact, class is just a syntactic sugar, which is another way of writing the constructor. What is grammar sugar? Is a syntactically elegant solution to avoid coding errors and make coding more efficient, in short, a portable way to write.

  • Class has constructor, attribute, and method

  • Class extends from extends and super

Prototype, prototype chain

  • Instance. __proto__Implicit stereotype
  • The class name. The prototypeExplicit prototype (all equal, same reference address)

8. How to value different application scenarios of this?

What value does this take when the function is executed, but not when it is defined

  • ① As a normal function call, return window
  • ② Use call, apply, bind, pass what, this bind what
  • ③ Called as a method object
  • ④ Call it in the class method
  • ⑤ Arrow function

Closure conditions:

  • Function as return value
  • ② Functions are passed as arguments

9. Write bind by hand

The bind / / simulation
        Function.prototype.bind1 = function() {
            // Split the parameters into arrays
            const args = Array.prototype.slice.call(arguments)

 // Get this (first item of array)  const t = args.shift()   // fn1.bind(...) The fn1  const self = this   return function() {  return self.apply(t,args)  }  } Copy the code

10. Examples of closure application scenarios in actual development

  • SetTimeout: The first function passed by a native setTimeout cannot take an argument
  • ② Function anti-shake
  • ③ Use closures to design singleton patterns
  • ④ Set private variables
  • ⑤ Get the right value

11. Write a simple cache tool

  function createCache() {
            const data = {}
            // The data in the closure is hidden from outside access
            return {
                set ( key , val ) {
 data[key] = val  },  get (key) {  return data[key]  }  }  } Copy the code

12. Free variables

The value of the free variable: search for the value of the free variable in the method defined (search for the value of the upper scope, layer by layer, until it is found, if the global scope is not found, error XXX is not defined)

At the end of the article

If you think my writing is good, you can give me a thumbs up. If there is anything wrong or bad, please comment and point out so that I can correct it.

Other articles

  • Front end basic knowledge ① — CSS interview questions
  • Traversal of binary trees of data structures
  • Imitation go where project video learning summary
  • Webpack is easy to learn
  • Gluten series ① — Didi SP side interview question
  • Gluten series ② — Didi intern cool the meridian

This article is formatted using MDNICE