JavaScript立即執(zhí)行函數與函數劫持的作用

更新時間：2023年01月11日 08:38:41 作者：禿頭小宋s

IIFE全拼Imdiately Invoked Function Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數,這篇文章主要給大家介紹了關于Javascript立即執(zhí)行函數的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

一、立即執(zhí)行函數

立即執(zhí)行函數(IIFE)：在函數聲明后立即調用

1、實現(xiàn)方式

（1）用“()”將函數的定義包裹起來

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

（2）先用“()”將函數的定義部分包裹起來，然后再加上調用的“()”

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

注：用“()”包裹的原因是將函數變成一個表達式，這樣在頁面被加載時、js程序執(zhí)行時，函數就立即調用

2、立即執(zhí)行函數的作用

（1）不需要為函數命名，避免污染全局變量

（2）創(chuàng)建一個獨立作用域，這個作用域里面的變量，外部訪問不到，避免變量污染

3、使用場景

（1）在頁面加載完成后，需要立即執(zhí)行的一些初始化設置，例如事件處理、創(chuàng)建對象等

（2）在應用中只執(zhí)行一次的代碼

4、返回值

（1）定義變量接收立即執(zhí)行函數的返回值

（2）立即執(zhí)行函數返回值是一個函數

5、帶單目運算符的立即執(zhí)行函數

（1）單目運算符(一元運算符)：參加運算的對象只有一個：+、-、~、！

單目運算符作用：進行語法檢查

（2）在函數定義之后加上“()”，在function之前加上單目運算符，可以使函數變成立即執(zhí)行函數

+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執(zhí)行了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立即執(zhí)行函數與函數劫持的作用的文章就介紹到這了,更多相關JS立即執(zhí)行函數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: