詳解JavaScript的函式簡介
阿新 • • 發佈：2021-11-19
目錄
- 函式簡介
- 函式function
- 建立函式
- 建構函式建立函式
- 函式宣告建立函式
- 函式表示式建立函式
- 函式的引數
- 形參(形式引數)：
- 實參(實際引數)：
- 函式的呼叫
- 通過物件呼叫
- new呼叫
- 函式的返回值
- 立即執行函式
- 方法
- 列舉物件中的屬性：
- 作用域
- 全域性作用域
- 函式作用域
- 塊級作用域
- 總結
函式簡介
函式function
- 函式也是一個物件
- 函式是實現功能的n條語句的封裝體，需要的時候就可以隨時呼叫
- 函式可以執行的，其他型別的資料不能執行
- 使用typeof檢查一個函式物件時，會返回function
優點：
- 提高程式碼的複用
- 便於閱讀交流
建立函式
建構函式建立函式
語法
var fun =new Function(程式碼塊);
這種形式構建函式的比較少。
函式宣告建立函式
語法：
function 函式名(形參1,形參2......形參N){
語句...
}
函式表示式建立函式
var 函式名 = function 函式名(形參1,形參2......形參N){
語句...
}
函式的引數
形參(形式引數)：
- 在函式中的()中指定一個或多個形參
- 多個形參之間使用,隔開，宣告形參就相當於在函式內部聲明瞭對應的變數，但是並不賦值
實參(實際引數)：
- 在呼叫函式時，可以在()中指定實參
- 實參將會賦值給函式中相應的形參
- 呼叫函式時，解析器不會檢查實參的型別（所以要注意，是否有可能會接受到非法的引數，如果有可能則需要對引數進行型別檢查）
function sum(a,b) {
console.log(a + b);
}
sum(1,2);//呼叫函式,傳入實參
引數的數量：
- 函式的實參和形參的個數可以不同
- A、實參的個數多於形參的個數：函式正常執行,多餘的實參被忽略
- B、實參的個數少於形參的個數: 多餘的形參會變成undefined的變數
問題： 在中呼叫函式時傳遞變數引數時，是值傳遞還是引用傳遞？
- 理解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);//“心猿”
//這裡可以理解為地址值傳遞，也可以理解為引用傳遞(地址值)
函式的呼叫
直接呼叫：
函式名()
function fn(obj) {
console.log("我是直接被呼叫的！");
}
fn()//直接呼叫
通過物件呼叫
obj.函式名()
Obj = {
fun(){
console.log("我是通過物件呼叫的！");
}
}
Obj.fun();//通過物件呼叫函式
new呼叫
new fun()
function fun() {
console.log("我是通過new呼叫的！");
return 1 + 2;//返回一個值
}
var result = new fun();
console.log("result:",result);//fun {}
console.log("result的資料型別：",typeof result);//"object"
注意：
1、用new呼叫的函式，得到的永遠是一個物件，不管函式有沒有返回值
2、使用new呼叫函式，這個函式就是一個用來建立物件的函式（建構函式）
fun.call/apply(obj)呼叫
這個是臨時讓fun成為obj的方法進行呼叫
var obj = { name: "心猿" };//宣告一個物件
function fun() {
this.age = 5000;
console.log("通過fun.call(obj)呼叫函式!");
}
//不能直接通過obj.fun()呼叫，但是可以通過fun.call(obj)進行呼叫
fun.call(obj)//相當於obj.fun
//列印通過fun.call(obj)呼叫函式!
console.log("還可以當做obj的方法呼叫age的資訊 "+"age:",obj.age);//5000
函式的返回值
函式可以有返回值,也可以沒有返回值。
- 有返回值的函式：函式體中通過return語法返回一個值，這個決定程式下一步操作
- 無返回客棧值的函式：函式只實現某種功能,不需要返回值(函式體中沒有return語句)
- 返回值可以是任意資料型別，可以是基本資料型別，也可以是物件和函式。
立即執行函式
函式定義完，立即被呼叫，這種函式叫做立即執行函式
立即執行函式往往只會執行一次。
語法：
(function(){
程式碼塊;
})();
例如：
(function (a,b) {
console.log("num:",a + b);
})(1,3);//4
方法
- 物件中屬性可以是一個函式
- 如果一個函式作為一個物件的屬性儲存。那麼我們稱這個函式是這個物件的方法
- 呼叫這個函式就是呼叫物件的方法（method），本質上和函式沒有區別
var obj = new Object()
{
obj.name = "心猿";
obj.age = 3000;
obj.sayName = function(){
console.log("name:",obj.name);
}
}
obj.sayName();
另一種寫法：
var www.cppcns.comobj = {
name: "意馬",age: 3000,sayName: function () {
console.log("name:",obj.name);
}
}
obj.sayName();
列舉物件中的屬性：
可以看我這篇的不同方法遍歷的區別：比較Script中for、forEach、for…in、for…of的區別
使用for...in語句
語法
for(var index in arr)
{
console.log(index);//程式碼塊
}
for ...in語句 物件有幾個屬性，迴圈體就會執行幾次，每次執行時，會將物件中的一個屬性的名字賦值給變數
var person = {
name:"孫悟空",age:5777,gender:"男"
};
for(var index in person)
{
console.log(person[index]);
}
作用域
作用域指一個變數的作用範圍
在JavaScript中一共兩種作用域：
1.全域性作用域(全域性變數)
2.函式作用域(區域性變數)
3.塊級作用域ES6語法
全域性作用域
- 在函式外部定義的變數或在函式內部沒有使用var宣告的變數。
- 全域性作用域在瀏覽器頁面開啟時建立，在頁面關閉是銷燬
- 在全域性作用域中有一個全域性物件window
- 它代表的是一個瀏覽器的視窗
- 它代表的是一個瀏覽器的視窗，它由瀏覽器建立我們可以直接使用
- 如果在node.環境下使用這個全域性物件window會報錯，需要在瀏覽器中才會有顯示結果。
- 在全域性作用域中：
- 建立的變數都會作為window物件的屬性儲存
- 建立的函式都會作為window物件的方法儲存
- 全域性作用域中的變數都是全域性變數
- 在頁面任意http://www.cppcns.com的部分都可以訪問的到
變數作為window物件的屬性儲存
var a = 10;
console.log("a:",a);
console.locWjeZBFyeag("window.a:",window.a);
因為環境的原因在node.js下會報錯
在瀏覽器中會正常顯示
函式都會作為window物件的方法
function fun(){
console.log("我是window.fun函式!")
}
window.fun();
函式作用域
- 呼叫函式時建立函式作用域，函式執行完畢以後，函式作用域銷燬
- 每呼叫一次函式就會建立一個新的函式作用域，他們之間是互相獨立的
- 在函式作用域中可以訪問到全域性作用域的變數
- 當函式作用域操作一個變數時，會現在自身作用域中尋找，如果有就直接使用，如果全域性作用域中依然沒有找到，則會報錯
ReferennceError - 在函式中要訪問全域性變數可以使用window物件
塊級作用域
ES6(ECMAScript 2016)使用let宣告的變數，作用範圍在語句塊中
for(let i=0;i<100;i++){
}
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!