函數(shù)是一段可以反復(fù)調(diào)用的代碼塊。函數(shù)還能接受輸入的參數(shù),不同的參數(shù)有唯一對應(yīng)的返回值。
JavaScript 有三種聲明函數(shù)的方法。
(1)function 命令
function
命令聲明的代碼區(qū)塊,就是一個函數(shù)。function
命令后面是函數(shù)名,函數(shù)名后面是一對圓括號,里面是傳入函數(shù)的參數(shù)。函數(shù)體放在大括號里面。
function print(s) {
console.log(s);
}
上面的代碼命名了一個print
函數(shù),以后使用print()
這種形式,就可以調(diào)用相應(yīng)的代碼。這叫做函數(shù)的聲明(Function Declaration)。
(2)函數(shù)表達式
除了用function
命令聲明函數(shù),還可以采用變量賦值的寫法。
var print = function(s) {
console.log(s);
};
這種寫法將一個匿名函數(shù)賦值給變量。這時,這個匿名函數(shù)又稱函數(shù)表達式(Function Expression),因為賦值語句的等號右側(cè)只能放表達式。
采用函數(shù)表達式聲明函數(shù)時,function
命令后面不帶有函數(shù)名。如果加上函數(shù)名,該函數(shù)名只在函數(shù)體內(nèi)部有效,在函數(shù)體外部無效。
var print = function x(){
console.log(typeof x);
};
x
// ReferenceError: x is not defined
print()
// function
上面代碼在函數(shù)表達式中,加入了函數(shù)名x
。這個x
只在函數(shù)體內(nèi)部可用,指代函數(shù)表達式本身,其他地方都不可用。這種寫法的用處有兩個,一是可以在函數(shù)體內(nèi)部調(diào)用自身,二是方便除錯(除錯工具顯示函數(shù)調(diào)用棧時,將顯示函數(shù)名,而不再顯示這里是一個匿名函數(shù))。因此,下面的形式聲明函數(shù)也非常常見。
var f = function f() {};
需要注意的是,函數(shù)的表達式需要在語句的結(jié)尾加上分號,表示語句結(jié)束。而函數(shù)的聲明在結(jié)尾的大括號后面不用加分號。總的來說,這兩種聲明函數(shù)的方式,差別很細微,可以近似認為是等價的。
(3)Function 構(gòu)造函數(shù)
第三種聲明函數(shù)的方式是Function
構(gòu)造函數(shù)。
var add = new Function(
'x',
'y',
'return x + y'
);
// 等同于
function add(x, y) {
return x + y;
}
上面代碼中,Function
構(gòu)造函數(shù)接受三個參數(shù),除了最后一個參數(shù)是add
函數(shù)的“函數(shù)體”,其他參數(shù)都是add
函數(shù)的參數(shù)。
你可以傳遞任意數(shù)量的參數(shù)給Function
構(gòu)造函數(shù),只有最后一個參數(shù)會被當(dāng)做函數(shù)體,如果只有一個參數(shù),該參數(shù)就是函數(shù)體。
var foo = new Function(
'return "hello world";'
);
// 等同于
function foo() {
return 'hello world';
}
Function
構(gòu)造函數(shù)可以不使用new
命令,返回結(jié)果完全一樣。
總的來說,這種聲明函數(shù)的方式非常不直觀,幾乎無人使用。
如果同一個函數(shù)被多次聲明,后面的聲明就會覆蓋前面的聲明。
function f() {
console.log(1);
}
f() // 2
function f() {
console.log(2);
}
f() // 2
上面代碼中,后一次的函數(shù)聲明覆蓋了前面一次。而且,由于函數(shù)名的提升(參見下文),前一次聲明在任何時候都是無效的,這一點要特別注意。
調(diào)用函數(shù)時,要使用圓括號運算符。圓括號之中,可以加入函數(shù)的參數(shù)。
function add(x, y) {
return x + y;
}
add(1, 1) // 2
上面代碼中,函數(shù)名后面緊跟一對圓括號,就會調(diào)用這個函數(shù)。
函數(shù)體內(nèi)部的return
語句,表示返回。JavaScript 引擎遇到return
語句,就直接返回return
后面的那個表達式的值,后面即使還有語句,也不會得到執(zhí)行。也就是說,return
語句所帶的那個表達式,就是函數(shù)的返回值。return
語句不是必需的,如果沒有的話,該函數(shù)就不返回任何值,或者說返回undefined
。
函數(shù)可以調(diào)用自身,這就是遞歸(recursion)。下面就是通過遞歸,計算斐波那契數(shù)列的代碼。
function fib(num) {
if (num === 0) return 0;
if (num === 1) return 1;
return fib(num - 2) + fib(num - 1);
}
fib(6) // 8
上面代碼中,fib
函數(shù)內(nèi)部又調(diào)用了fib
,計算得到斐波那契數(shù)列的第6個元素是8。
JavaScript 語言將函數(shù)看作一種值,與其它值(數(shù)值、字符串、布爾值等等)地位相同。凡是可以使用值的地方,就能使用函數(shù)。比如,可以把函數(shù)賦值給變量和對象的屬性,也可以當(dāng)作參數(shù)傳入其他函數(shù),或者作為函數(shù)的結(jié)果返回。函數(shù)只是一個可以執(zhí)行的值,此外并無特殊之處。
由于函數(shù)與其他數(shù)據(jù)類型地位平等,所以在 JavaScript 語言中又稱函數(shù)為第一等公民。
function add(x, y) {
return x + y;
}
// 將函數(shù)賦值給一個變量
var operator = add;
// 將函數(shù)作為參數(shù)和返回值
function a(op){
return op;
}
a(add)(1, 1)
// 2
JavaScript 引擎將函數(shù)名視同變量名,所以采用function
命令聲明函數(shù)時,整個函數(shù)會像變量聲明一樣,被提升到代碼頭部。所以,下面的代碼不會報錯。
f();
function f() {}
表面上,上面代碼好像在聲明之前就調(diào)用了函數(shù)f
。但是實際上,由于“變量提升”,函數(shù)f
被提升到了代碼頭部,也就是在調(diào)用之前已經(jīng)聲明了。但是,如果采用賦值語句定義函數(shù),JavaScript 就會報錯。
f();
var f = function (){};
// TypeError: undefined is not a function
上面的代碼等同于下面的形式。
var f;
f();
f = function () {};
上面代碼第二行,調(diào)用f
的時候,f
只是被聲明了,還沒有被賦值,等于undefined
,所以會報錯。
注意,如果像下面例子那樣,采用function
命令和var
賦值語句聲明同一個函數(shù),由于存在函數(shù)提升,最后會采用var
賦值語句的定義。
var f = function () {
console.log('1');
}
function f() {
console.log('2');
}
f() // 1
上面例子中,表面上后面聲明的函數(shù)f
,應(yīng)該覆蓋前面的var
賦值語句,但是由于存在函數(shù)提升,實際上正好反過來。
函數(shù)的name
屬性返回函數(shù)的名字。
function f1() {}
f1.name // "f1"
如果是通過變量賦值定義的函數(shù),那么name
屬性返回變量名。
var f2 = function () {};
f2.name // "f2"
但是,上面這種情況,只有在變量的值是一個匿名函數(shù)時才是如此。如果變量的值是一個具名函數(shù),那么name
屬性返回function
關(guān)鍵字之后的那個函數(shù)名。
var f3 = function myName() {};
f3.name // 'myName'
上面代碼中,f3.name
返回函數(shù)表達式的名字。注意,真正的函數(shù)名還是f3
,而myName
這個名字只在函數(shù)體內(nèi)部可用。
name
屬性的一個用處,就是獲取參數(shù)函數(shù)的名字。
var myFunc = function () {};
function test(f) {
console.log(f.name);
}
test(myFunc) // myFunc
上面代碼中,函數(shù)test
內(nèi)部通過name
屬性,就可以知道傳入的參數(shù)是什么函數(shù)。
函數(shù)的length
屬性返回函數(shù)預(yù)期傳入的參數(shù)個數(shù),即函數(shù)定義之中的參數(shù)個數(shù)。
function f(a, b) {}
f.length // 2
上面代碼定義了空函數(shù)f
,它的length
屬性就是定義時的參數(shù)個數(shù)。不管調(diào)用時輸入了多少個參數(shù),length
屬性始終等于2。
length
屬性提供了一種機制,判斷定義時和調(diào)用時參數(shù)的差異,以便實現(xiàn)面向?qū)ο缶幊痰摹胺椒ㄖ剌d”(overload)。
函數(shù)的toString()
方法返回一個字符串,內(nèi)容是函數(shù)的源碼。
function f() {
a();
b();
c();
}
f.toString()
// function f() {
// a();
// b();
// c();
// }
上面示例中,函數(shù)f
的toString()
方法返回了f
的源碼,包含換行符在內(nèi)。
對于那些原生的函數(shù),toString()
方法返回function (){[native code]}
。
Math.sqrt.toString()
// "function sqrt() { [native code] }"
上面代碼中,Math.sqrt()
是 JavaScript 引擎提供的原生函數(shù),toString()
方法就返回原生代碼的提示。
函數(shù)內(nèi)部的注釋也可以返回。
function f() {/*
這是一個
多行注釋
*/}
f.toString()
// "function f(){/*
// 這是一個
// 多行注釋
// */}"
利用這一點,可以變相實現(xiàn)多行字符串。
var multiline = function (fn) {
var arr = fn.toString().split('\n');
return arr.slice(1, arr.length - 1).join('\n');
};
function f() {/*
這是一個
多行注釋
*/}
multiline(f);
// " 這是一個
// 多行注釋"
上面示例中,函數(shù)f
內(nèi)部有一個多行注釋,toString()
方法拿到f
的源碼后,去掉首尾兩行,就得到了一個多行字符串。
作用域(scope)指的是變量存在的范圍。在 ES5 的規(guī)范中,JavaScript 只有兩種作用域:一種是全局作用域,變量在整個程序中一直存在,所有地方都可以讀?。涣硪环N是函數(shù)作用域,變量只在函數(shù)內(nèi)部存在。ES6 又新增了塊級作用域,本教程不涉及。
對于頂層函數(shù)來說,函數(shù)外部聲明的變量就是全局變量(global variable),它可以在函數(shù)內(nèi)部讀取。
var v = 1;
function f() {
console.log(v);
}
f()
// 1
上面的代碼表明,函數(shù)f
內(nèi)部可以讀取全局變量v
。
在函數(shù)內(nèi)部定義的變量,外部無法讀取,稱為“局部變量”(local variable)。
function f(){
var v = 1;
}
v // ReferenceError: v is not defined
上面代碼中,變量v
在函數(shù)內(nèi)部定義,所以是一個局部變量,函數(shù)之外就無法讀取。
函數(shù)內(nèi)部定義的變量,會在該作用域內(nèi)覆蓋同名全局變量。
var v = 1;
function f(){
var v = 2;
console.log(v);
}
f() // 2
v // 1
上面代碼中,變量v
同時在函數(shù)的外部和內(nèi)部有定義。結(jié)果,在函數(shù)內(nèi)部定義,局部變量v
覆蓋了全局變量v
。
注意,對于var
命令來說,局部變量只能在函數(shù)內(nèi)部聲明,在其他區(qū)塊中聲明,一律都是全局變量。
if (true) {
var x = 5;
}
console.log(x); // 5
上面代碼中,變量x
在條件判斷區(qū)塊之中聲明,結(jié)果就是一個全局變量,可以在區(qū)塊之外讀取。
與全局作用域一樣,函數(shù)作用域內(nèi)部也會產(chǎn)生“變量提升”現(xiàn)象。var
命令聲明的變量,不管在什么位置,變量聲明都會被提升到函數(shù)體的頭部。
function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
}
// 等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}
函數(shù)本身也是一個值,也有自己的作用域。它的作用域與變量一樣,就是其聲明時所在的作用域,與其運行時所在的作用域無關(guān)。
var a = 1;
var x = function () {
console.log(a);
};
function f() {
var a = 2;
x();
}
f() // 1
上面代碼中,函數(shù)x
是在函數(shù)f
的外部聲明的,所以它的作用域綁定外層,內(nèi)部變量a
不會到函數(shù)f
體內(nèi)取值,所以輸出1
,而不是2
。
總之,函數(shù)執(zhí)行時所在的作用域,是定義時的作用域,而不是調(diào)用時所在的作用域。
很容易犯錯的一點是,如果函數(shù)A
調(diào)用函數(shù)B
,卻沒考慮到函數(shù)B
不會引用函數(shù)A
的內(nèi)部變量。
var x = function () {
console.log(a);
};
function y(f) {
var a = 2;
f();
}
y(x)
// ReferenceError: a is not defined
上面代碼將函數(shù)x
作為參數(shù),傳入函數(shù)y
。但是,函數(shù)x
是在函數(shù)y
體外聲明的,作用域綁定外層,因此找不到函數(shù)y
的內(nèi)部變量a
,導(dǎo)致報錯。
同樣的,函數(shù)體內(nèi)部聲明的函數(shù),作用域綁定函數(shù)體內(nèi)部。
function foo() {
var x = 1;
function bar() {
console.log(x);
}
return bar;
}
var x = 2;
var f = foo();
f() // 1
上面代碼中,函數(shù)foo
內(nèi)部聲明了一個函數(shù)bar
,bar
的作用域綁定foo
。當(dāng)我們在foo
外部取出bar
執(zhí)行時,變量x
指向的是foo
內(nèi)部的x
,而不是foo
外部的x
。正是這種機制,構(gòu)成了下文要講解的“閉包”現(xiàn)象。
函數(shù)運行的時候,有時需要提供外部數(shù)據(jù),不同的外部數(shù)據(jù)會得到不同的結(jié)果,這種外部數(shù)據(jù)就叫參數(shù)。
function square(x) {
return x * x;
}
square(2) // 4
square(3) // 9
上式的x
就是square
函數(shù)的參數(shù)。每次運行的時候,需要提供這個值,否則得不到結(jié)果。
函數(shù)參數(shù)不是必需的,JavaScript 允許省略參數(shù)。
function f(a, b) {
return a;
}
f(1, 2, 3) // 1
f(1) // 1
f() // undefined
f.length // 2
上面代碼的函數(shù)f
定義了兩個參數(shù),但是運行時無論提供多少個參數(shù)(或者不提供參數(shù)),JavaScript 都不會報錯。省略的參數(shù)的值就變?yōu)?code>undefined。需要注意的是,函數(shù)的length
屬性與實際傳入的參數(shù)個數(shù)無關(guān),只反映函數(shù)預(yù)期傳入的參數(shù)個數(shù)。
但是,沒有辦法只省略靠前的參數(shù),而保留靠后的參數(shù)。如果一定要省略靠前的參數(shù),只有顯式傳入undefined
。
function f(a, b) {
return a;
}
f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined
上面代碼中,如果省略第一個參數(shù),就會報錯。
函數(shù)參數(shù)如果是原始類型的值(數(shù)值、字符串、布爾值),傳遞方式是傳值傳遞(passes by value)。這意味著,在函數(shù)體內(nèi)修改參數(shù)值,不會影響到函數(shù)外部。
var p = 2;
function f(p) {
p = 3;
}
f(p);
p // 2
上面代碼中,變量p
是一個原始類型的值,傳入函數(shù)f
的方式是傳值傳遞。因此,在函數(shù)內(nèi)部,p
的值是原始值的拷貝,無論怎么修改,都不會影響到原始值。
但是,如果函數(shù)參數(shù)是復(fù)合類型的值(數(shù)組、對象、其他函數(shù)),傳遞方式是傳址傳遞(pass by reference)。也就是說,傳入函數(shù)的原始值的地址,因此在函數(shù)內(nèi)部修改參數(shù),將會影響到原始值。
var obj = { p: 1 };
function f(o) {
o.p = 2;
}
f(obj);
obj.p // 2
上面代碼中,傳入函數(shù)f
的是參數(shù)對象obj
的地址。因此,在函數(shù)內(nèi)部修改obj
的屬性p
,會影響到原始值。
注意,如果函數(shù)內(nèi)部修改的,不是參數(shù)對象的某個屬性,而是替換掉整個參數(shù),這時不會影響到原始值。
var obj = [1, 2, 3];
function f(o) {
o = [2, 3, 4];
}
f(obj);
obj // [1, 2, 3]
上面代碼中,在函數(shù)f()
內(nèi)部,參數(shù)對象obj
被整個替換成另一個值。這時不會影響到原始值。這是因為,形式參數(shù)(o
)的值實際是參數(shù)obj
的地址,重新對o
賦值導(dǎo)致o
指向另一個地址,保存在原地址上的值當(dāng)然不受影響。
如果有同名的參數(shù),則取最后出現(xiàn)的那個值。
function f(a, a) {
console.log(a);
}
f(1, 2) // 2
上面代碼中,函數(shù)f()
有兩個參數(shù),且參數(shù)名都是a
。取值的時候,以后面的a
為準,即使后面的a
沒有值或被省略,也是以其為準。
function f(a, a) {
console.log(a);
}
f(1) // undefined
調(diào)用函數(shù)f()
的時候,沒有提供第二個參數(shù),a
的取值就變成了undefined
。這時,如果要獲得第一個a
的值,可以使用arguments
對象。
function f(a, a) {
console.log(arguments[0]);
}
f(1) // 1
(1)定義
由于 JavaScript 允許函數(shù)有不定數(shù)目的參數(shù),所以需要一種機制,可以在函數(shù)體內(nèi)部讀取所有參數(shù)。這就是arguments
對象的由來。
arguments
對象包含了函數(shù)運行時的所有參數(shù),arguments[0]
就是第一個參數(shù),arguments[1]
就是第二個參數(shù),以此類推。這個對象只有在函數(shù)體內(nèi)部,才可以使用。
var f = function (one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1, 2, 3)
// 1
// 2
// 3
正常模式下,arguments
對象可以在運行時修改。
var f = function(a, b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 5
上面代碼中,函數(shù)f()
調(diào)用時傳入的參數(shù),在函數(shù)內(nèi)部被修改成3
和2
。
嚴格模式下,arguments
對象與函數(shù)參數(shù)不具有聯(lián)動關(guān)系。也就是說,修改arguments
對象不會影響到實際的函數(shù)參數(shù)。
var f = function(a, b) {
'use strict'; // 開啟嚴格模式
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 2
上面代碼中,函數(shù)體內(nèi)是嚴格模式,這時修改arguments
對象,不會影響到真實參數(shù)a
和b
。
通過arguments
對象的length
屬性,可以判斷函數(shù)調(diào)用時到底帶幾個參數(shù)。
function f() {
return arguments.length;
}
f(1, 2, 3) // 3
f(1) // 1
f() // 0
(2)與數(shù)組的關(guān)系
需要注意的是,雖然arguments
很像數(shù)組,但它是一個對象。數(shù)組專有的方法(比如slice
和forEach
),不能在arguments
對象上直接使用。
如果要讓arguments
對象使用數(shù)組方法,真正的解決方法是將arguments
轉(zhuǎn)為真正的數(shù)組。下面是兩種常用的轉(zhuǎn)換方法:slice
方法和逐一填入新數(shù)組。
var args = Array.prototype.slice.call(arguments);
// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
(3)callee 屬性
arguments
對象帶有一個callee
屬性,返回它所對應(yīng)的原函數(shù)。
var f = function () {
console.log(arguments.callee === f);
}
f() // true
可以通過arguments.callee
,達到調(diào)用函數(shù)自身的目的。這個屬性在嚴格模式里面是禁用的,因此不建議使用。
閉包(closure)是 JavaScript 語言的一個難點,也是它的特色,很多高級應(yīng)用都要依靠閉包實現(xiàn)。
理解閉包,首先必須理解變量作用域。前面提到,JavaScript 有兩種作用域:全局作用域和函數(shù)作用域。函數(shù)內(nèi)部可以直接讀取全局變量。
var n = 999;
function f1() {
console.log(n);
}
f1() // 999
上面代碼中,函數(shù)f1
可以讀取全局變量n
。
但是,正常情況下,函數(shù)外部無法讀取函數(shù)內(nèi)部聲明的變量。
function f1() {
var n = 999;
}
console.log(n)
// Uncaught ReferenceError: n is not defined
上面代碼中,函數(shù)f1
內(nèi)部聲明的變量n
,函數(shù)外是無法讀取的。
如果出于種種原因,需要得到函數(shù)內(nèi)的局部變量。正常情況下,這是辦不到的,只有通過變通方法才能實現(xiàn)。那就是在函數(shù)的內(nèi)部,再定義一個函數(shù)。
function f1() {
var n = 999;
function f2() {
console.log(n); // 999
}
}
上面代碼中,函數(shù)f2
就在函數(shù)f1
內(nèi)部,這時f1
內(nèi)部的所有局部變量,對f2
都是可見的。但是反過來就不行,f2
內(nèi)部的局部變量,對f1
就是不可見的。這就是 JavaScript 語言特有的"鏈式作用域"結(jié)構(gòu)(chain scope),子對象會一級一級地向上尋找所有父對象的變量。所以,父對象的所有變量,對子對象都是可見的,反之則不成立。
既然f2
可以讀取f1
的局部變量,那么只要把f2
作為返回值,我們不就可以在f1
外部讀取它的內(nèi)部變量了嗎!
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result(); // 999
上面代碼中,函數(shù)f1
的返回值就是函數(shù)f2
,由于f2
可以讀取f1
的內(nèi)部變量,所以就可以在外部獲得f1
的內(nèi)部變量了。
閉包就是函數(shù)f2
,即能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在 JavaScript 語言中,只有函數(shù)內(nèi)部的子函數(shù)才能讀取內(nèi)部變量,因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。閉包最大的特點,就是它可以“記住”誕生的環(huán)境,比如f2
記住了它誕生的環(huán)境f1
,所以從f2
可以得到f1
的內(nèi)部變量。在本質(zhì)上,閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。
閉包的最大用處有兩個,一個是可以讀取外層函數(shù)內(nèi)部的變量,另一個就是讓這些變量始終保持在內(nèi)存中,即閉包可以使得它誕生環(huán)境一直存在。請看下面的例子,閉包使得內(nèi)部變量記住上一次調(diào)用時的運算結(jié)果。
function createIncrementor(start) {
return function () {
return start++;
};
}
var inc = createIncrementor(5);
inc() // 5
inc() // 6
inc() // 7
上面代碼中,start
是函數(shù)createIncrementor
的內(nèi)部變量。通過閉包,start
的狀態(tài)被保留了,每一次調(diào)用都是在上一次調(diào)用的基礎(chǔ)上進行計算。從中可以看到,閉包inc
使得函數(shù)createIncrementor
的內(nèi)部環(huán)境,一直存在。所以,閉包可以看作是函數(shù)內(nèi)部作用域的一個接口。
為什么閉包能夠返回外層函數(shù)的內(nèi)部變量?原因是閉包(上例的inc
)用到了外層變量(start
),導(dǎo)致外層函數(shù)(createIncrementor
)不能從內(nèi)存釋放。只要閉包沒有被垃圾回收機制清除,外層函數(shù)提供的運行環(huán)境也不會被清除,它的內(nèi)部變量就始終保存著當(dāng)前值,供閉包讀取。
閉包的另一個用處,是封裝對象的私有屬性和私有方法。
function Person(name) {
var _age;
function setAge(n) {
_age = n;
}
function getAge() {
return _age;
}
return {
name: name,
getAge: getAge,
setAge: setAge
};
}
var p1 = Person('張三');
p1.setAge(25);
p1.getAge() // 25
上面代碼中,函數(shù)Person
的內(nèi)部變量_age
,通過閉包getAge
和setAge
,變成了返回對象p1
的私有變量。
注意,外層函數(shù)每次運行,都會生成一個新的閉包,而這個閉包又會保留外層函數(shù)的內(nèi)部變量,所以內(nèi)存消耗很大。因此不能濫用閉包,否則會造成網(wǎng)頁的性能問題。
根據(jù) JavaScript 的語法,圓括號()
跟在函數(shù)名之后,表示調(diào)用該函數(shù)。比如,print()
就表示調(diào)用print
函數(shù)。
有時,我們需要在定義函數(shù)之后,立即調(diào)用該函數(shù)。這時,你不能在函數(shù)的定義之后加上圓括號,這會產(chǎn)生語法錯誤。
function(){ /* code */ }();
// SyntaxError: Unexpected token (
產(chǎn)生這個錯誤的原因是,function
這個關(guān)鍵字既可以當(dāng)作語句,也可以當(dāng)作表達式。
// 語句
function f() {}
// 表達式
var f = function f() {}
當(dāng)作表達式時,函數(shù)可以定義后直接加圓括號調(diào)用。
var f = function f(){ return 1}();
f // 1
上面的代碼中,函數(shù)定義后直接加圓括號調(diào)用,沒有報錯。原因就是function
作為表達式,引擎就把函數(shù)定義當(dāng)作一個值。這種情況下,就不會報錯。
為了避免解析的歧義,JavaScript 規(guī)定,如果function
關(guān)鍵字出現(xiàn)在行首,一律解釋成語句。因此,引擎看到行首是function
關(guān)鍵字之后,認為這一段都是函數(shù)的定義,不應(yīng)該以圓括號結(jié)尾,所以就報錯了。
函數(shù)定義后立即調(diào)用的解決方法,就是不要讓function
出現(xiàn)在行首,讓引擎將其理解成一個表達式。最簡單的處理,就是將其放在一個圓括號里面。
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
上面兩種寫法都是以圓括號開頭,引擎就會認為后面跟的是一個表達式,而不是函數(shù)定義語句,所以就避免了錯誤。這就叫做“立即調(diào)用的函數(shù)表達式”(Immediately-Invoked Function Expression),簡稱 IIFE。
注意,上面兩種寫法最后的分號都是必須的。如果省略分號,遇到連著兩個 IIFE,可能就會報錯。
// 報錯
(function(){ /* code */ }())
(function(){ /* code */ }())
上面代碼的兩行之間沒有分號,JavaScript 會將它們連在一起解釋,將第二行解釋為第一行的參數(shù)。
推而廣之,任何讓解釋器以表達式來處理函數(shù)定義的方法,都能產(chǎn)生同樣的效果,比如下面三種寫法。
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();
甚至像下面這樣寫,也是可以的。
!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();
通常情況下,只對匿名函數(shù)使用這種“立即執(zhí)行的函數(shù)表達式”。它的目的有兩個:一是不必為函數(shù)命名,避免了污染全局變量;二是 IIFE 內(nèi)部形成了一個單獨的作用域,可以封裝一些外部無法讀取的私有變量。
// 寫法一
var tmp = newData;
processData(tmp);
storeData(tmp);
// 寫法二
(function () {
var tmp = newData;
processData(tmp);
storeData(tmp);
}());
上面代碼中,寫法二比寫法一更好,因為完全避免了污染全局變量。
eval
命令接受一個字符串作為參數(shù),并將這個字符串當(dāng)作語句執(zhí)行。
eval('var a = 1;');
a // 1
上面代碼將字符串當(dāng)作語句運行,生成了變量a
。
如果參數(shù)字符串無法當(dāng)作語句運行,那么就會報錯。
eval('3x') // Uncaught SyntaxError: Invalid or unexpected token
放在eval
中的字符串,應(yīng)該有獨自存在的意義,不能用來與eval
以外的命令配合使用。舉例來說,下面的代碼將會報錯。
eval('return;'); // Uncaught SyntaxError: Illegal return statement
上面代碼會報錯,因為return
不能單獨使用,必須在函數(shù)中使用。
如果eval
的參數(shù)不是字符串,那么會原樣返回。
eval(123) // 123
eval
沒有自己的作用域,都在當(dāng)前作用域內(nèi)執(zhí)行,因此可能會修改當(dāng)前作用域的變量的值,造成安全問題。
var a = 1;
eval('a = 2');
a // 2
上面代碼中,eval
命令修改了外部變量a
的值。由于這個原因,eval
有安全風(fēng)險。
為了防止這種風(fēng)險,JavaScript 規(guī)定,如果使用嚴格模式,eval
內(nèi)部聲明的變量,不會影響到外部作用域。
(function f() {
'use strict';
eval('var foo = 123');
console.log(foo); // ReferenceError: foo is not defined
})()
上面代碼中,函數(shù)f
內(nèi)部是嚴格模式,這時eval
內(nèi)部聲明的foo
變量,就不會影響到外部。
不過,即使在嚴格模式下,eval
依然可以讀寫當(dāng)前作用域的變量。
(function f() {
'use strict';
var foo = 1;
eval('foo = 2');
console.log(foo); // 2
})()
上面代碼中,嚴格模式下,eval
內(nèi)部還是改寫了外部變量,可見安全風(fēng)險依然存在。
總之,eval
的本質(zhì)是在當(dāng)前作用域之中,注入代碼。由于安全風(fēng)險和不利于 JavaScript 引擎優(yōu)化執(zhí)行速度,一般不推薦使用。通常情況下,eval
最常見的場合是解析 JSON 數(shù)據(jù)的字符串,不過正確的做法應(yīng)該是使用原生的JSON.parse
方法。
前面說過eval
不利于引擎優(yōu)化執(zhí)行速度。更麻煩的是,還有下面這種情況,引擎在靜態(tài)代碼分析的階段,根本無法分辨執(zhí)行的是eval
。
var m = eval;
m('var x = 1');
x // 1
上面代碼中,變量m
是eval
的別名。靜態(tài)代碼分析階段,引擎分辨不出m('var x = 1')
執(zhí)行的是eval
命令。
為了保證eval
的別名不影響代碼優(yōu)化,JavaScript 的標準規(guī)定,凡是使用別名執(zhí)行eval
,eval
內(nèi)部一律是全局作用域。
var a = 1;
function f() {
var a = 2;
var e = eval;
e('console.log(a)');
}
f() // 1
上面代碼中,eval
是別名調(diào)用,所以即使它是在函數(shù)中,它的作用域還是全局作用域,因此輸出的a
為全局變量。這樣的話,引擎就能確認e()
不會對當(dāng)前的函數(shù)作用域產(chǎn)生影響,優(yōu)化的時候就可以把這一行排除掉。
eval
的別名調(diào)用的形式五花八門,只要不是直接調(diào)用,都屬于別名調(diào)用,因為引擎只能分辨eval()
這一種形式是直接調(diào)用。
eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')
上面這些形式都是eval
的別名調(diào)用,作用域都是全局作用域。
更多建議: