JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用
一、立即執(zhí)行函數(shù)
立即執(zhí)行函數(shù)(IIFE):在函數(shù)聲明后立即調(diào)用
1、實現(xiàn)方式
(1)用“()”將函數(shù)的定義包裹起來
let _log = console.log;//將console.log的原有功能保存到_log中 console.log = function(str){//對console.log進(jìn)行劫持:添加新的功能 _log(str+'今天周五啦!')//在console.log原有輸出功能之外,加入新的信息 }
(2)先用“()”將函數(shù)的定義部分包裹起來,然后再加上調(diào)用的“()”
(function test(){ console.log('明天晴天~'); }())
注:用“()”包裹的原因是將函數(shù)變成一個表達(dá)式,這樣在頁面被加載時、js程序執(zhí)行時,函數(shù)就立即調(diào)用
2、立即執(zhí)行函數(shù)的作用
(1)不需要為函數(shù)命名,避免污染全局變量
(2)創(chuàng)建一個獨立作用域,這個作用域里面的變量,外部訪問不到,避免變量污染
3、使用場景
(1)在頁面加載完成后,需要立即執(zhí)行的一些初始化設(shè)置,例如事件處理、創(chuàng)建對象等
(2)在應(yīng)用中只執(zhí)行一次的代碼
4、返回值
(1)定義變量接收立即執(zhí)行函數(shù)的返回值
(2)立即執(zhí)行函數(shù)返回值是一個函數(shù)
5、帶單目運算符的立即執(zhí)行函數(shù)
(1)單目運算符(一元運算符):參加運算的對象只有一個:+、-、~、!
單目運算符作用:進(jìn)行語法檢查
(2)在函數(shù)定義之后加上“()”,在function之前加上單目運算符,可以使函數(shù)變成立即執(zhí)行函數(shù)
+function(){ console.error('Hello World'); }()
二、函數(shù)劫持
定義
即在一個函數(shù)運行之前把它劫持下來,添加我們想要的功能。當(dāng)這個函數(shù)實際運行的時候,它已經(jīng)不是原本的函數(shù)了,而是帶上了被我們添加上去的功能。這也是我們常見的[鉤子函數(shù)]的原理之一
1、this關(guān)鍵字的引用劫持:改變this的指向,通過一些特殊的方法來自己指定函數(shù)的調(diào)用者
(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);//通過調(diào)用call函數(shù)將fun函數(shù)中的this進(jìn)行劫持,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();
到此這篇關(guān)于JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用的文章就介紹到這了,更多相關(guān)JS立即執(zhí)行函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS通過識別id、value值對checkbox設(shè)置選中狀態(tài)
最開始需要獲取的是input value值設(shè)置checkbox選中狀態(tài),由于input value要使用計算業(yè)務(wù),后來改造為id,這里就為大家分享一下實現(xiàn)代碼,需要的朋友可以參考下2020-02-02js數(shù)組刪除問題(splice和delete的用法)
這篇文章主要介紹了js數(shù)組刪除問題(splice和delete的用法),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02