This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The purpose of this series of interview questions is to learn the relevant knowledge so that you can easily solve the various forms of the exam questions. This article covers this pointing questions and modularity in JavaScript.

If you feel helpful, please click 👍 to encourage you

This refers to the problem

First, in Vue all lifecycle hook methods (such as beforeCreate, created, beforeMount, Mounted, beforeUpdate, updated, BeforeDestroy and Destroyed), which points to the Vue instance calling it, i.e. (New Vue).

Second, the arrow function does not have its own this; its this is inherited; The default points to the object at which it was defined (the host object), not the object at execution time.

Use the following example to explain in detail

<script type="text/javascript">
    var app = new Vue({
        el:"#app".data: {sList: [1.2.3].sResultList: []},methods: {group:function(){
                //ES5 normal function writing, where this refers to app, refers to vue instance
                this. },group1:() = >{
              // the arrow function does not have its own this, its this thing inherits,
              // Refers to the host object at which it was defined, in which case this refers to the window.
                this. },group2:function(){
                this.sList.forEach(function(obj){ // This in an anonymous function
                // In anonymous functions, this does not refer to the vue instance, this refers to the window,
                // In strict mode, this refers to undefined. To use this, you can use app (i.e. vue instance) directly.
                app.sResultList.push(obj)
                // this.sResultList.push(obj)})},group3:function(){
                This, like this in group, refers to the vue instance
                this.sList.forEach((obj) = >{ // This is both an anonymous function and an arrow function
                // The anonymous function does not have its own this, its this inherits,
                // We can also say that this refers to the same level as this, i.e. Vue instance
                this.sResultList.push(obj)
                })
            }
        },
    })
    $(function(){
        app.group()
    })
</script>
Copy the code

Two. Modularization

1.Export

A module is a separate file, and all variables inside the file cannot be accessed externally. If you want to get a variable, you have to export it,

// info.js
export let name = 'hzw';
export let age = '23';
export let year = 1998;
Copy the code

You can do it a better way: use curly braces to specify a set of variables to output

// info.js
let name = 'hzw';
let age = '23';
let year = 1998;
export {firstName, lastName, year};
Copy the code

In addition to output variables, you can also output functions, also batch output

//fn.js
// Single output
export function multiply(x, y) {
  return x * y;
};

// Batch output
function v1() {... }function v2() {... }// You can also use as to respecify the name
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as aaaaa,
};
Copy the code

2.Import

After export defines the external interface of a module, other JS files can load the module through import.

// main.js
import {name, age, year} from './profile';

function setName(element) {
  element.textContent = name + ' ' + age;
}
Copy the code

The import command accepts a pair of curly braces specifying that the name of the variable to be imported from another module must be the same as the name of the external interface of the imported module (profile.js). You can respecify the name using the AS keyword.

import { name as username } from './info';
Copy the code

Instead of specifying an output value to load, you can use (*) to specify an object on which all variables will be loaded.

import * as obj from './fn';

obj.streamV1();

obj.streamV2();
Copy the code

3. ES2020 new features

Dynamic introduction of Javascript, which allows JS files to be dynamically introduced into an application as a module. You can also load code in if-else blocks. The advantage of introducing a module in an if-else block is that it does not pollute the global namespace.

① Introduction on demand

The import module is loaded only when the user clicks the button in the event listener function.

button.addEventListener('click'.event= > {
  import('./fn.js')
  .then(
  fn();
  )
  .catch(error= > {
    /* Error handling */})});Copy the code

② Conditional introduction

if (n>1) {
  import('moduleA').then(...) ; }else {
  import('moduleB').then(...) ; }Copy the code