立即执行函数和函数劫持

不想写，还得写，写就写，慢慢写

已于 2022-11-11 22:50:15 修改

阅读量187

点赞数 1

文章标签： java 开发语言

于 2022-11-11 21:03:45 首次发布

本文链接：https://blog.csdn.net/m0_74331185/article/details/127813079

版权

一、ES6的类的继承

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

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

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

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

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

对象名 instanceof 类名

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

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) //子类对象foot是父类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文件

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

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

3、导出 / 导入变量

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.js文件中导入
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(){
//函数体
}())

//有函数名的立即执行函数
(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 = 888
    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(){
        console.log('姓名：',this.name) //this指向obj
        console.log('年龄：',this.age)
        console.log('身高：',this.height)
    }.bind(obj2)
}
obj.fun()

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