JavaScript基礎內容中的函數詳解

来源:https://www.cnblogs.com/shsxt/archive/2019/08/21/11387549.html
-Advertisement-
Play Games

函數 函數:即方法 函數就是一段預先設置的功能代碼塊,可以反覆調用,根據輸入參數的不同,返回不同的值。 為什麼使用函數: 1.方便調用 2.代碼重用,利於維護 3.便於修改,便於重構 4.簡化邏輯,利於編程 1、聲明函數 聲明函數 Function Declaration 的三種方法 1)funct ...


函數

函數:即方法

函數就是一段預先設置的功能代碼塊,可以反覆調用,根據輸入參數的不同,返回不同的值。

為什麼使用函數:

1.方便調用

2.代碼重用,利於維護

3.便於修改,便於重構

4.簡化邏輯,利於編程

1、聲明函數

聲明函數 Function Declaration 的三種方法

1)function 命令

function print(s) {
    document.write(s+"<br/>");
}

2)函數表達式

var printStr =function(str){
    document.write(str+"<br/>");
}

這種寫法將一個匿名函數賦值給變數。這時,這個匿名函數又稱函數表達式(Function Expression),因為賦值語句的等號右側只能放表達式。

3)Function 構造函數 : 入門級別用的不多….

var add = new Function('x','y','return (x + y)');

// 等同於

function add(x, y) {
    return (x + y);
}
var foo = new Function(
    'return "hello world"'
);

// 等同於

function foo() {
    return "hello world";
}

註意:不能在條件語句中聲明函數

函數名的提升

JavaScript 引擎將函數名視同變數名,所以採用 function 命令聲明函數時,整個函數會像變數聲明一樣,被提升到代碼頭部。所以,下麵的代碼不會報錯。

f();
function f() {}

錶面上,上面代碼好像在聲明之前就調用了函數 f。但是實際上,由於“變數提升”,函數 f 被提升到了代碼頭部,也就是在調用之前已經聲明瞭。但是,如果採用賦值語句定義函數,JavaScript 就會報錯。

f();
var f = function (){};// TypeError: undefined is not a function

2、函數的調用

函數的調用:圓括弧運算符

函數名([實參]);

存在返回值可以變數接收

print()
printStr("goodgoodstudy");
var result =add(1,2);

3、參數

參數: 形參與實參 函數運行的時候,有時需要提供外部數據,不同的外部數據會得到不同的結果,這種外部數據就叫參數。"種瓜得瓜種豆得豆",使用時實參可以省略。

function square(x) { //x 為形參
    return x * x;
}

square(2) // 4 2 為實參

square(3) // 9

function f(a, b) {
    return a;
}
//實參可以省略
f(4, 2, 3) // 1
f(10) // 1
f() // undefined

同名參數:取最後的一個

function f(a, a) {
    console.log(a);
}

f(1, 2) // 2

預設值:使用 || 或運算

function f(a){
    a = a || 1;
    return a;
}

f('') // 1
f(0) // 1

//更精確寫法
function f(a){
    (a !== undefined && a !== null) ? a = a : a = 1;
    return a;
}

值傳遞(passes by value):值的副本

var box= 2;
function f(a) {
    a = 3;
}

f(box);
console.log(box) // 2 沒有改變
//思考 對象值的改變
var obj = {p: 1};
function f(o) {
    o.p = 2;
}
f(obj);
console.log(obj.p) // 2

//思考
var obj = [1, 2, 3];
function f(o){
    o = [2, 3, 4];
}

f(obj);
console.log(obj) // [1, 2, 3]

arguments 對象: 獲取所有的參數,可以看成數組。由於 JavaScript 允許函數有不定數目的參數,所以我們需要一種機制,可以在函數體內部讀取所有參數。這就是 arguments 對象的由來。

var f = function(a) {
    for(var i in arguments){
        console.log(arguments[i]);
    }
}

f(1,2,3);

瞭解: callee

var add =function(){
    //獲取調用者
    console.log(arguments.callee === add); //是否為自己調用
}
add();

4、 return 語句

是函數的返回值。return 語句不是必需的,如果沒有的話,該函數就不返回任何值,或者說返回 undefined。

5、遞歸( recursion)

函數自己調用自身

函數頭:盡頭 函數體:重覆執行

function print(num){
    if(num==10){ //遞歸頭
        return ;
    }
    //遞歸體
    console.log(num);
    print(num+1);
}

print(1);

6、函數的地位

函數的地位是第一等公民

函數與其他數據類型完全是平等的,所以又稱函數為第一等公民

function add(x, y) {
    return x + y;
}

// 將函數賦值給一個變數
var operator = add;

