1. 程式人生 > >深入理解javascript中的立即執行函式(function(){…})()

深入理解javascript中的立即執行函式(function(){…})()

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。

( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法,最初我以為是一個括號包裹匿名函式,再在後面加個括號呼叫函式,最後達到函式定義後立即執行的目的,後來發現加括號的原因並非如此。要理解立即執行函式,需要先理解一些函式的基本概念。

函式宣告、函式表示式、匿名函式

函式宣告:function fnName () {…};使用function關鍵字宣告一個函式,再指定一個函式名,叫函式宣告。

函式表示式 var fnName = function () {…};使用function關鍵字宣告一個函式,但未給函式命名,最後將匿名函式賦予一個變數,叫函式表示式,這是最常見的函式表示式語法形式。

匿名函式:function () {}; 使用function關鍵字宣告一個函式,但未給函式命名,所以叫匿名函式,匿名函式屬於函式表示式,匿名函式有很多作用,賦予一個變數則建立函式,賦予一個事件則成為事件處理程式或建立閉包等等。

函式宣告和函式表示式不同之處在於,一、Javascript引擎在解析javascript程式碼時會‘函式宣告提升'(Function declaration Hoisting)當前執行環境(作用域)上的函式宣告,而函式表示式必須等到Javascirtp引擎執行到它所在行時,才會從上而下一行一行地解析函式表示式,二、函式表示式後面可以加括號立即呼叫該函式,函式宣告不可以,只能以fnName()形式呼叫 。以下是兩者差別的兩個例子。

?
1 2 3 4 5 6 7 8 9 10 11 fnName(); function fnName(){ ... } //正常,因為‘提升'了函式宣告,函式呼叫可在函式宣告之前 fnName(); var fnName=function(){ ... } //報錯,變數fnName還未儲存對函式的引用,函式呼叫必須在函式表示式之後
?
1 2 3 4 5 6 7 8 9 10 11 12 13 var fnName=function(){ alert('Hello World'
); }(); //函式表示式後面加括號,當javascript引擎解析到此處時能立即呼叫函式 function fnName(){ alert('Hello World'); }(); //不會報錯,但是javascript引擎只解析函式宣告,忽略後面的括號,函式宣告不會被呼叫 function(){ console.log('Hello World');  }(); //語法錯誤,雖然匿名函式屬於函式表示式,但是未進行賦值操作, //所以javascript引擎將開頭的function關鍵字當做函式宣告,報錯:要求需要一個函式名

在理解了一些函式基本概念後,回頭看看( function(){…} )()和( function (){…} () )這兩種立即執行函式的寫法,最初我以為是一個括號包裹匿名函式,並後面加個括號立即呼叫函式,當時不知道為什麼要加括號,後來明白,要在函式體後面加括號就能立即呼叫,則這個函式必須是函式表示式,不能是函式宣告。

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 (function(a){ console.log(a);  //firebug輸出123,使用()運算子 })(123); (function(a){ console.log(a);  //firebug輸出1234,使用()運算子 }(1234)); !function(a){ console.log(a);  //firebug輸出12345,使用!運算子 }(12345); +

相關推薦

JavaScript立即執行函式例項詳解 轉載 作者:李牧羊

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關於JavaScript中立即執行函式的相關資料,需要的朋友可以參考下。 前言

深入理解javascript立即執行函式(function(){…})()

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )()和( function (){…}

[轉]深入理解javascript立即執行函式(function(){…})()

( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法,最初我以為是一個括號包裹匿名函式,再在後面加個括號呼叫函式,最後達到函式定義後立即執行的目的,後來發現加括號的原因並非如此。要理解

深入理解JavaScript立即執行函式(function(){……})()

前言:這篇文章主要介紹了深入理解javascript中的立即執行函式,立即執行函式也叫立即呼叫函式,通常它的寫法是用(function(){…})()包住業務程式碼,使用jquery時比較常見,需要的朋友可以參考下 立即執行函式表示式IIFE 作用:IIFE最常用的功

【轉】深入理解javascript立即執行函數(function(){…})()

但是 不可 模仿 不同之處 調用函數 title 指定 作用 () javascript和其他編程語言相比比較隨意,所以javascript代碼中充滿各種奇葩的寫法,有時霧裏看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( fun

javascript立即執行函式(function(){…})()

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )()和( function (){…} () )是兩種javasc

深入理解立即執行函式(function(){})();

( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法,要理解立即執行函式,需要先理解一些函式的基本概念。 1,函式宣告,函式表示式,匿名函式 函式宣告:function fnName(){...};使用function關鍵字宣告一個

深入理解javascript函式的prototype屬性(原型)

函式的prototype屬性 一、 只要我們建立一個函式,該函式就會自動獲得一個prototype屬性,這個屬性指向函式的原型物件。 建立fn函式自動獲得prototype屬性,該屬性是一個物件即該函式的原型物件,我們可以看到原型物件預設會有一個cons

深入理解 JavaScript 函式

本文旨在提供web開發人員必須瞭解的所有JavaScript函式的基本知識。 函式於軟體開發者而言並不是什麼奇幻世界。如果你的日常活動涉及到編碼,哪怕是一點點,那麼在一天結束的時候,你一定建立/修改了一個或多個函式。 簡而言之函式只不過是一組執行某個操作的語句。函式可

通過例子深入理解javascript的new操作符

not 而是 efi undefine new blog div 函數功能 成功 1.首先看一道題目 1 function Cat(name,age){ 2 this.name=name; 3 this.age=age; 4 } 5 console.l

深入理解JavaScript的函數操作

要求 使用情況 並不是 回文 工作 alert http load 函數 匿名函數 對於什麽是匿名函數,這裏就不做過多介紹了。我們需要知道的是,對於JavaScript而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是:創建一個供以後使用的函數。 簡單

圖說js的this——深入理解javascriptthis指針

前端 javascript this沒搞錯吧!js寫了那麽多年,this還是會搞錯!沒搞錯,javascript就是回搞錯!…………在寫java的時候,this用錯了,idea都會直接報錯!比如……但是,js,……idea,愛莫能助了……在面向對象編程裏有兩個重要的概念:一個是類,一個是實例化的對象,類是一個

JavaScript進階】深入理解JavaScriptES6的Promise的作用並實現一個自己的Promise

  1.Promise的基本使用 1 // 需求分析: 封裝一個方法用於讀取檔案路徑,返回檔案內容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一個回

深入理解Java停止執行

一.停止執行緒會帶來什麼? 對於單執行緒中,停止單執行緒就是直接使用關鍵字return或者break,但是在停止多執行緒時是讓執行緒在完成任務前去開啟另外一條執行緒,必須放棄當前任務,而這個過程是不可預測,所以必須去做好防備。 二.認識停止執行緒的幾個方法  2.1三個被棄用的方法 &n

深入理解Javascript的valueOf與toString

基本上,javascript中所有資料型別都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下。 toString() toString()函式的作用是返回object的字串表示,JavaScript中ob

js立即執行函式: (function ( ){})( ) 與 (function ( ){}( )) 有什麼區別?

這篇文章主要介紹了js立即執行函式: (function ( ){})( ) 與 (function ( ){}( )) 有什麼區別,需要的朋友可以參考下 沒有區別。 你需要明白 IIFE 的原理,我簡單說一下: 複製程式碼 程式碼如下: function foo() {...} &

【進階1-1期】理解JavaScript 執行上下文和執行棧

本期的主題是呼叫堆疊,本計劃一共28期,每期重點攻克一個面試重難點,如果你還不瞭解本進階計劃,文末點選檢視全部文章。 如果覺得本系列不錯,歡迎點贊、評論、轉發,您的支援就是我堅持的最大動力。 執行上下文是當前 JavaScript 程式碼被解析和執行時所在環境的抽象概念。 執行上下文的型別 執行上

深入理解Javascript的堆與棧、淺拷貝與深拷貝

Javascript中的淺拷貝與深拷貝 先從JavaScript的資料型別存放的位置堆疊開始說吧 什麼是堆疊? 我們知道計算機領域中堆疊是兩種資料結構,它們只能再一端(稱為棧頂(top))對資料項進行插入和刪除。 堆:佇列優先,先進先出,由作業系統自動分配釋放,存放函式的引數值,區域性變數的

深入理解 JavaScript的變數、值、傳參

1. demo 如果你對下面的程式碼沒有任何疑問就能自信的回答出輸出的內容,那麼本篇文章就不值得你浪費時間了。 var var1 = 1 var var2 = true var var3 = [1,2,3] var var4 = var3 function test (var1, var3) {

深入理解Javascript的隱式呼叫

本篇文章給大家詳細介紹了javascript中的隱式呼叫相關知識點,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。 不知道用隱式呼叫來形容是否確切,其行為總是隱藏在背後,時不時出來露臉一下,作用貌似不大,但是瞭解一下還是有用