詳解JavaScript的函數(shù)簡介
函數(shù)簡介
函數(shù)function
- 函數(shù)也是一個對象
- 函數(shù)是實現(xiàn)功能的n條語句的封裝體,需要的時候就可以隨時調(diào)用
- 函數(shù)可以執(zhí)行的,其他類型的數(shù)據(jù)不能執(zhí)行
- 使用typeof檢查一個函數(shù)對象時,會返回function
優(yōu)點:
- 提高代碼的復(fù)用
- 便于閱讀交流
創(chuàng)建函數(shù)
構(gòu)造函數(shù)創(chuàng)建函數(shù)
語法
var fun =new Function(代碼塊);
這種形式構(gòu)建函數(shù)的比較少。
函數(shù)聲明創(chuàng)建函數(shù)
語法:
function 函數(shù)名(形參1,形參2......形參N){
語句...
}
函數(shù)表達式創(chuàng)建函數(shù)
var 函數(shù)名 = function 函數(shù)名(形參1,形參2......形參N){
語句...
}
函數(shù)的參數(shù)
形參(形式參數(shù)):
- 在函數(shù)中的()中指定一個或多個形參
- 多個形參之間使用,隔開,聲明形參就相當(dāng)于在函數(shù)內(nèi)部聲明了對應(yīng)的變量,但是并不賦值
實參(實際參數(shù)):
- 在調(diào)用函數(shù)時,可以在()中指定實參
- 實參將會賦值給函數(shù)中相應(yīng)的形參
- 調(diào)用函數(shù)時,解析器不會檢查實參的類型(所以要注意,是否有可能會接受到非法的參數(shù),如果有可能則需要對參數(shù)進行類型檢查)
function sum(a, b) {
console.log(a + b);
}
sum(1, 2);//調(diào)用函數(shù),傳入實參

參數(shù)的數(shù)量:
- 函數(shù)的實參和形參的個數(shù)可以不同
- A、實參的個數(shù)多于形參的個數(shù):函數(shù)正常運行,多余的實參被忽略
- B、實參的個數(shù)少于形參的個數(shù): 多余的形參會變成undefined的變量
問題: 在JavaScript中調(diào)用函數(shù)時傳遞變量參數(shù)時,是值傳遞還是引用傳遞?
- 理解1:都是值(基本/地址值)傳遞
- 理解2:可能是指傳遞,也可能是引用傳遞(地址值)
var a = 3;
function fn(a) {
a = a + 1;
}
fn(a);
console.log("a為:", a);// 3

在這里就可以理解為是值(基本)傳遞
var obj = { name: "心猿" };//聲明一個對象
function fn(obj) {
console.log(obj.name);
}
fn(obj);//“心猿”
//這里可以理解為地址值傳遞,也可以理解為引用傳遞(地址值)

函數(shù)的調(diào)用
直接調(diào)用:
函數(shù)名()
function fn(obj) {
console.log("我是直接被調(diào)用的!");
}
fn()//直接調(diào)用

通過對象調(diào)用
obj.函數(shù)名()
Obj = {
fun(){
console.log("我是通過對象調(diào)用的!");
}
}
Obj.fun();//通過對象調(diào)用函數(shù)

new調(diào)用
new fun()
function fun() {
console.log("我是通過new調(diào)用的!");
return 1 + 2;//返回一個值
}
var result = new fun();
console.log("result:", result);//fun {}
console.log("result的數(shù)據(jù)類型:",typeof result);//"object"

注意:
1、用new調(diào)用的函數(shù),得到的永遠是一個對象,不管函數(shù)有沒有返回值
2、使用new調(diào)用函數(shù),這個函數(shù)就是一個用來創(chuàng)建對象的函數(shù)(構(gòu)造函數(shù))
fun.call/apply(obj)調(diào)用
這個是臨時讓fun成為obj的方法進行調(diào)用
var obj = { name: "心猿" };//聲明一個對象
function fun() {
this.age = 5000;
console.log("通過fun.call(obj)調(diào)用函數(shù)!");
}
//不能直接通過obj.fun()調(diào)用,但是可以通過fun.call(obj)進行調(diào)用
fun.call(obj)//相當(dāng)于obj.fun
//打印通過fun.call(obj)調(diào)用函數(shù)!
console.log("還可以當(dāng)做obj的方法調(diào)用age的信息 "+"age:",obj.age);//5000

