你不知道的js (3)匿名函數

匿名函數:沒有名字的函數。

使用場景:
1,事件

var ele = document.querySelector("div");
ele.onClick = function(){ console.log(1) }

2,對象的屬性

var obj = {
	getName:function(){
		console.log(1)
	}
}

3,回調函數(函數作爲參數)

var arr = [1,3,4];
arr.map( (item)=>{
	console.log(item)
} )

4,自執行函數(IIFE)
1,(function(){ … }())
2,(function(){})()
3,!function(){console.log(‘lala’)} // 也可以換成其他的運算符如:-,+

“隱藏”變量和函數都是從最小特權原則中引申出來 的,也叫最小授權或最小暴露原則。
這個原則是指在軟件設計中,應該最小限度地暴露必要內容,而將其他內容都“隱藏”起來

規避衝突
“隱藏”作用域中的變量和函數所帶來的另一個好處,是可以避免同名標識符之間的衝突, 兩個標識符可能具有相同的名字但用途卻不一樣,無意間可能造成命名衝突。衝突會導致 變量的值被意外覆蓋。

  1. 全局命名空間
    對象 被用作庫的命名空間,所有需要暴露給外界的功能都會成爲這個對象(命名空間)的屬 性
  2. 模塊管理
    通過依賴管理器 的機制將庫的標識符顯式地導入到另外一個特定的作用域中。
    (function fn) 函數會被當做一個函數表達式,而不是一個標準的函數聲明來處理

函數聲明和函數表達式之間最重要的區別是它們的名稱標識符將會綁定在何處。
(function foo(){ … })作爲函數表達式意味着foo只能在…所代表的位置中 被訪問

匿名函數的缺點:
1,在棧追蹤中不會顯示出有意義的函數名,使得調試很困難
2,函數需要引用自身時只能使用 arguments.callee 引用如遞歸,另外一個函數需要引用自身的例子是在事件觸發後事件監聽器需要解綁自身
省略了對於代碼可讀性(可理解性)很重要的函數名,一個描述性的名稱很重要

IIFE,代表立即執行函數表達式
(function(){ … }())
(function(){})()

var a = 2;
(function IIFE( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
})( window );
console.log( a ); // 2

這個模式的另外一個應用場景是解決 undefined 標識符的默認值被錯誤覆蓋導致的異常(雖 然不常見)。
保證在代碼塊中 undefined 標識符的值真的是 undefined:


undefined = true; // 給其他代碼挖了一個大坑!絕對不要這樣做!
(function IIFE( undefined ) {
var a;
if (a === undefined) {
console.log( “Undefined is safe here!” );
}
})();
IIFE 還有一種變化的用途是倒置代碼的運行順序,將需要運行的函數放在第二位,在 IIFE 執行之後當作參數傳遞進去。
var a =2;
(function IIFE( def ) { def( window );
})(function def( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
});

window 傳入當作 global 參數的值。

發佈了16 篇原創文章 · 獲贊 0 · 訪問量 8136
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章