JavaScript中的Function對象是函數(shù),函數(shù)的用途分為3類:

  1. 作為普通邏輯代碼容器;
  2. 作為對象方法;
  3. 作為構(gòu)造函數(shù)。

1.作為普通邏輯代碼容器

function multiply(x, y){
return x*y;
}

函數(shù)multiply封裝了兩位數(shù)的乘法運算公式:

var product = multiply(128,128); // product = 16384

創(chuàng)建函數(shù)實例的方式有3種。第一種是聲明式,即像聲明變量一樣,將通過function(){}標識符創(chuàng)建的匿名函數(shù)直接賦值給變量,以該變量作為調(diào)用時的函數(shù)名稱:

var multiply = function(x, y){
return x*y;
}

第二種是定義式,即以function關(guān)鍵字后跟函數(shù)名稱及(){}來直接定義命名函數(shù),前面第一個multiply函數(shù)就是通過定義式創(chuàng)建的。

第三種是構(gòu)造函數(shù)式,即通過new運算符調(diào)用構(gòu)造函數(shù)Function來創(chuàng)建函數(shù)。這種方式極不常用,因此就不作介紹了。

在創(chuàng)建函數(shù)的3種方式中,聲明式和定義式還存在細微的差別。比如下列代碼中的函數(shù)采用聲明式:

var example = function(){
return 1;
}
example();
var example = function(){
return 2;
}
example();

執(zhí)行結(jié)果如下:

1
2

而如果采用定義式,即:

function example(){
return 1;
}
example();
function example(){
return 2;
}
example();

那么會得到另一種結(jié)果:

2
2

即,在采用定義式創(chuàng)建同名函數(shù)時,后創(chuàng)建的函數(shù)會覆蓋先創(chuàng)建的函數(shù)。這種差別是由于JavaScript解釋引擎的工作機制所導致的。JavaScript解釋引擎在執(zhí)行任何函數(shù)調(diào)用之前,首先會在全局作用域中注冊以定義式創(chuàng)建的函數(shù),然后再依次執(zhí)行函數(shù)調(diào)用。由于注冊函數(shù)時,后定義的函數(shù)重寫了先定義的函數(shù),因此無論調(diào)用語句位于何處,執(zhí)行的都是后定義的函數(shù)。相反,對于聲明式創(chuàng)建的函數(shù),JavaScript解釋引擎會像對待任何聲明的變量一樣,等到執(zhí)行調(diào)用該變量的代碼時才會對變量求值。由于JavaScript代碼是從上到下順序執(zhí)行的,因此當執(zhí)行第一個example()調(diào)用時,example函數(shù)的代碼就是首先定義代碼;而當執(zhí)行第二個example()調(diào)用時,example函數(shù)的代碼又變成了后來定義的代碼。

2.作為對象方法

JavaScript在解析代碼時,會為聲明或定義的函數(shù)指定調(diào)用對象。所謂調(diào)用對象,就是函數(shù)的執(zhí)行環(huán)境。如果函數(shù)體內(nèi)有以關(guān)鍵字this聲明的變量,則this引用的就是調(diào)用對象。

事實上,在普通的函數(shù)中,也存在調(diào)用對象,只不過這個調(diào)用對象是默認的全局window對象而已。例如:

var product = window.multiply(128,128); // product = 16384

這說明,默認情況下,在全局作用域中定義或聲明的函數(shù)的調(diào)用對象就是window。

在面向?qū)ο缶幊讨校ǔ⒆鳛閷ο蟪蓡T的函數(shù)稱為方法。例如:

var dog = {};
dog.name = “heibao”;
dog.age = “3 months”;
dog.shout = function(){
return “Hello, My name is “+ this.name + ” and I am ” + this.age + ” old!”;
}
dog.shout(); // “Hello, My name is heibao and I am 3 months old!”

有意思的是,對象也可以借用其他對象的方法:

var cat = {};
cat.name = “xiaohua”;
cat.age = “2 years”;
cat.greet = dog.shout;
cat.greet(); // “Hello, My name is xiaohua and I am 2 years old!”

另外,使用函數(shù)對象的call和apply方法,還可以動態(tài)指定函數(shù)或方法的調(diào)用對象:

dog.shout.call(cat); // “Hello, My name is xiaohua and I am 2 years old!”

或者

dog.shout.apply(cat); // “Hello, My name is xiaohua and I am 2 years old!”

3.作為構(gòu)造函數(shù)

JavaScript是通過構(gòu)造函數(shù)來模擬面向?qū)ο笳Z言中的類的。例如:

function Animal(sort, character){
this.sort = sort;
this.character = character;
}

以Animal作為構(gòu)造函數(shù),就可以像下面這樣創(chuàng)建一個新對象:

var dog = new Animal(”mammal”,”four legs”);

創(chuàng)建dog的對象的過程如下:首先,new運算符創(chuàng)建一個空對象({}),然后以這個空對象為調(diào)用對象調(diào)用函數(shù)Animal,為這個空對象添加兩個屬性sort和character,接著,再將這個空對象的默認constructor屬性修改為構(gòu)造函數(shù)的名稱(即Animal;空對象創(chuàng)建時默認的constructor屬性值是Object),并且將空對象的__proto__屬性設置為指向Animal.prototype——這就是所謂的對象初始化。最后,返回初始化完畢的對象。這里將返回的新對象賦值給了變量dog。

dog.sort; // mammal
dog.character; // four legs
dog.constructor; // Animal

聰明的讀者結(jié)合前面介紹的內(nèi)容,可能會認為使用new運算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對象的過程也可以像下面這樣來實現(xiàn):

var dog = {};
Animal.call(dog, “mammal”,”four legs”);

表面上看,這兩行代碼與var dog = new Animal(”mammal”,”four legs”);是等價的,其實卻不是。雖然通過指定函數(shù)的執(zhí)行環(huán)境能夠部分達到初始化對象的目的,例如空對象dog確實獲得了sort和character這兩個屬性:

dog.sort; // mammal
dog.character; // four legs
dog.constructor; // Object —— 注意,沒有修改dog對象默認的constructor屬性

但是,最關(guān)鍵的是新創(chuàng)建的dog對象失去了通過Animal.prototype屬性繼承其他對象的能力。只要與前面采用new運算符調(diào)用構(gòu)造函數(shù)創(chuàng)建對象的過程對比一下,就會發(fā)現(xiàn),new運算符在初始化新對象期間,除了為新對象添加顯式聲明的屬性外,還會對新對象進行了一番“暗箱操作”——即將新對象的constructor屬性重寫為Animal,將新對象的__proto__屬性設置為指向Animal.prototype。雖然手工“初始化對象”也可以將dog.constructor重寫為Animal,但根據(jù)ECMA262規(guī)范,對象的__proto__屬性對開發(fā)人員是只讀的,對它的設置只能在通過new運算符創(chuàng)建對象時由JavaScript解釋引擎替我們完成。
JavaScript是基于原型繼承的,如果不能正確設置對象的__proto__屬性,那么就意味著默認的繼承機制會失效:

Animal.prototype.greet = “Hi, good lucky!”;
dog.greet; // undefined

事實上,在Firefox中,__proto__屬性也是可寫的:

Animal.prototype.greet = “Hi, good lucky!”;
dog.__proto__ = Animal.prototype;
dog.greet; // Hi, good lucky!

但這樣做只能在Firefox中行得通。考慮到在兼容多瀏覽器,必須依賴于new運算符,才能實現(xiàn)基于原型的繼承。