JavaScript立即执行函数与函数劫持详解
本文详细解析JavaScript中立即执行函数(IIFE)的多种实现方式及其在避免全局变量污染、创建独立作用域中的应用场景。同时深入探讨函数劫持概念,重点介绍利用call、apply和bind方法改变this指向的具体操作与代码示例,帮助开发者掌握核心技巧。
一、立即执行函数
立即执行函数(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立即执行函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