// 將函數作為參數和返回值
function a(op){
    return op;
}

a(operator)(1, 1)// 2

7、函數的屬性和方法

name:函數名

length:參數個數

toString(): 返回源碼

8、函數作用域

函數作用域:全局(global variable)和局部(local variable)

var a =1; //全局變數
function display(){
    var b=2; //局部變數
    c =3; //沒有 var 為全局變數 ,調用完成後 c 就存在了
    console.log(a+"-->"+b);
}

display();
//b 不能訪問
console.log(a+"-->"+c);

就近原則:

var v = 1;

function f(){
    var v = 2;
    console.log(v);
}

f(); // 2
console.log(v); // 1

變數提升

function foo(x) {
    if (x > 100) {
        var tmp = x - 100;
    }
}

//等同於

function foo(x) {
    var tmp;
    if (x > 100) {
        tmp = x - 100;
    };
}

函數本身的作用域:函數本身也是一個值,也有自己的作用域。它的作用域綁定其聲明時所在的作用域。

var a = 1;

var x = function (){
    console.log(a);
};

function f(){
    var a = 2;
    x();
}

f() // 1

9、方法的調用

方法的調用: apply call :調用一個對象的一個方法,以另一個對象替換當前對象。二者的區別在於參數是否為數組

function Animal(age){
    this.name = "Animal";
    this.showName = function(){
           alert(this.name);
    }
}

function Cat(){
    this.name = "Cat";
}

var animal = new Animal();

var cat = new Cat();

//通過 call 或 apply 方法,將原本屬於 Animal 對象的 showName()方法交給對象 cat 來使用了。

//輸入結果為"Cat"

animal.showName.call(cat,"10");
// 等同於apply方法中參數為數組
animal.showName.apply(cat,[10]);

10、 eval

執行字元串,將字元串當作語句執行。

eval('var a = 1;');
alert(a); // 1

瞭解 jsonp 的使用:

var jsonp = 'foo({id:42})';

var f = new Function( "foo", jsonp );

// 相當於定義瞭如下函數
/*
function f(foo) {
    foo({id:42});
}*/

//業務處理

var print=function(json){
    console.log( json.id ); // 42
}

f(print);
//相當於
function f(print){
    json = {id:42};
//    print(json);
    console.log(json.id);
}

 

上面代碼中,jsonp 是一個字元串,Function 構造函數將這個字元串,變成了函數體。調用該函數的時候,jsonp 就會執行。這種寫法的實質是將代碼放到函數作用域執行,避免對全局作用域造成影響。(上海尚學堂,原文首發至:公眾號 嗨碼歌)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 帶你走進高德api 正文 高德api地址:https://lbs.amap.com/ 1、註冊/登錄 2、進入應用管理創建應用並申請key 3、在項目中使用 效果圖 ...
  • 通過配置nginx幹掉 304 (from memory cache) (from disk cache) ...
  • 在日常工作中,我們需要將匹配到的所有路由,映射到一個組件上。 如下代碼想要達到的效果: 不傳page和id,則映射到user預設list頁面 傳page和id,根據page不同,顯示不同的頁面 問題 使用以下代碼片段是不能實現以上效果的,因為預設情況下page和id參數是必傳的,如果不傳參數,則會根 ...
  • DOM事件,就是瀏覽器或用戶針對頁面可以做出的某種動作,我們稱這些動作為DOM事件。它是用戶和頁面交互的核心。當動作發生(事件觸發)時,我們可以為其綁定一個或多個事件處理程式(函數),來完成我們想要實現的功能。 為了方便理解下麵即將要講解的內容,在正式開始之前,讓我們先來瞭解一個最常用的事件:cli ...
  • jQuery知識梳理20190818 [TOC] 1. 時間綁定和解綁 2. 區別mouseover與mouseenter 3. 時間委托(委派/代理) 4 . 多庫共存 如果有2個庫都有$, 就存在衝突。 jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQ ...
  • JQuery Ztree 樹插件配置與應用小結 by:授客 QQ:1033553122 測試環境 Win7 jquery-3.2.1.min.js 下載地址: https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.mi ...
  • 摘要: React Hooks原理解析。 原文: "快速瞭解 React Hooks 原理" 譯者:前端小智 我們大部分 React 類組件可以保存狀態,而函數組件不能? 並且類組件具有生命周期,而函數組件卻不能? React 早期版本,類組件可以通過繼承 來優化一些不必要的渲染,相對於函數組件,R ...
  • 精心整理了之前的css學習筆記,僅供學習參考使用,禁止商業用途 [TOC] CSS 簡介 1.CSS 簡介 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常存儲在樣式表中 把樣式添加到 HTML 4.0 中,是為瞭解決內 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...