立即执行函数和函数劫持

一、ES6的类的继承

1.继承的好处：在父类中定义的属性和方法，子类继承后就可以直接使用。

2.类继承过程中的向上转型：子类对象的类型一定是父类的类型，父类对象的类型不能是子类的类型

(1)typeof：用于判断变量的数据类型（基本数据类型）

​ typeof 变量名 == ‘数据类型’

（2）instanceof：用于判断变量的数据类型（类类型）

​ 对象名 instanceof 类名

​ 判断”对象”是否是给定的类的对象

        // 1.定义父类（基类）Sports
        class Sports{
            constructor(){}
            play(){}
        }
        class Football extends Sports{
            constructor(){
                super()
            }
            play(){
                console.log('足球是用脚踢的！')
            }
        }
        class Bascketball extends Sports{
            constructor(){
                super()
            }
            play(){
                console.log('篮球是用手打的！')
            }
        }
        function howToPlay(sp){
            sp.play()
        }
        let sport = new Sports()//sport是基类的对象
        let foot = new Football()
        let flag = (foot instanceof Sports)//子类对象是父类Sports类型----向上转型
        console.log('flag=',flag)//flag = true
        // let flag = (sp instanceof Football)//父类对象sp不能是子类Football类型---不能向下转型
        // console.log('flag=',flag)//flag = false

二.ES6的模块化管理

1.模块化管理的方式

(1)ES6的方式：一个.js文件就是一个模块。采用"module"方式管理。即用export导出、用import...from导入

(2)Node的方式：采用"CommonJS"方式。即module.exports= "变量名"导出，用require导入

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

(1)在指定文件夹下执行初始化指令：npm init -y      

会在文件夹下生成package.json文件

{
  "name": "11-11es6",
  "version": "1.0.0",
  "description": "",
  "main": "export.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type":"module"
}

(2)在package.json中加入：“type”：“module”

3.导出 / 导入变量

// export.js文件默认导出
let school = '长安大学'
let address = '小寨'
export{
    school,
    address
}

//导入
import {school,address} from "./export.js";
console.log("学校：",school)
console.log("地址：",address)

4.导入 / 导出整个模块：使用*统配符，表示导入所有

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

5.默认导出(export default)：

(1)一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

// export.js文件默认导出
let school = '长安大学'
let address = '小寨'
const obj = {
    school,
    address
}
export default obj

import obj from "./export.js";
console.log("--学校：",obj.school)
console.log("--地址：",obj.address)

(2)混合导出

//在export.js文件中使用默认导出：导出一个函数
export default function(){
    console.log('愿者上钩')
}
//普通导出：导出变量
export let myName = '姜子牙'

//在import.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 (){
    console.log('匿名的立即执行函数')
}())//()表示函数的调用
// 带名字的立即执行函数
(function test(){
    console.log('带名字的立即执行函数')
}())
// 带参数的立即执行函数
(function test(name){
    console.log(name)
}('懒羊羊'))

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

(function(){

        函数体

})()

// 带参数的立即执行函数
(function test(id){
    console.log('id=',id)
})('1001')

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

2.立即执行函数的作用

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

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

(3)闭包和私有数据

(function(){
    var k = 100
    console.log('k=',k)
})()
console.log(k)//无法执行，直接报错

3.使用场景

(1)在页面加载完成后，需要立即执行的一些初始化设置，例如时间处理、创建对象等。

(2)在应用中只执行一次的代码

4.返回值

(1)定义变量接受立即执行函数的返回值

let result=(function (){
    var num1 = 888
    return num1
})()
console.log(result())

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

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

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

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

+、-、！、~

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

!function foo(){
    console.log('hello kitty1')
}()
+function foo(){
    console.log('hello kitty2')
}()
-function foo(){
    console.log('hello kitty3')
}()
~function foo(){
    console.log('hello kitty4')
}()
+function (){//匿名函数
    console.log('美羊羊')
}()

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

+function(){
    console.info('111111')
    console.log('222222')
    console.error('3333')
}()

示例：

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('name=',this.name)//obj指向this
        console.log('age=',age)
        console.log('height=',height)
    }
}
let obj2 ={
    name:'美羊羊'
}
obj.fun(21,185)//为劫持
console.log('-------------------------')
obj.fun.call(obj2,21,185)//通过call函数将fun函数中的this进行劫持，this指向了obj2

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

var obj = {
    name:'西西',
    fun:function(n1,n2){
        this.age = n1
        this.height = n2
        console.log(this.name)
        console.log(this.age)
        console.log(this.height)
    }
}
var obj2 = {
    name:'小绵羊'
}
obj.fun(21,'180cm')//未劫持
console.log('--------')
obj.fun.apply(obj2,[22,'176cm'])//通过调用apply函数将fun函数进行劫持，this指向了obj2

var arr = [10,23,34,45,67,99,2]
// 方法一
// let max = Math.max(...arr)//...arr进行解构
// console.log(max)
// 等价
// 方法二
let max =Math.max.apply(arr,arr)//let max = Math.max(...arr)
console.log(max)

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

let obj2 = {
    name:'西西',
    age:22,
    height:"186cm"
}
let obj = {
    name:'小绵羊',
    age:30,
    height:"176cm",
    fun:function(){
        console.log(this.name)
        console.log(this.age)
        console.log(this.height)
    }.bind(obj2)
}
obj.fun()

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