Translator: Front-end wisdom

Original text: medium.com/@jlanne119/…

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

1. How to understand JSthisKey words?

JS beginners are always confused by the this keyword because it is a bit tricky in JS compared to other modern programming languages. “This” generally refers to the current object, but things don’t happen as they should. The JS this keyword is determined by the caller of the function, who calls this refers to which. If the caller is not found, this points to a Windows object.

Some corn, please

The first example is simple. Call func() in the test object, so ‘this’ in func() refers to the test object, so the printed prop is the prop in test, which is 42.

var test = { prop: 42, func: function(){ return this.prop; }}; console.log (test.func()); / / 42Copy the code

If we call getFullname directly, the second example will print ‘David Jones’, since this can’t find the caller, so the default is the window object, and the fullname printed is global.

Var fullName = 'David Jones' var obj ={fullName:' Colin Brown ', prop:{fullname: 'Aurelio Deftch', getFullname: function(){ return this.fullname; }}} var test = obj.prop.getFullName console.log(test()) // David Jones obj.prop.getFullName () // 'Aurelio Deftch'Copy the code

2. Due to thethisKeywords are confusing. How do I solve this problem

There are many ways to solve this problem; However, no matter which solution you choose, the most important thing is to know which object you decide to have this refer to.

Once you know what this refers to, you can just change it to the name of the object. Otherwise, use the bind, call, and apply functions to solve the problem.

What is a closure

When I first explained closures, I used to talk about functions within functions; However, it does not correctly describe the exact meaning of closures.

Closures create a closed lexical scope in another scope. It usually returns automatically to generate the lexical environment. This environment consists of any local variables that were in scope when the closure was created. It is like a miniature factory, using these raw materials to produce products with specific functions.

function add(n){
  var num = n
  return function addTo(x){
    return x + num
  }
}
addTwo = add(2)
addTwo(5)    
Copy the code

Another use of closures is to create private variables and methods. JavaScript does not support OOP as well as Java does. There is no explicit way to create private methods in JS, but closures can be private.

4. Explain the elevation of variables

Promotion of variables is the default behavior of JavaScript, which means that all variable declarations are moved to the top of the current scope, and variables can be used before they are declared. Initialization is not promoted; promotion only applies to declarations of variables.

Var x = 1 console.log(x + '--' + y) // 1 -- undefined var y = 2Copy the code

5. How does JavaScript handle synchronous and asynchronous cases

Although JavaScript is a single-threaded programming language with a single call stack, it can also use a mechanism called event loop ** to handle some asynchronous functions. Understanding how JavaScript works at a basic level is a key part of understanding how JS handles asynchrony.

As shown, the call stack is used to locate functions. Once the function is called, the function is pushed onto the stack. However, asynchronous functions are not pushed onto the call stack immediately, but are pushed onto the Task Queue and executed when the call stack is empty. Transferring events from the task queue to the call stack is called an event loop.

6. How to understand event delegation

Binding event listeners to the DOM tree and using JS event handlers is a typical way to handle client-side event responses. In theory, we could attach listeners to any DOM element in the HTML, but this is wasteful and unnecessary due to event delegation.

** What is event delegation? 台湾国

This is a technique that allows event listeners on parent elements to affect child elements as well. In general, event propagation (capture and bubbling) allows us to implement event delegation. Bubbling means that when a child element (target) is triggered, the parent element of that child element can also be triggered layer by layer until it hits the original listener of the DOM binding (current target). The capture attribute converts the event phase to the capture phase, moving the event down to the element; Thus, the trigger direction is opposite to that of the bubble phase. The default value for capture is false.

7. How to understand higher-order functions

Everything in JavaScript is an object, including functions. We can pass variables as arguments to functions, and functions do the same. We call a function that accepts and/or returns another function called a higher-order function.

8. How to distinguish declared functions from expression functions

Function hello() {return "hello"} var h1 = function hello() {return "hello"}Copy the code

The two functions will be defined at different times. Define declarations during parsing and expressions at run time; Therefore, if our console prints h1, it will display HELLO.

9. Explain how stereotype inheritance works

JavaScript is not an object-oriented friendly programming language, but it still uses the idea of inheritance to implement dependencies and uses many built-in functions to make it flexible. Understanding how prototype inheritance works will give you a good understanding of JavaScript to avoid conceptual misuses.

It’s best to picture the entire mechanics of JavaScript in your mind to understand archetypal inheritance.

JavaScript has a super object from which all objects inherit. Prototype internal property of the object to which ‘__ proto__’ points. A prototype contains a constructor from which the object can create an instance. __proto__ always exists in an object and points hierarchically to the prototype to which it belongs until null, which is called the prototype chain.

10. Explain strict Mode

Strict patterns are used to standardize normal JavaScript semantics. Strict patterns can be embedded in non-strict patterns with the keyword ‘use strict’. The code using the strict mode should follow the strict syntax rules of JS. For example, semicolons are used after each statement declaration.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.