ES6的模块化管理、立即执行函数（IIFE）：在函数声明后面立即调用、函数劫持

        1、Node.js简介：

                （1）Node是什么：

                        A、浏览器内核有两个引擎：渲染引擎(渲染html、css)、JavaScript引擎(运行JavaScript代码)

                        B、Node是独立于浏览器的JavaScript的运行环境，通常将Node称为JavaScript的服务器运行环境

                                a、Node相当于运行JavaScript程序的虚拟机

                                b、Node本身也是JavaScript的工具库

                （2）使用Node的原因：有了Node后JavaScript就正式成为一个工程化的开发语言

        2、安装Node.js

                设置环境变量的目的：在自定义的目录下运行程序，操作系统可以找到相应的指令

        3、ES6中的模块：一个.js文件就是一个模块

                （1）文件名：主文件名.扩展名

                        .扩展名的作用是：指定文件的类型

                        .mp3：音频文件 mpeg-3

                        .mp4：音频文件 mpeg-4

                        .jpg .png

        （2）模块化的操作：导出（export）、导入（import）

                        注意：ES6中是由模块化的环境配置：

        第一步：初始化环境，存放在js文件夹下执行：npm init -y （生成package.json文件）

        第二步：在package.json文件中加入："type":"module"表示采用的是ES6的模块化管理方式

                （3）导出 / 导入 一个变量：

//在t1.js文件导出变量
export let userName = '武则天'

//exam.js导入变量
import { userName  } from "./t1.js";
console.log(userName)

                （4）导出 / 导入 多个变量

//在t1.js中导出多个变量
let userName = '武则天'
let userAge = 75
let userFun = function(){
    console.log('Name：',userName)
    console.log('Age：',userAge)
}
export { userName,userAge,userFun }

//在exam.js中导入变量
import { userName,userAge,userFun  } from "./t1.js"; //导入时必须带文件的扩展名(后缀)
console.log(userName)
console.log(userAge)
userFun()

                （5）导入变量时重命名：使用as

//在exam.js中导入变量
import { userName as myname,userAge as myage ,userFun as ftp  } from "./t1.js";
console.log(myname)
console.log(myage)
ftp()

二、ES6的模块化管理

        1、模块化管理的方式

                （1）ES6的方式：一个js.文件就是一个模块。采用“module”方式管理。即用exports导出、用import...from导入

                2）Node的方式：采用“CommonJS”方式，即exports.module=‘变量名’导出，用require导入

        2、在VSCode中配置ES6的模块管理环境

                （1）在指定文件夹下执行初始化指令：npm init -y 会在文件夹下生成package.json文件

                （2）在package.json中加入：“type”：“module”

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module"
}

        3、导入/导出变量

        4、导入/导出整个模块

import * as info from "./export.js"  //将expor.js文件全部导入，并重命名为info
console.log("--学校",info.shcool)
console.log("--地址",info.address)

        5、默认导出（export default）：

                （1）一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出

//export.js文件默认导出
let shcool='学校'
let address='旁边'

const obj={
    shcool,
    address
}


export default obj

//import.js文件中导入
import obj from "./export.js"  //将expor.js文件全部导入，并重命名为infp
console.log("--学校",obj.shcool)
console.log("--地址",obj.address)

                （2）混合导出

//在export.js文件中使用默认导出：导出一个函数
export default function(){
    console.log('愿者上钩')
}

//普通导出：导出变量
export let myName='姜子牙'

//exam2.js文件中导入：默认的导出不能用{}，普通导出的变量要用{}
import myFun,{myName} from './export.js'
console.log(myName+'钓鱼')
myFun()

                （3）重命名export和import

//如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，可以这样做：
            /******************************test1.js**********************/
            export let myName="我来自test1.js";
            /******************************test2.js**********************/
            export let myName="我来自test2.js";
            /******************************index.js**********************/
            import {myName as name1} from "./test1.js";
            import {myName as name2} from "./test2.js";
            console.log(name1);
            console.log(name2);

