欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年01月11日 08:38:41   作者:禿頭小宋s  
IIFE全拼Imdiately Invoked Function Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

立即執(zhí)行函數(shù)(IIFE):在函數(shù)聲明后立即調(diào)用

1、實(shí)現(xiàn)方式

(1)用“()”將函數(shù)的定義包裹起來(lái)

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

(2)先用“()”將函數(shù)的定義部分包裹起來(lái),然后再加上調(diào)用的“()”

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

注:用“()”包裹的原因是將函數(shù)變成一個(gè)表達(dá)式,這樣在頁(yè)面被加載時(shí)、js程序執(zhí)行時(shí),函數(shù)就立即調(diào)用

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

(1)不需要為函數(shù)命名,避免污染全局變量

(2)創(chuàng)建一個(gè)獨(dú)立作用域,這個(gè)作用域里面的變量,外部訪問不到,避免變量污染

3、使用場(chǎng)景

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

(2)在應(yīng)用中只執(zhí)行一次的代碼

4、返回值

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

(2)立即執(zhí)行函數(shù)返回值是一個(gè)函數(shù)

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

(1)單目運(yùn)算符(一元運(yùn)算符):參加運(yùn)算的對(duì)象只有一個(gè):+、-、~、!

單目運(yùn)算符作用:進(jìn)行語(yǔ)法檢查

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

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

二、函數(shù)劫持

定義

即在一個(gè)函數(shù)運(yùn)行之前把它劫持下來(lái),添加我們想要的功能。當(dāng)這個(gè)函數(shù)實(shí)際運(yùn)行的時(shí)候,它已經(jīng)不是原本的函數(shù)了,而是帶上了被我們添加上去的功能。這也是我們常見的[鉤子函數(shù)]的原理之一

1、this關(guān)鍵字的引用劫持:改變this的指向,通過(guò)一些特殊的方法來(lái)自己指定函數(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);//通過(guò)調(diào)用call函數(shù)將fun函數(shù)中的this進(jìn)行劫持,this執(zhí)行了obj2

(2)apply() 傳遞時(shí)需注意使用[]

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()方法 強(qiáng)制性綁定

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • javascript 閉包疑問

    javascript 閉包疑問

    今天在編碼時(shí),遇到一個(gè)問題,特記錄下。希望對(duì)朋友有所幫助。
    2010-12-12
  • JSON 數(shù)字排序多字段排序介紹

    JSON 數(shù)字排序多字段排序介紹

    JSON 數(shù)字排序在使用中比較常見,在本文將為大家詳細(xì)介紹下具體是如何排序的,感興趣的朋友可以參考下
    2013-09-09
  • js判斷60秒以及倒計(jì)時(shí)示例代碼

    js判斷60秒以及倒計(jì)時(shí)示例代碼

    本篇文章主要是對(duì)js判斷60秒以及倒計(jì)時(shí)的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • 淺析javaScript中的淺拷貝和深拷貝

    淺析javaScript中的淺拷貝和深拷貝

    本篇文章主要介紹了淺析javaScript中的淺拷貝和深拷貝,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • javascript常用對(duì)話框小集

    javascript常用對(duì)話框小集

    對(duì)話框,大家對(duì)這個(gè)詞匯可謂是各有所解,本文有個(gè)不錯(cuò)的例子,里面包含了各種常見對(duì)話框的實(shí)現(xiàn),感興趣的朋友可以了解下
    2013-09-09
  • JS表單傳值和URL編碼轉(zhuǎn)換

    JS表單傳值和URL編碼轉(zhuǎn)換

    本篇文章給大家詳細(xì)分享了JS表單傳值和URL編碼轉(zhuǎn)換的相關(guān)知識(shí)點(diǎn),并把實(shí)例做了分享,一起學(xué)習(xí)下。
    2018-03-03
  • 百度移動(dòng)版的url編碼解碼示例

    百度移動(dòng)版的url編碼解碼示例

    這篇文章主要介紹了百度移動(dòng)版的url編碼解碼的具體實(shí)現(xiàn),需要的朋友可以參考下
    2014-04-04
  • javascript中如何處理引號(hào)編碼"

    javascript中如何處理引號(hào)編碼"

    本文為大家介紹下javascript中如何處理引號(hào)編碼,具體如下,感興趣的朋友可以參考下
    2013-08-08
  • JS通過(guò)識(shí)別id、value值對(duì)checkbox設(shè)置選中狀態(tài)

    JS通過(guò)識(shí)別id、value值對(duì)checkbox設(shè)置選中狀態(tài)

    最開始需要獲取的是input value值設(shè)置checkbox選中狀態(tài),由于input value要使用計(jì)算業(yè)務(wù),后來(lái)改造為id,這里就為大家分享一下實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2020-02-02
  • js數(shù)組刪除問題(splice和delete的用法)

    js數(shù)組刪除問題(splice和delete的用法)

    這篇文章主要介紹了js數(shù)組刪除問題(splice和delete的用法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-02-02

最新評(píng)論