關(guān)于js函數(shù)解釋(包括內(nèi)嵌,對象等)
常用寫法：
function add(a,b)
{
return a + b;
}
alert(add(1,2)); // 結(jié)果 3
當(dāng)我們這么定義函數(shù)的時候，函數(shù)內(nèi)容會被編譯（但不會立即執(zhí)行，除非我們?nèi)フ{(diào)用它）。而且，也許你不知道，當(dāng)這個函數(shù)創(chuàng)建的時候有一個同名的對象也被創(chuàng)建。就我們的例子來說，我們現(xiàn)在有一個對象叫做“add”（要更深入了解，看底下函數(shù)：對象節(jié)。）
匿名函數(shù)：
我們也可以通過指派一個變量名給匿名函數(shù)的方式來定義它。
var add = function(a,b)
{
return a + b;
}
alert(add(1,2)); // 結(jié)果 3
這個代碼和前一個例子做了同樣的事情。也許語法看起來比較奇怪，但它應(yīng)該更能讓你感覺到函數(shù)是一個對象，而且我們只是為這個對象指派了一個名稱?？梢园阉醋龊?var myVar=[1,2,3]一樣的語句。以這種方式聲明的函數(shù)內(nèi)容也一樣會被編譯。
當(dāng)我們指派一個這樣的函數(shù)的時候，我們并不一定要求必須是匿名函數(shù)。在這里，我作了和以上一樣的事情，但我加了函數(shù)名“theAdd”，而且我可以通過調(diào)用函數(shù)名或者是那個變量來引用函數(shù)。
var add = function theAdd(a,b)
{
return a + b;
}
alert(add(1,2)); // 結(jié)果 3
alert(theAdd(1,2)); // 結(jié)果也是 3
使用這種方式來定義函數(shù)在面向?qū)ο缶幊讨惺呛苡杏玫模驗槲覀兡芟竦紫逻@樣使一個函數(shù)成為一個對象的屬性。
var myObject = new Object();
myObject.add = function(a,b){return a+b};
// myObject 現(xiàn)在有一個叫做“add”的屬性（或方法）”
// 而且我能夠象下面這樣使用它
myObject.add(1, 2);
函數(shù)：對象
函數(shù)是javascript中的一種特殊形式的對象。它是第一個[b〕類數(shù)據(jù)類型（classdata type）。這意味著我們能夠給它增加屬性。這里有一些需要注意的有趣觀點
對象的創(chuàng)建
就像剛才提及的，當(dāng)我們定義一個函數(shù)時，javascript實際上在后臺為你創(chuàng)建了一個對象。這個對象的名稱就是函數(shù)名本身。這個對象的類型是function。在下面的例子，我們也許不會意識到這一點，但我們實際上已經(jīng)創(chuàng)建了一個對象：它叫做Ball。
function ball() // 也許看起來有點奇怪，但是這個聲明
{ // 創(chuàng)建了一個叫做Ball的對象
i = 1;
}
alert(typeof ball); // 結(jié)果 "function"
我們甚至能將這個對象的內(nèi)容打印出來而且它會輸出這個函數(shù)的實際代碼
alert(ball);
//結(jié)果為：
//function ball()
//{
// i = 1;
//}
屬性的添加
我們能夠給Object添加屬性，包括對象function。因為定義一個函數(shù)的實質(zhì)是創(chuàng)建一個對象。我們能夠“暗地里”給函數(shù)添加屬性。比如，我們這里定義了函數(shù)Ball，并添加屬性callsign。
function Ball() // 也許看起來有點奇怪，但是這個聲明創(chuàng)建了一個叫做Ball的對象，而且你能夠引用它或者象下面那樣給它增加屬性
{
}
ball.callsign="The ball"; // 給Ball增加屬性
alert(ball.callsign); // 輸出 "The ball"
指針
因為function是一個對象，我們能夠為一個function分配一個指針。如下例，變量ptr指向了對象myFunction。
function myFunction(message)
{
alert(message);
}
var ptr=myFunction; // ptr指向了myFunction
ptr("hello"); // 這句會執(zhí)行myFunction：輸出"hello"
我們能夠運行這個函數(shù)，就好像這個函數(shù)名已經(jīng)被指針名代替了一樣。所以在上面，這行ptr("hello"); 和myFunction("hello");的意義是一樣的。
指向函數(shù)的指針在面向?qū)ο缶幊讨邢喈?dāng)有用。例如：當(dāng)我們有多個對象指向同一個函數(shù)的時候（如下）：
function sayName(name)
{
alert(name);
}
var object1=new Object(); // 創(chuàng)建三個對象
var object2=new Object();
var object3=new Object();
object1.sayMyName=sayName; // 將這個函數(shù)指派給所有對象
object2.sayMyName=sayName;
object3.sayMyName=sayName;
object1.sayMyName("object1"); // 輸出 "object1"
object2.sayMyName("object2"); // 輸出 "object2"
object3.sayMyName("object3"); // 輸出 "object3"
因為只有指針被保存（而不是函數(shù)本身），當(dāng)我們改變函數(shù)對象自身的時候，所有指向那個函數(shù)的指針都會發(fā)生變化。我們能夠在底下看到：
function myFunction()
{
alert(myFunction.message);
}
myFunction.message="old";
var ptr1=myFunction; // ptr1 指向 myFunction
var ptr2=myFunction; // ptr2 也指向 myFunction
ptr1(); // 輸出 "old"
ptr2(); // 輸出 "old"
myFunction.message="new";
ptr1(); // 輸出 "new"
ptr2();
指針的指向
我們能夠在一個函數(shù)創(chuàng)建之后重新分配它，但是我們需要指向函數(shù)對象本身，而不是指向它的指針。在下例中，我將改變myfunction()的內(nèi)容。
function myFunction()
{
alert("Old");
}
myFunction(); // 輸出 "Old"
myFunction=function()
{
alert("New");
};
myFunction(); // 輸出 "New"
舊函數(shù)哪里去了？？被拋棄了。
如果我們需要保留它，我們可以在改變它之前給它分配一個指針。
function myFunction()
{
alert("Old");
}
var savedFuncion=myFunction;
myFunction=function()
{
alert("New");
};
myFunction(); // 輸出 "New"
savedFuncion(); // 輸出 "Old"
內(nèi)嵌函數(shù)
function get(a,b,c)
{
function cal(n)
{
return n/2;
}
var result = “”;
result+=cal(a)+” ”;
result+=cal(b)+” ”;
result+=cal(c);
}
var resultString = get(10,20,30);
alert(resultString); // 輸出 "5 10 15"
你只能在內(nèi)部調(diào)用嵌套的函數(shù)。就是說，你不能這么調(diào)用：
getHalfOf.calculate(10)，因為calculate只有當(dāng)外部函數(shù)(getHalfOf())在運行的時候才會存在。這和我們前面的討論一致（函數(shù)會被編譯，但只有當(dāng)你去調(diào)用它的時候才會執(zhí)行）。
調(diào)用哪個函數(shù)？
你也許正在想命名沖突的問題。比如，下面哪一個叫做calculate的函數(shù)會被調(diào)用？
function calculate(number)
{
return number/3;
}
function getHalfOf(num1, num2, num3)
{
function calculate(number)
{
return number/2;
}
var result="";
result+=calculate(num1)+" ";
result+=calculate(num2)+" ";
result+=calculate(num3);
}
var resultString=getHalfOf(10,20,30);
alert(resultString); // 輸出 "5 10 15"
在這個例子中，編譯器會首先搜索局部內(nèi)存地址，所以它會使用內(nèi)嵌的calculate函數(shù)。如果我們刪除了這個內(nèi)嵌（局部）的calculate函數(shù),這個代碼會使用全局的calculate函數(shù)。
函數(shù)：數(shù)據(jù)類型及構(gòu)造函數(shù)
讓我們來看看函數(shù)的另一個特殊功能－－這讓它和其它對象類型截然不同。一個函數(shù)能夠用來作為一個數(shù)據(jù)類型的藍(lán)圖。這個特性通常被用在面向?qū)ο缶幊讨衼砟M用戶自定義數(shù)據(jù)類型(user defined data type)。使用用戶自定義數(shù)據(jù)類型創(chuàng)建的對象通常被成為用戶自定義對象(user defined object)。
數(shù)據(jù)類型
在定義了一個函數(shù)之后，我們也同時創(chuàng)建了一個新的數(shù)據(jù)類型。這個數(shù)據(jù)類型能夠用來創(chuàng)建一個新對象。下例，我創(chuàng)建了一個叫做Ball的新數(shù)據(jù)類型。
function Ball()
{
}
var ball0=new Ball(); // ball0 現(xiàn)在指向一個新對象
alert(ball0); // 輸出 "Object"，因為 ball0 現(xiàn)在是一個對象
這樣看來，ball0=new Ball()作了什么？new關(guān)鍵字創(chuàng)建了一個類型是Object的新對象（叫做ball0）。然后它會執(zhí)行Ball()，并將這個引用傳給ball0（用于調(diào)用對象）。下面，你會看到這條消息：“creating new Ball”，如果Ball()實際上被運行的話。
function Ball(message)
{
alert(message);
}
var ball0=new Ball("creating new Ball"); // 創(chuàng)建對象并輸出消息
ball0.name="ball-0"; // ball0現(xiàn)在有一個屬性：name
alert(ball0.name); // 輸出 "ball-0"
我們可以把上面這段代碼的第6行看做是底下的代碼6-8行的一個簡寫：
function Ball(message)
{
alert(message);
}
var ball0=new Object();
ball0.construct=Ball;
ball0.construct("creating new ball"); // 執(zhí)行 ball0.Ball
("creating..");
ball0.name="ball-0";
alert(ball0.name);
這行代碼ball0.construct=Ball和以上中的ptr=myFunction語法一致。
添加屬性
當(dāng)我們象上面那樣使用關(guān)鍵字new創(chuàng)建一個對象的時候，一個新的Object被創(chuàng)建了。我們可以在創(chuàng)建之后給這個對象添加屬性（就好像我在上面那樣添加屬性name。而接下來的問題就是如果我們創(chuàng)建了這個對象的另外一個實例，我們得象下面那樣再次給這個新對象添加這個屬性。）
function Ball()
{
}
var ball0=new Ball(); // ball0 現(xiàn)在指向了類型Ball的一個新實例
ball0.name="ball-0"; // ball0 現(xiàn)在有一個屬性"name"
var ball1=new Ball();
ball1.name="ball-1";
var ball2=new Ball();
alert(ball0.name); // 輸出 "ball-0"
alert(ball1.name); // 輸出 "ball-1"
alert(ball2.name); // 哦，我忘記給ball2添加“name”了！
我忘記給ball2添加屬性name了，如果在正式的程序中這也許會引發(fā)問題。有什么好辦法可以自動增加屬性呢？嗯，有一個：使用this關(guān)鍵字。this這個詞在function中有特別的意義。它指向了調(diào)用函數(shù)的那個對象。讓我們看看下面的另一個示例，這時候我們在構(gòu)造函數(shù)中添加上這些屬性：
function Ball(message, specifiedName)
{
alert(message);
this.name=specifiedName;
}
var ball0=new Ball("creating new Ball", "Soccer Ball");
alert(ball0.name); // prints "Soccer Ball"
請記?。菏莕ew關(guān)鍵字最終使得構(gòu)造函數(shù)被執(zhí)行。在這個例子中，它將會運行Ball("creating new Ball", "Soccer Ball");而關(guān)鍵字this將指向ball0。
因此，這行：this.name=specifiedName變成了ball0.name="Soccer Ball"。它主要是說：給ball0添加屬性name，屬性值是Soccer Ball。
我們現(xiàn)在只是添加了一個name屬性給ball0，看起來和上一個例子中所做的很象，但卻是一個更好更具擴展性的方法?，F(xiàn)在，我們可以隨心所欲的創(chuàng)建許多帶有屬性的ball而無需我們手動添加它們。而且，人們也希望創(chuàng)建的Ball對象能夠清晰的看懂它的構(gòu)造函數(shù)并且能夠輕松找出Ball的所有屬性。讓我們添加更多屬性到Ball里。
function Ball(color, specifiedName, owner, weight)
{
this.name=specifiedName;
this.color=color;
this.owner=owner;
this.weight=weigth;
}
var ball0=new Ball("black/white", "Soccer Ball", "John", 20);
var ball1=new Ball("gray", "Bowling Ball", "John", 30);
var ball2=new Ball("yellow", "Golf Ball", "John", 55);
var balloon=new Ball("red", "Balloon", "Pete", 10);
alert(ball0.name); // 輸出 "Soccer Ball"
alert(balloon.name); // 輸出 "Balloon"
alert(ball2.weight); // 輸出 "55"
嘿！使用面向?qū)ο笮g(shù)語，你能夠說Ball是一個擁有如下屬性的對象類型：name,color, owner, weight。
將對象賦給屬性我們并沒被限制只能添加形如字符串或者數(shù)字之類的簡單數(shù)據(jù)類型作為屬性。我們也能夠?qū)ο筚x給屬性。下面，supervisor是Employee的一個屬性.
function Employee(name, salary, mySupervisor)
{
this.name=name;
this.salary=salary;
this.supervisor=mySupervisor;
}
var boss=new Employee("John", 200);
var manager=new Employee("Joan", 50, boss);
var teamLeader=new Employee("Rose", 50, boss);
alert(manager.supervisor.name+" is the supervisor of "+manager.name);
alert(manager.name+"\'s supervisor is "+manager.supervisor.name);
函數(shù)也是一個對象。所以你可以讓一個函數(shù)作為一個對象的一個屬性。下面，我將添加兩個函數(shù)getSalary和addSalary。
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
this.addSalary=addSalaryFunction;
this.getSalary=function()
{
return this.salary;
};
}
function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
var boss=new Employee("John", 200000);
boss.addSalary(10000); // boss 長了 10K 工資……為什么老板工資可以長這么多:'(
alert(boss.getSalary()); // 輸出 210K……為什么默認(rèn)工資也那么高……:'(
addSalary和getSalary演示了幾種將函數(shù)賦給屬性的不同方法。
如前面數(shù)次提到的，一個函數(shù)聲明的結(jié)果是一個對象 被創(chuàng)建。
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
this.addSalary=addSalaryFunction;
this.getSalary=function()
{
return this.salary;
};
}
function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
var boss=new Employee("John", 200000);
var boss2=new Employee("Joan", 200000);
var boss3=new Employee("Kim", 200000);
當(dāng)你創(chuàng)建這個對象的更多實例時(boss2和boss3),每一個實例都有一份getSalary代碼的單獨拷貝；而與此相反，addSalary則指向了同一個地方(即addSalaryFunction)。
看看下面的代碼來理解一下上面所描述的內(nèi)容。
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
this.addSalary=addSalaryFunction;
this.getSalary=function()
{
return this.salary;
};
}
function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
var boss1=new Employee("John", 200000);
var boss2=new Employee("Joan", 200000);
// 給getSalary函數(shù)對象添加屬性
boss1.getSalary.owner="boss1";
boss2.getSalary.owner="boss2";
alert(boss1.getSalary.owner); // 輸出 "boss1"
alert(boss2.getSalary.owner); // 輸出 "boss2"
// 如果兩個對象指向同一個函數(shù)對象，那么 上面兩個輸出都應(yīng)該是“boss2”。
// 給addSalary函數(shù)對象添加屬性
boss1.addSalary.owner="boss1";
boss1.addSalary.owner="boss2";
alert(boss1.addSalary.owner); // 輸出 "boss2"
alert(boss2.addSalary.owner); // 輸出 "boss2"
// 因為兩個對象都指向同一個函數(shù)
// 當(dāng)修改其中一個的時候，會影響所有的實例（所以兩個都輸出“boss2”）.
也許不是重要的事情，但這里有一些關(guān)于運行類似上面的getSalary的內(nèi)嵌函數(shù)的結(jié)論：
1) 需要更多的存儲空間來存儲對象（因為每一個對象實例都會有它自己的getSalary代碼拷貝）；
2) javascript需要更多時間來構(gòu)造這個對象。
讓我們重新寫這個示例來讓它更有效率些。
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
this.addSalary=addSalaryFunction;
this.getSalary=getSalaryFunction;
}
function getSalaryFunction()
{
return this.salary;
}
function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
看這兒，兩個函數(shù)都指向同一個地方，這將會節(jié)約空間和縮短構(gòu)造時間（特別是當(dāng)你有一大堆內(nèi)嵌函數(shù)在一個構(gòu)造函數(shù)的時候）。這里有另外一個函數(shù)的功能能夠來提升這個設(shè)計，它叫做prototype，而我們將在下一節(jié)討論它。
函數(shù)：原型
每一個構(gòu)造函數(shù)都有一個屬性叫做原型(prototype,下面都不再翻譯，使用其原文)。這個屬性非常有用：為一個特定類聲明通用的變量或者函數(shù)。
prototype的定義
你不需要顯式地聲明一個prototype屬性，因為在每一個構(gòu)造函數(shù)中都有它的存在。你可以看看下面的例子：
function Test()
{
}
alert(Test.prototype); // 輸出 "Object"
給prototype添加屬性
就如你在上面所看到的，prototype是一個對象，因此，你能夠給它添加屬性。你添加給prototype的屬性將會成為使用這個構(gòu)造函數(shù)創(chuàng)建的對象的通用屬性。
例如，我下面有一個數(shù)據(jù)類型Fish，我想讓所有的魚都有這些屬性：
livesIn="water"和price=20；為了實現(xiàn)這個，我可以給構(gòu)造函數(shù)Fish的prototype添加那些屬性。
function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;
接下來讓我們作幾條魚：
var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");
再來看看魚都有哪些屬性：
for (int i=1; i<=3; i++)
{
var fish=eval("fish"+i); // 我只是取得指向這條魚的指針
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}
輸出應(yīng)該是：
"mackarel, gray, water, 20" "goldfish, orange, water, 20" "salmon, white water, 20"
你看到所有的魚都有屬性livesIn和price,我們甚至都沒有為每一條不同的魚特別聲明這些屬性。這時因為當(dāng)一個對象被創(chuàng)建時，這個構(gòu)造函數(shù)將會把它的屬性prototype賦給新對象的內(nèi)部屬性__proto__。這個__proto__被這個對象用來查找它的屬性。
你也可以通過prototype來給所有對象添加共用的函數(shù)。這有一個好處：你不需要每次在構(gòu)造一個對象的時候創(chuàng)建并初始化這個函數(shù)。
用prototype給對象添加函數(shù)
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
我們可以象通常那樣創(chuàng)建對象：
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);
并驗證它：
alert(boss1.getSalary()); // 輸出 200000 alert(boss2.getSalary()); // 輸出 100000 alert(boss3.getSalary()); // 輸出 150000
這里有一個圖示來說明prototype是如何工作的。這個對象的每一個實例(boss1, boss2, boss3)都有一個內(nèi)部屬性叫做__proto__，這個屬性指向了它的構(gòu)造器 (Employee)的屬性prototype。當(dāng)你執(zhí)行g(shù)etSalary或者addSalary的時候，這個對象會在它的__proto__找到并執(zhí)行這個代碼。
以上這篇關(guān)于js函數(shù)解釋(包括內(nèi)嵌,對象等) 就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Dom 學(xué)習(xí)總結(jié)以及實例的使用介紹
本篇文章小編為大家介紹，Dom 學(xué)習(xí)總結(jié)以及實例的使用。需要的朋友參考下2013-04-04
這篇文章主要介紹了webpack分離css單獨打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了JS如何隨拖拽速度設(shè)置傾斜角度,文中有詳細(xì)的代碼講解,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下2023-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)隨機點名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
關(guān)于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了css結(jié)合js制作下拉菜單的具體實現(xiàn),需要的朋友可以參考下2014-02-02
將form表單中的元素轉(zhuǎn)換成對象的方法適用表單提交
這篇文章主要介紹了如何將form表單中的元素轉(zhuǎn)換成對象,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了DIV始終居中的js代碼,需要的朋友可以參考下2014-02-02
JavaScript設(shè)計模式之構(gòu)造函數(shù)模式實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之構(gòu)造函數(shù)模式,結(jié)合實例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下2018-07-07
關(guān)于JavaScript的面向?qū)ο蠛屠^承有利新手學(xué)習(xí)
這是一篇關(guān)于JavaScript的面向?qū)ο蠛屠^承的文章,對想學(xué)習(xí)JavaScript中面向?qū)ο蟮耐瑢W(xué)來說是很有幫助,雖然一些Javascript用戶可能永遠(yuǎn)也不需要知道原型或面向?qū)ο笳Z言的性質(zhì)，但是那些來自傳統(tǒng)面向?qū)ο蟮恼Z言的開發(fā)者使用的時候會發(fā)現(xiàn)JavaScript的繼承模型非常的奇怪2013-01-01