三、立即执行函数（IIFE）：在函数声明后面立即调用

        1、实现方式

                （1）用圆括号将函数整体包裹起来

//匿名的立即执行函数
(function(){
    //函数体
}())
//有函数名的立即执行函数
(function(test){
    //函数体
}())

//带参数的立即执行函数
(function test(name){
    console.log(name)
}('刘备'))

                （2）先用括号将函数的定义部分包裹起来，然后再加上调用的圆括号

(function(){
    //函数体
}())
(function test(id){
console.log(id)
}('1002'))

        强调：用圆括号包裹的原因是将函数变成一个表达式，这样在页面加载和js程序执行时函数就立即被调用

        2、立即执行函数的作用

                （1）不需要为函数命名，避免污染全局变量

                （2）创建一个独立作用域，这个作用域里面的变量，外面访问不到，避免变量污染

        3、使用场景

                （1）在页面加载完成后，需要立即执行一些初始化设置，例如事件处理、创建对象等

                （2）在应用中执行一些只需要执行一次的代码。代码中的某些变量在执行结束后，再也不会被用到，我们就不适合用全局变量，可能会变量污染，此时更适合用立即执行函数。

        4、返回值

                （1）定义一个变量接受立即执行函数的返回值

let result = (function(){
    var num=666
    return num
})()

                （2）立即执行函数返回值是一个函数

let fun = (function () {  //fun接收返回的函数，fun就是一个函数
    var num = 888
    return function () {  //返回一个函数
        return num
    }
})()
console.log(fun())

        5、带单目运算符的立即执行函数

                （1）单目运算符（一元运算符）：参加运算符的对象只有一个

                        + 、 - 、 ！、 ~(按位取反)

                （2）在函数定义之后加上圆括号，在function前面加上单目运算符，可以使函数变成立即执行函数。单目运算符的作用就是进行语法检查

-function foo(){
    console.log("Hello World")
}()

+function(){
    console.log('Hello World!')
}()

四、函数劫持：即在一个函数运行之前把它劫持下来，添加我们想要的功能。当这个函数实际运行的时候，它已经不是原本的函数了，而是带上了被我们添加上去的功能。这也是我们常见的[ 钩子函数]的原理之一。

        示例：

let _log = console.log  //将console.log的原有功能保存到_log中

console.log = function (str) {  //对console.log进行劫持：添加新的功能
    _log(str + '玛卡巴卡')  //在console.log原有输出功能之外，加入新的信息
}
console.log('Hello')

        1、this关键字的引用劫持：改变this的指向，通过一些特殊的方法来自己指定函数的调用者

                （1）通过call()方法劫持this

var obj = {
    name :'郭靖',
    fun:function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名:',this .name)  //this指向obj
        console.log('年龄:',age)
        console.log('身高:',height)
    }
}
var obj2={
    name:'杨康'
}
obj.fun(21,180)  //未劫持
console.log('---------')
obj.fun.call(obj2,21,180)  //通过调用call函数将函数fun中的this进行劫持，this指向了obj2

                （2）通过apply()方法劫持this

var obj = {
    name :'郭靖',
    fun:function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名:',this .name)  //this指向obj
        console.log('年龄:',age)
        console.log('身高:',height)
    }
}
var obj2={
    name:'杨康'
}
obj.fun(21,'180cm')  //未劫持
console.log('---------')
obj.fun.apply(obj2,[22,'175cm'])  //通过调用apply函数将函数fun中的this进行劫持，this指向了obj2

                （3）通过bind()方法劫持this

let obj2 = {
    name: '杨康',
    age: 20,
    height: '180cm'
}

let obj = {
    name: '郭靖',
    age: 21,
    height: '175cm',
    fun: function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名:',this.name)  //this指向obj
        console.log('年龄:',this.age)
        console.log('身高:',this.height)
    }.bind(obj2)
}
obj.fun()

        bind()方法就是在函数设计的时候就指定函数的调用者，也就是指定函数中this的指向；其参数传入形式和call方法一样，是直接传入参数。