溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript中如何使用Function對象，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
函數定義
在Js中函數是Fuction類的實例對象，因此我們可以用實例化的方式來定義函數，這也能充分理解函數也是對象這一概念。
復制代碼
<script>
"use strict"; // 參數1：形參，參數2：函數代碼體
let func = new Function("title","console.log(title)");
func("云崖先生的博客");</script> 使用Function類的方式定義函數太過麻煩，因此推薦使用function標準語法進行定義。
復制代碼
<script>
"use strict"; function func(title){
console.log(title);
}
func("云崖先生的博客");
</script>我們可以在一個對象中定義函數，這通常會被稱之為對象方法。
復制代碼
<script>
"use strict";
let obj = {
description:"這是一個對象屬性",
show:function(title){
console.log("這是一個對象方法，傳入的參數是:",title);
},
}
obj.show("云崖");</script> 全局聲明的標準定義函數會被存入window對象中，這樣做會產生很多弊端。
因為我們的函數名如果不恰當的話可能造成window方法缺失。
復制代碼
<script>
"use strict"; function func(title){
console.log(title);
}
func("云崖先生的博客");
console.log(window.func); // 有的</script> 因此，可以通過賦值來進行匿名函數的定義，定義前使用let/const進行聲明，這樣就不會壓入至window對象中，注意后面要以;結束。 注意：以var聲明的匿名函數會壓入至window對象中
復制代碼
<script>
"use strict";
let func = function (title) {
console.log(title);
};
func("云崖先生的博客");
console.log(window.func); // undefined</script>標準定義的函數會進行函數提升，可以先使用后定義，這是不符合規范的。
但是匿名函數不會進行函數提升。
函數的提升是排在var變量提升之前的，因此如果函數名與用var定義的變量重復那么該名字會被變量拿到，函數則會被當做垃圾回收。
即使使用了
var來定義匿名函數，也不會進行函數提升， 但是會將該函數壓入window對象中，所以建議使用let/const來對匿名函數進行接收。
標準聲明函數會進行提升
復制代碼
<script>
"use strict";
func("云崖先生的博客"); // 執行了
function func (title) {
console.log(title);
}
console.log(window.func); // 有的</script>匿名函數不會進行提升
復制代碼
<script>
"use strict";
func("云崖先生的博客"); // Uncaught ReferenceError: Cannot access 'func' before initialization
let func = function (title) {
console.log(title);
}
console.log(window.func);
</script> 在很早之前，如果你寫了一個Js模塊，為了防止全局作用域的污染，你會將代碼放入一個自執行函數里面。
但是現在不用了，因為let/const具有塊作用域，它們的出現決定我們今后寫的模塊不用再拿自執行函數來進行封裝了。
首先來看一下自執行函數怎么使用。
復制代碼
<script>
"use strict";
(function (title) {
console.log(title); // 自己執行
})("云崖先生的博客"); // 這里調用</script>自執行函數封裝
復制代碼
(function () { function show() {
console.log("執行了show功能");
} function test() {
console.log("執行了test功能");
}
window.module = { show, test };
})(); let作用域封裝
復制代碼
{
let show = function () {
console.log("執行了show功能");
}
let test = function () {
console.log("執行了test功能");
}
window.module = { show, test };
};調用
復制代碼
<script src="JavaScript.js"></script> <script> // 注意上面要引入模塊 "use strict"; module.show(); module.test();</script>
形參是在函數聲明時設置的參數，實參指在調用函數時傳遞的值，注意，傳參時必須一一對應！
形參數量大于實參時，沒有傳參的形參值為
undefined實參數量大于形參時，多于的實參將忽略并不會報錯
使用
函數名.length可獲取需要傳遞形參的數量
復制代碼
<script>
"use strict"; function test(f1, f2, f3) {
console.log(f1); // 第一個
console.log(f2); // 第二個
console.log(f3); // undefined
}
test("第一個","第二個");</script>默認形參要放在最后，當沒有實參傳遞時采用默認形參的值，當有實參傳遞時采用實參傳遞的值。
復制代碼
<script>
"use strict"; function test(f1, f2, f3) {
f3 = f3 || "默認形參"; // 老版設置默認形參的方式
console.log(f1); // 第一個
console.log(f2); // 第二個
console.log(f3); // 默認形參
}
test("第一個","第二個");</script>復制代碼
<script>
"use strict"; // 新版設置默認形參的方式
function test(f1, f2, f3="默認形參") {
console.log(f1); // 第一個
console.log(f2); // 第二個
console.log(f3); // 默認形參
}
test("第一個","第二個");</script>函數本身也可當做一個參數傳遞給另一個函數。
復制代碼
<script>
"use strict"; function f1(func) {
console.log("f1...");
console.log("參數:",func);
func("給f2傳遞的參數"); // 執行f2 } function f2(y) {
console.log("f2");
console.log("參數:",y);
}
f1(f2);</script> 當某個函數要接收無限多的參數時，可不指定形參，使用arguments來進行接收（必須是這個名字）。
注意：
arguments是Arguments對象，并不是一個數組。但是我們可以將它轉換為數組再進行操作
復制代碼
<script>
"use strict"; function show() {
console.log(arguments ); // Arguments(6) [1, 2, 3, 4, 5, 6, callee: (...), Symbol(Symbol.iterator): ?]
}
show(1,2,3,4,5,6);</script> 當形參要接收無限多的參數時，可在形參名前加入...，使用進行接收。該形參會作為一個Array對象接收無限多的參數。
這個是更推薦使用的方式
復制代碼
<script>
"use strict"; function show(...args) {
console.log(args ); // (6) [1, 2, 3, 4, 5, 6] }
show(1,2,3,4,5,6);</script> 當實參是一個數組或者類數組的數據類型時，可以使用...語法來為形參一一對應傳參。但是要注意，嚴格模式下不允許這樣做。
復制代碼
<script>
// "use strict"; 嚴格模式下不能這么做
function show(f1,f2,f3,f4,f5,f5) {
console.log(f1); // 1
console.log(f2); // 2
console.log(f3); // 3
console.log(f4); // 4
console.log(f5); // 5 }
show(...[1,2,3,4,5,6]);</script>箭頭函數是函數聲明的簡寫形式，在使用遞歸調用、構造函數、事件處理器時不建議使用箭頭函數。
無參數時使用空擴號即可，代碼塊過于簡短可省略花括號。
函數體為單一表達式時不需要
return返回處理，系統會自動返回表達式計算結果。多參數傳遞與普通聲明函數一樣使用逗號分隔
只有一個參數時可以省略參數括號。
無參數時使用空擴號即可，代碼塊過于簡短可省略花括號。
復制代碼
<script>
"use strict";
let show = () => console.log("執行了");
show();</script> 函數體為單一表達式時不需要 return 返回處理，系統會自動返回表達式計算結果。
復制代碼
<script> "use strict"; let show = () => "你真帥"; const res = show(); console.log(res); // 你真帥</script>
多參數傳遞與普通聲明函數一樣使用逗號分隔
復制代碼
<script>
"use strict";
let show = (f1, f2, f3) => {
console.log(f1);
console.log(f2);
console.log(f3);
}; // 注意加分號
show("第一", "第二", "第三")</script>只有一個參數時可以省略參數括號。
復制代碼
<script>
"use strict";
let show = f1 => console.log(f1);
show("第一") // 第一</script>遞歸指函數內部調用自身的方式。
主要用于數量不確定的循環操作
要有退出時機否則會陷入死循環
以下示例將展示使用遞歸進行累加操作。
復制代碼
<script>
"use strict"; function show(num) { if (!num) { return 0;
} return num + show(num - 1);
}
let res = show(100);
console.log(res); // 5050</script>以下示例將展示使用遞歸打印倒三角。
復制代碼
<script>
"use strict"; function show(num) { if (!num) { return ;
}
console.log("*".repeat(num));
show(num - 1);
}
show(5);
</script>回調函數是指在某一特定情況下會被其他函數所調用的函數，比如處理鼠標事件，鍵盤事件的函數都是回調函數。
復制代碼
<script>
"use strict"; // 回調函數
document.querySelector("div").addEventListener("click",(event)=> console.log(event.target)); // 由于this指向不同，所以我們使用event.target進行打印
</script>當使用模板字面量對字符串進行格式化時，可指定一個標簽函數。第一個參數是字符串值的數組，其余的參數為標簽變量。
注意！標簽函數會自動執行！
復制代碼
<script>
"use strict"; function show(str, ...args) {
console.log(str); // (3) ["姓名是:", "?年齡是:", "", raw: Array(3)]
console.log(args); // (2) ["云崖", 18]
}
let username = "云崖";
let age = 18;
let str = show`姓名是:${username}\n年齡是:${age}`;</script>看完上述內容，你們對JavaScript中如何使用Function對象有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
