JavaScript函數(shù)IIFE使用詳解
一、認(rèn)識(shí)函數(shù)
javaScritp中的的函數(shù)
// 函數(shù)聲明語(yǔ)法定義
function fun1(name, age) {
console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18
// 函數(shù)表達(dá)式定義
var fun2 = function(name, age) {
console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18
javaScript函數(shù)帶默認(rèn)參數(shù)
/* 默認(rèn)參數(shù) */
function fun1(name, age = 17) {
console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18
fun1('Amy', ''); // Amy,
fun1('Amy'); // Amy,17
fun1("Amy", null); // Amy,null
函數(shù)參數(shù)默認(rèn)值存在暫時(shí)性死區(qū),在函數(shù)參數(shù)默認(rèn)值表達(dá)式中,還未初始化賦值的參數(shù)值無(wú)法作為其他參數(shù)的默認(rèn)值。
function fun2(x, y = x) {
console.log(x, y);
}
fun2(1); // 1 1
function fun3(x = y) {
console.log(x);
}
fun3(); // ReferenceError: y is not defined
javaScript函數(shù) 不定參數(shù)
// 不定參數(shù)用來(lái)表示不確定參數(shù)個(gè)數(shù)
function fun4(...values) {
console.log(values.length);
}
fun4(1, 2); //2
fun4(1, 2, 3, 4); //4
Function的構(gòu)造定義
通過(guò)Function構(gòu)造函數(shù)創(chuàng)建函數(shù),可向構(gòu)造函數(shù)中傳入任意數(shù)量的參數(shù),但值得注意的是傳入的最后一個(gè)參數(shù)會(huì)作為函數(shù)體,而其他參數(shù)則作為參數(shù)傳入函數(shù)中。用該方法去定義函數(shù)是不推薦使用的,因?yàn)樵撜Z(yǔ)法會(huì)導(dǎo)致解析兩次代碼,第一次解析常規(guī)ECMAScript代碼,第二次解析傳入構(gòu)造函數(shù)的字符串,影響性能。
var functionName = new Function("value",...,"函數(shù)體");
var f2=new Function("n1","n2","return n1+n2;");
console.log(f2(1,2)); // 3
注:函數(shù)是引入值類型,所以函數(shù)名僅僅是指向函數(shù)的指針,當(dāng)使用函數(shù)名去賦值給另一個(gè)變量名時(shí),僅僅復(fù)制的是一個(gè)指針。即在下列a設(shè)置為null時(shí),僅將a存的指針消除而已,不會(huì)影響b調(diào)用函數(shù)。
var a = b = function(value1){
return value1;
}
a = null;
b(1);
function中的默認(rèn)對(duì)象叫arguments,類似數(shù)組,但不是數(shù)組,該對(duì)象是傳遞給函數(shù)的參數(shù)。我們可以通過(guò)這個(gè)arguments知道該函數(shù)有多少個(gè)參數(shù)
function counter(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
console.log(counter(199,991,1,2,3,4,5)); // 1205
console.log(counter()); // 0
注:這里的arguments是一個(gè)隱式對(duì)象,不聲明也在函數(shù)中,內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的任意內(nèi)容,但是不能直接訪問(wèn)外部函數(shù)的arguments與this對(duì)象。
function f1() {
console.log(arguments.length);
f2=function() {
console.log(arguments.length);
}
return f2;
}
var f=f1(1,2,3); // 3
f(); // 0
function.call -調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象
/*構(gòu)造函數(shù)*/
function Student(name,age){
this.name=name;
this.age=age;
}
show=function(add){
console.log(add+":"+this.name+","+this.age);
}
//通過(guò)new關(guān)鍵字調(diào)用構(gòu)造函數(shù),創(chuàng)建一個(gè)對(duì)象tom
var rose=new Student("rose",18);
var jack=new Student("jack",20);
//調(diào)用show方法,指定上下文,指定調(diào)用對(duì)象,this指向rose,“大家好是參數(shù)”
show.call(rose,"大家好"); // 大家好:rose,18
show.call(jack,"Hello"); // Hello:jack,20
call方法中的參數(shù)都可以省去,第1個(gè)參數(shù)表示在哪個(gè)對(duì)象上調(diào)用該方法,或this指向誰(shuí),如果不指定則會(huì)指向window對(duì)象。
var name="無(wú)名"; var age=18; // 全局變量 show.call(); // undefined:無(wú)名,18
立即執(zhí)行表達(dá)式函數(shù)(IIFE)
塊級(jí)作用域與函數(shù)作用域
function calc(){
for(var i=0;i<5;i++){
console.log(i); // //0,1,2,3,4
}
console.log(i); // 5
}
calc();
函數(shù)沒有塊級(jí)作用域所以后面輸出的i是5,沒有報(bào)錯(cuò)
解決方法,模擬一個(gè)塊級(jí)作用域
function calc() {
//IIFE
(function() {
for(var i = 0; i < 5; i++) {
console.log(i); //0,1,2,3,4
}
})();
console.log(i); //報(bào)錯(cuò)
}
calc();
函數(shù)表達(dá)式或匿名對(duì)象立即執(zhí)行
//調(diào)用匿名函數(shù)
(function() {
console.log("這是一個(gè)函數(shù)表達(dá)式");
})();
//調(diào)用匿名對(duì)象
({
name: "foo",
show: function() {
console.log(this.name);
}
}).show();
console.log({a: 1}.a);
console.log({a: function() {}}.a());
多種函數(shù)立即表達(dá)式的寫法
//最常用的兩種寫法
(function(){ /* code */ }()); // 推薦寫法
(function(){ /* code */ })(); // 當(dāng)然這種也可以
// 括號(hào)和JS的一些操作符(如 = && || ,等)可以在函數(shù)表達(dá)式和函數(shù)聲明上消除歧義
// 如下代碼中,解析器已經(jīng)知道一個(gè)是表達(dá)式了,于是也會(huì)把另一個(gè)默認(rèn)為表達(dá)式
// 但是兩者交換則會(huì)報(bào)錯(cuò)
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
// 如果你不怕代碼晦澀難讀,也可以選擇一元運(yùn)算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
// 你也可以這樣
new function(){ /* code */ }
new function(){ /* code */ }() // 帶參
立即表達(dá)函數(shù)帶參數(shù)
(function (n){
console.log(n); // 100
})(100);
最好在立即表達(dá)函數(shù)前面添加分號(hào)
var k=100
(function (n){
console.log(n);
})(k);
// 出錯(cuò),解釋器會(huì)認(rèn)為100是函數(shù)
var k=100
;(function (n){
console.log(n);
})(k);
IIFE的形變
(function(n){
console.log(n);
//認(rèn)為這里有30000代碼
}(100));
如果中間有很長(zhǎng)的代碼,參數(shù)100只有到文檔的末尾才可以看得到,變形后的結(jié)果:
(function(exp){
exp(100);
}(function(n){
console.log(n);
//認(rèn)為這里有30000代碼
}));
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)
今天小編就為大家分享一篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript 實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)彈窗DEMO附圖
做一個(gè)簡(jiǎn)單的設(shè)置網(wǎng)頁(yè),因?yàn)樾枰貑⒃O(shè)備功能,于是就想在上面加一個(gè)倒計(jì)時(shí)彈窗的界面,下面是具體的實(shí)現(xiàn),大家可以參考下2014-03-03
js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
070823更新的一個(gè)[消息提示框]組件 兼容ie7
070823更新的一個(gè)[消息提示框]組件 兼容ie7...2007-08-08
JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件
這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中,經(jīng)常要做拼接字符串的工作,如把json數(shù)據(jù)用HTML展示出來(lái),以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪,加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問(wèn)題2011-10-10
詳解JavaScript中的構(gòu)造器Constructor模式
構(gòu)造器Constructor不能被繼承,因此不能重寫Overriding,但可以被重載Overloading。通過(guò)本文給大家分享JavaScript中的構(gòu)造器Constructor模式,對(duì)構(gòu)造器constructor相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01

