JavaScript立即执行函数与函数劫持的作用

JS立即执行函数 JS函数劫持 2023-01-11 09:01:29 104人浏览独家记忆

摘要

目录一、立即执行函数1、实现方式2、立即执行函数的作用3、使用场景4、返回值5、带单目运算符的立即执行函数二、函数劫持一、立即执行函数立即执行函数(IIFE)：在函数声明后立即调用

一、立即执行函数

立即执行函数(IIFE)：在函数声明后立即调用

1、实现方式

（1）用“()”将函数的定义包裹起来

let _log = console.log;//将console.log的原有功能保存到_log中
console.log = function(str){//对console.log进行劫持：添加新的功能
    _log(str+'今天周五啦！')//在console.log原有输出功能之外，加入新的信息
}

（2）先用“()”将函数的定义部分包裹起来，然后再加上调用的“()”

(function test(){
    console.log('明天晴天~');
}())

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

2、立即执行函数的作用

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

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

3、使用场景

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

（2）在应用中只执行一次的代码

4、返回值

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

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

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

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

单目运算符作用：进行语法检查

（2）在函数定义之后加上“()”，在function之前加上单目运算符，可以使函数变成立即执行函数

+function(){
    console.error('Hello World');
}()

二、函数劫持

定义

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

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

（1）call()方法

var obj = {
    name:'song',
    fun:function(age,height){
        let age = age
        let height = height
        console.log('姓名',this.name);//this指向obj
        console.log('年龄',age);
        console.log('身高',height);
    }
}
var obj2 = {
    name:'hao'
}
obj.fun(21,187);//未劫持
console.log('------------------');
obj.fun.call(obj2,22,187);//通过调用call函数将fun函数中的this进行劫持，this执行了obj2

（2）apply() 传递时需注意使用[]

var obj = {
    name:'song',
    fun:function(n1,n2){
        let age = n1
        let height = n2
        console.log('姓名',this.name);
        console.log('年龄',age);
        console.log('身高',height);
    }
}
var obj2 = {
    name:'hao'
}
obj.fun(21,'187cm');
console.log('------------------');
obj.fun.apply(obj2,[22,'187cm']);

（3）bind()方法强制性绑定

let obj2 = {
    name:'小王',
    age:'22',
    height:'187cm'
}
let obj = {
    name:"小锅巴",
    age:'25',
    height:'155cm',
    fun:function(){
        console.log('姓名',this.name);
        console.log('年龄',this.age);
        console.log('身高',this.height);
    }.bind(obj2)
}
obj.fun();

到此这篇关于javascript立即执行函数与函数劫持的作用的文章就介绍到这了,更多相关JS立即执行函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript立即执行函数与函数劫持的作用

本文链接: https://www.lsjlt.com/news/177333.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341