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) ...
  • vue-router動態路由設置參數可選
    在日常工作中，我們需要將匹配到的所有路由，映射到一個組件上。 如下代碼想要達到的效果： 不傳page和id，則映射到user預設list頁面 傳page和id，根據page不同，顯示不同的頁面 問題 使用以下代碼片段是不能實現以上效果的，因為預設情況下page和id參數是必傳的，如果不傳參數，則會根 ...
  • DOM之事件（一）
    DOM事件，就是瀏覽器或用戶針對頁面可以做出的某種動作，我們稱這些動作為DOM事件。它是用戶和頁面交互的核心。當動作發生（事件觸發）時，我們可以為其綁定一個或多個事件處理程式（函數），來完成我們想要實現的功能。 為了方便理解下麵即將要講解的內容，在正式開始之前，讓我們先來瞭解一個最常用的事件：cli ...
  • jQuery知識梳理20190818
    jQuery知識梳理20190818 [TOC] 1. 時間綁定和解綁 2. 區別mouseover與mouseenter 3. 時間委托（委派/代理） 4 . 多庫共存 如果有2個庫都有$, 就存在衝突。 jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQ ...
  • JQuery Ztree 樹插件配置與應用小結
    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 Hooks 原理" 譯者：前端小智 我們大部分 React 類組件可以保存狀態，而函數組件不能？ 並且類組件具有生命周期，而函數組件卻不能？ React 早期版本，類組件可以通過繼承 來優化一些不必要的渲染，相對於函數組件，R ...
  • CSS 學習手冊
    精心整理了之前的css學習筆記，僅供學習參考使用，禁止商業用途 [TOC] CSS 簡介 1.CSS 簡介 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常存儲在樣式表中 把樣式添加到 HTML 4.0 中，是為瞭解決內 ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類