函數(shù)的返回值
函數(shù)可以有返回值,也可以沒有返回值。
- 有返回值的函數(shù):函數(shù)體中通過return語法返回一個值,這個決定程序下一步操作
- 無返回值的函數(shù):函數(shù)只實現(xiàn)某種功能,不需要返回值(函數(shù)體中沒有return語句)
- 返回值可以是任意數(shù)據(jù)類型,可以是基本數(shù)據(jù)類型,也可以是對象和函數(shù)。
立即執(zhí)行函數(shù)
函數(shù)定義完,立即被調(diào)用,這種函數(shù)叫做立即執(zhí)行函數(shù)
立即執(zhí)行函數(shù)往往只會執(zhí)行一次。
語法:
(function(){
代碼塊;
})();
例如:
(function (a, b) {
console.log("num:", a + b);
})(1,3);//4

方法
- 對象中屬性可以是一個函數(shù)
- 如果一個函數(shù)作為一個對象的屬性保存。那么我們稱這個函數(shù)是這個對象的方法
- 調(diào)用這個函數(shù)就是調(diào)用對象的方法(method),本質(zhì)上和函數(shù)沒有區(qū)別
var obj = new Object()
{
obj.name = "心猿";
obj.age = 3000;
obj.sayName = function(){
console.log("name:",obj.name);
}
}
obj.sayName();

另一種寫法:
var obj = {
name: "意馬",
age: 3000,
sayName: function () {
console.log("name:", obj.name);
}
}
obj.sayName();

枚舉對象中的屬性:
可以看我這篇的不同方法遍歷的區(qū)別:比較JavaScript中for、forEach、for…in、for…of的區(qū)別
使用for...in語句
語法
for(var index in arr)
{
console.log(index);//代碼塊
}
for ...in語句 對象有幾個屬性,循環(huán)體就會執(zhí)行幾次,每次執(zhí)行時,會將對象中的一個屬性的名字賦值給變量

var person = {
name:"孫悟空",
age:5777,
gender:"男"
};
for(var index in person)
{
console.log(person[index]);
}
作用域
作用域指一個變量的作用范圍
在JavaScript中一共兩種作用域:
1.全局作用域(全局變量)
2.函數(shù)作用域(局部變量)
3.塊級作用域ES6語法
全局作用域
- 在函數(shù)外部定義的變量或在函數(shù)內(nèi)部沒有使用var聲明的變量。
- 全局作用域在瀏覽器頁面打開時創(chuàng)建,在頁面關(guān)閉是銷毀
- 在全局作用域中有一個全局對象window
- 它代表的是一個瀏覽器的窗口
- 它代表的是一個瀏覽器的窗口,它由瀏覽器創(chuàng)建我們可以直接使用
- 如果在node.js環(huán)境下使用這個全局對象window會報錯,需要在瀏覽器中才會有顯示結(jié)果。
- 在全局作用域中:
- 創(chuàng)建的變量都會作為window對象的屬性保存
- 創(chuàng)建的函數(shù)都會作為window對象的方法保存
- 全局作用域中的變量都是全局變量
- 在頁面任意的部分都可以訪問的到
變量作為window對象的屬性保存
var a = 10;
console.log("a:",a);
console.log("window.a:",window.a);
因為環(huán)境的原因在node.js下會報錯

在瀏覽器中會正常顯示

函數(shù)都會作為window對象的方法
function fun(){
console.log("我是window.fun函數(shù)!")
}
window.fun();

函數(shù)作用域
- 調(diào)用函數(shù)時創(chuàng)建函數(shù)作用域,函數(shù)執(zhí)行完畢以后,函數(shù)作用域銷毀
- 每調(diào)用一次函數(shù)就會創(chuàng)建一個新的函數(shù)作用域,他們之間是互相獨立的
- 在函數(shù)作用域中可以訪問到全局作用域的變量
- 當(dāng)函數(shù)作用域操作一個變量時,會現(xiàn)在自身作用域中尋找,如果有就直接使用,如果全局作用域中依然沒有找到,則會報錯
ReferennceError - 在函數(shù)中要訪問全局變量可以使用window對象
塊級作用域
ES6(ECMAScript 2016)使用let聲明的變量,作用范圍在語句塊中
for(let i=0;i<100;i++){
}
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JS實現(xiàn)圖文并茂的tab選項卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)圖文并茂的tab選項卡效果,涉及javascript響應(yīng)鼠標事件動態(tài)修改頁面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
微信小程序picker多列選擇器(mode = multiSelector)
本文主要介紹了微信小程序picker多列選擇器,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
javascript 多種搜索引擎集成的頁面實現(xiàn)代碼
這個頁面是為了方便自己同時使用多種搜索引擎(呵呵我用其作默認主頁),在IE5/IE6/FireFox下均運行正常,效果如下圖2010-01-01

