返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript立即执行函数与函数劫持的作用
  • 104
分享到

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://lsjlt.com/news/177333.html(转载时请注明来源链接)

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

猜你喜欢
  • JavaScript立即执行函数与函数劫持的作用
    目录一、立即执行函数1、实现方式2、立即执行函数的作用3、使用场景4、返回值5、带单目运算符的立即执行函数二、函数劫持一、立即执行函数 立即执行函数(IIFE):在函数声明后立即调用...
    99+
    2023-01-11
    JS立即执行函数 JS函数劫持
  • JavaScript立即执行函数用法解析
            我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用, fu...
    99+
    2024-04-02
  • JavaScript基础之立即执行函数
    目录立即执行函数格式立即执行函数其他方式–表达式立即执行函数可以带参数应用总结在JavaScript中有时候看到一些很神奇的函数比如下面截图: 这种函数只要浏览器加载的时候会自动运...
    99+
    2024-04-02
  • JavaScript立即执行函数的用法是什么
    JavaScript立即执行函数的用法是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。       ...
    99+
    2023-06-22
  • Javascript立即执行函数(IIFE)实例详解
    目录前言函数表达式立即执行函数如果我们了解整个情况:IIFE 的特征/行为附:IIFE的参数总结前言 IIFE,一般称为立即执行函数。你可能会问我,*“嘿!我知道正常的函...
    99+
    2024-04-02
  • JavaScript中立即执行函数格式有哪些
    这篇文章主要介绍JavaScript中立即执行函数格式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在JavaScript中有时候看到一些很神奇的函数比如下面截图:这种函数只要浏览器加载的时候会自动运行,而需要...
    99+
    2023-06-25
  • javascript立即执行函数表达式IIFE的示例分析
    这篇文章主要为大家展示了“javascript立即执行函数表达式IIFE的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript立即执行函数...
    99+
    2024-04-02
  • 在ES5环境下立即执行函数的示例分析
    在ES5环境下立即执行函数的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。立即执行函数常用于第三方库,它可以用来隔离变量作用域,很...
    99+
    2024-04-02
  • JavaScript如何立即调用函数表达式
    小编给大家分享一下JavaScript如何立即调用函数表达式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!立即调用函数一、了解立即调用函数表达式1.1 思维导图1...
    99+
    2023-06-14
  • PHP常见的命令执行函数与代码执行函数
    目录 代码执行函数: 1. eval() GET和POST传参的区别  2. assert() 3. call_user_func() 4. create_function() 5. array_map() 6. call_user_fun...
    99+
    2023-09-05
    php 网络安全 web安全
  • JS怎么实现动态插入并立即执行回调函数
    这篇文章主要讲解了“JS怎么实现动态插入并立即执行回调函数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JS怎么实现动态插入并立即执行回调函数”吧!具体代码如下:<!DOCTYPE&n...
    99+
    2023-07-04
  • javascript中怎么自执行函数
    这期内容当中小编将会给大家带来有关javascript中怎么自执行函数,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。function (window, ...
    99+
    2024-04-02
  • golang函数与goroutine的执行时机
    go语言中,同步调用的函数在当前goroutine中顺序执行,而异步调用的函数通过go关键字在新的goroutine中并行执行。通过控制函数的调用方式,可以定制程序并发行为,优化其性能。...
    99+
    2024-04-25
    golang go语言
  • JavaScript函数的执行过程是什么
    JavaScript函数的执行过程是什么?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。JavaScript可以做什么1.可以使网页具有交互性,例如响应用户点击,...
    99+
    2023-06-14
  • JavaScript如何实现自执行函数
    这篇文章将为大家详细讲解有关JavaScript如何实现自执行函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。自执行函数 ( function(){…} )() 和( function(){…} () ...
    99+
    2023-06-03
  • PHP 函数与 JavaScript 函数的区别?
    php和javascript函数的区别:上下文:php在服务器端执行,javascript在客户端浏览器中执行。语法:php函数使用function关键字声明,javascript函数使...
    99+
    2024-04-25
    php 作用域
  • JavaScript函数内部的代码怎么执行
    这篇文章主要介绍“JavaScript函数内部的代码怎么执行”,在日常操作中,相信很多人在JavaScript函数内部的代码怎么执行问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • JavaScript函数执行上下文的this怎么调用
    今天小编给大家分享一下JavaScript函数执行上下文的this怎么调用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Ja...
    99+
    2023-07-04
  • JavaScript怎么顺序控制执行函数
    这篇文章主要介绍“JavaScript怎么顺序控制执行函数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript怎么顺序控制执行函数”文章能帮助大家解决...
    99+
    2024-04-02
  • 如何在javascript中停止执行函数
    本篇文章给大家分享的是有关如何在javascript中停止执行函数,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。在javascript中如果要终止一个函数的用return即可,...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作