【面试题解】this 指向问题以及 ES6 模块化

感觉有帮助的小伙伴请点赞👍鼓励一下 ~

一.this指向问题

首先，在 Vue 所有的生命周期钩子方法（如 beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy 以及 destroyed）里使用 this，this 指向调用它的 Vue 实例，即（new Vue）。

其次，箭头函数没有自己的 this, 它的 this 是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。

根据下面例子进行详细解释

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            sList: [1,2,3],
            sResultList: []
        },
        methods:{
            group:function(){
                //ES5的普通函数写法，这里的this指向app,指向vue实例
                this.......
            },
            group1:()=>{
              //ES6的箭头函数写法，箭头函数没有自己的this,它的this事继承来的，
              //指向在定义它时所处的宿主对象，在这里this指向window。
                this.......
            },
            group2:function(){
                this.sList.forEach(function(obj){ //匿名函数中的this
                //在匿名函数中，这里的this不指向vue实例，这里的this指向window，
                //在严格模式下，this指向undefined ，要使用this，可以直接用app（即vue实例）。
                app.sResultList.push(obj)
                //  this.sResultList.push(obj)
                })
            },
	    group3:function(){
                //这里的this同group中的this一样，指向vue实例
                this.sList.forEach((obj)=>{ //既是匿名函数又是箭头函数中的this
                //匿名函数没有自己的this，它的this继承来的，
                //也可以说这里的this指向跟上一级的this指向相同，即vue实例
                this.sResultList.push(obj)
                })
            }
        },
    })
    $(function(){
        app.group()
    })
</script>

二.模块化

1.Export

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过 export 输出，

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

也可以用更好的方式：用大括号指定要输出的一组变量

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

除了输出变量，还可以输出函数,同样可以批量输出

//fn.js
//单个输出
export function multiply(x, y) {
  return x * y;
};

//批量输出
function v1() { ... }
function v2() { ... }
//还可以使用 as 重新指定名字
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as aaaaa,
};

2.Import

export 定义了模块的对外接口后，其他JS文件就可以通过 import 来加载这个模块。

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

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

import 命令接受一对大括号，里面指定要从其他模块导入的变量名，必须与被导入模块（profile.js）对外接口的名称相同。可以用 as 关键字重新指定名字.

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

除了指定加载某个输出值，还可以用（*）指定一个对象，所有的变量都会加载在这个对象上。

import * as obj from './fn';

obj.streamV1();

obj.streamV2();

3.ES2020新功能

Javascript 的动态引入，允许把 JS 文件作为一个模块动态的引入到应用中。也可以在 if-else 块中加载代码。在 if-else 块中引入一个模块的好处是：不会污染全局命名空间。

①按需引入

import 模块在事件监听函数中，只有用户点击了按钮，才会加载这个模块。

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

②条件引入

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