JS中函數的本質，定義、調用，以及函數的參數和返回值

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/12/12297122.html
-Advertisement-
Play Games

要用面向對象的方式去編程，而不要用面向過程的方式去編程 對象是各種類型的數據的集合，可以是數字、字元串、數組、函數、對象…… 對象中的內容以鍵值對方式進行存儲 對象要賦值給一個變數 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵媽"], "spea ...


要用面向對象的方式去編程，而不要用面向過程的方式去編程

 

對象是各種類型的數據的集合，可以是數字、字元串、數組、函數、對象……

對象中的內容以鍵值對方式進行存儲

對象要賦值給一個變數

    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

上面是對象的字面量的創建方式，簡單直接

除此之外，還有對象的構造函數的創建方式

    var cat=new Object();

還有JavaScript5新增的一種方式

該方式在老版本的瀏覽器中存在相容性問題

    Object.create();

獲取、設置、添加、修改對象的值：

對象.屬性名=屬性值

對象[ 屬性名 ]=屬性值

    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

    cat.name="喵喵1";
    cat.age=6;
    cat.type="英短";
    console.log(cat.name);//喵喵1
    console.log(cat["age"]);//6
    console.log(cat.type);//英短

刪除對象的屬性：

delete 對象.屬性

    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

    cat.type="英短";
    console.log(cat.type);//英短

    delete cat.type;
    console.log(cat.type);//undefined

檢測對象是否擁有某個屬性：

屬性名 in 對象

    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

    console.log("name" in cat);//true
    console.log("type" in cat);//false

對象的枚舉，遍歷對象中的各個屬性

    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

    for(var p in cat){
        console.log(p);
        //name age family speak friend
    }
    var cat={
        "name":"喵1",
        "age":4,
        "family":["喵爸","喵媽"],
        "speak":function(){
            console.log("喵喵~");
        },
        "friend":{
            "name":"喵2",
            "age":5
        }
    }

    for(var p in cat){
        console.log(p+": "+cat[p]);

        console.log(p);//獲取屬性名
        //console.log(cat.p);// 寫法錯誤
        console.log(cat[p]);//獲取屬性值 寫法正確

        console.log(cat["n"+"ame"]);//喵1  []中可以添加字元串的拼接等操作
    }

匿名函數，如：

window.onload=function(){

}

函數一次執行完畢之後，會將局部作用域和局部變數銷毀，因此外部無法調用到

但函數本身並沒有被銷毀，可以進行多次調用執行

 

為什麼要使用函數：

代碼復用（自己的代碼和別人的代碼，如jquery）

統一修改和維護

增加程式的可讀性

 

函數的本質：對象

定義方式：字面量定義、構造函數定義

//字面量定義
function add(n1,n2){

}
//構造函數定義
new Function("n1","n2","....");

函數和對象一樣，可以添加屬性和方法

function person(){
    console.log("cyy");
}
//添加屬性
person.age=25;
//添加方法
person.speak=function(words){
    console.log(words);
}
console.log(person.age);//25
person.speak("hh~");//hh~
person();//cyy

函數可以作為數據值使用：

作為數據值保存在一個變數中

var fn=function(){
    return "這是一個函數";
}
console.log(fn());//這是一個函數
console.log(fn);
/*
ƒ (){
    return "這是一個函數";
}
*/

此時fn列印出來的就是函數本體

函數也可以作為參數來使用：

function fn(){
    alert(1);
}
setTimeout(fn,1000);//此處需要傳函數本體
//此處不能加括弧，如果加了括弧，會立刻調用，而不是等到1秒之後

函數可以作為返回值使用：

function fn(){
    return function(){
        console.log("fn中的fn");
    }
}
//調用
var newFn=fn();
newFn();//fn中的fn

// 或者

fn()();//fn中的fn

函數的三種定義方式

// 字面量方式

    // function 聲明
    function add(){

    }

    // var 賦值表達式
    var add=function(){

    }；

//構造函數
    var add=new Function("num1","num2","return num1+num2");
    add();

區別：

字面量方式比構造函數方式簡潔

最重要的是預解析的區別

funtion聲明的函數，可以先調用，再創建

函數預解析的時候會提前定義

    add();
    function add(){
        return 1;
    }

用var賦值表達式創建的函數，如果先調用，再創建，會報錯

因為var在預解析時賦值為undefined

    add();
    var add=function(){
        return 1;
    };

function聲明和var賦值表達式聲明，這兩種都是很好的選擇

構造函數過於複雜，不推薦使用

 

函數定義的位置

全局作用域下的函數，在哪裡都能調用

add();
function add(){
    add();
}
add();

function fn(){
    add();
}

局部作用域下的函數

    //fn();  無法調用
    function add(){
        fn();
        function fn(){
            fn();
            function fn3(){
                fn();
            }
        }
        function fn2(){
            fn();
        }
    }
    //fn();  無法調用

裡層可以訪問外層的函數，外層不能訪問裡層的函數

代碼塊中定義的函數：

由於js中沒有塊級作用域，所以依然是處於全局作用域中

都會出現預解析中函數被提前聲明

if(true){
    function fn1(){

    }
}else{
    function fn2(){
        
    }
}

改成下麵這樣就可以實現按照條件進行聲明，也是因為預解析的機制

if(true){
    var fn1=function (){

    }
}else{
    var fn2=function fn2(){

    }
}

對象中的函數

使用對象.函數名進行調用

var person={
    name:"cyy",
    setAge:function(age){
        this.age=age;//this指向當前對象
    }
}
person.setSex=function(sex){
    this.sex=sex;
}
person.setAge(25);
person.setSex("girl");
console.log(person.age);//25
console.log(person.sex);//girl

普通函數的調用：

命名函數的調用

function add(){

}
add();

匿名函數的調用：

如果直接在匿名函數後面加上括弧進行調用，會報錯

function(){
    alert(1);
}();//Uncaught SyntaxError: Unexpected token (

解決方法是，將這段匿名函數執行的代碼，賦值給一個變數

var fn=function(){
    alert(1);
}();//1

第二種解決方法：

將函數用括弧括起來，實現匿名函數自執行

(function(){
    alert(1);
})();//1

括弧把整體括起來也能實現一樣的效果

(function(){
    alert(1);
}());//1

或者在function前加上合法的字元也可以，如!+-~

!function(){
    alert(1);
}();//1

或者放在console.log裡面

console.log(function(){
    alert(1);
}());

以上這些方式的共同目的，就是不讓匿名函數的function在開頭位置出現

 

遞歸調用：

自己調用自己

實現階乘

function fn(num){
    if(num<=1) return 1;
    return num*fn(num-1);
}
console.log(fn(5));
/*
return 5*fn(4)
return 5*4*fn(3)
return 5*4*3*fn(2)
return 5*4*3*2*fn(1)
return 5*4*3*2*1
*/

匿名函數也是函數，當它自執行的時候，會創建自己的函數內部作用域，在執行完畢之後會被銷毀，因此在外部無法訪問到自執行的匿名函數內部

//此處創建函數內部作用域
(function add(n1,n2){
    return n1+n2;
})();
console.log(add(3,4));//在全局無法訪問到函數內部的函數add

方法的調用：

對象中的方法，使用對象.方法名進行調用

var operation={
    add:function(n1,n2){
        return n1+n2;
    },
    sub:function(n1,n2){
        return n1-n2;
    }
}
console.log(operation.add(3,4));//7

以下這種也是方法，是點擊瀏覽器時瀏覽器自動幫我們完成調用；

也可以使用方法調用的方式來進行調用

    document.onclick=function(){
        alert(1);
    }
    document.onclick();//等同於點擊屏幕的效果

關於對象中的屬性，什麼時候加引號，什麼時候不加引號

對於合法的標識符，加不加引號都可以；

不合法的標識符，必須加引號，否則會引起報錯

var operation={
    add:function(n1,n2){
        return n1+n2;
    },//合法的屬性名可以不加引號
    sub:function(n1,n2){
        return n1-n2;
    },
    "@":function(){

    }//不合法的屬性名，會引起報錯，必須加引號
}

合法的標識符，調用時使用對象.方法名即可

非法的標識符，調用時使用對象[ " 方法名 " ]

var operation={
    add:function(n1,n2){
        return n1+n2;
    },//合法的屬性名可以不加引號
    sub:function(n1,n2){
        return n1-n2;
    },
    "@":function(word){
        alert(word);
    }//不合法的屬性名，會引起報錯，必須加引號
}
console.log(operation.add(2,5));//7
console.log(operation["@"]("hh~"));//hh~

[ ] 加引號和不加引號的區別

var operation={
    add:function(n1,n2){
        return n1+n2;
    },//合法的屬性名可以不加引號
    sub:function(n1,n2){
        return n1-n2;
    },
    "@":function(word){
        return word;
    },//不合法的屬性名，會引起報錯，必須加引號
    key:function(n1,n2){
        return "key~";
    }
}
var key="add";
console.log(operation.key(2,3));//key~
console.log(operation["key"](2,3));//key~
console.log(operation[key](2,3));//5

方法的鏈式調用

如jquery

$("p").html("html").css("color","red")....

對象中要使用鏈式調用，則方法中需要返回當前對象

var operation={
    add:function(n1,n2){
        console.log(n1+n2);
        return this;
    },
    sub:function(n1,n2){
        console.log(n1-n2);
        return this;
    }
}
operation.add(5,3).sub(4,2);
//要保證operation.add(5,3)能夠返回operation對象
//就需要添加return this

 構造函數的調用：

構造函數命名時一般首字母大寫

調用時用new+函數名，返回值是一個對象

function Person(){

}
var obj=new Person();

js中內置的構造函數，常見的有：

Object()
new Object()

Array()
new Array()

通過new關鍵字來調用

用構造函數的方式定義對象和數組，並添加內容

var person=new Object();
person.name="cyy";

var arr=new Array();
arr[0]=1;

函數的間接調用

.call   第一個參數是改變this的指向，後面傳遞參數的方式就是一個一個傳

.apply   第一個參數是改變this的指向，後面傳遞參數的方式是通過數組來傳遞（或者類數組）

var name="cyy";
var person={};
person.name="cyy2";
person.getName=function(){
    return this.name;//此處的this指向person對象
}
console.log(person.getName());//直接調用  cyy2

console.log(person.getName.call(window));//間接調用，此時this被指向了window，返回的是window.name  cyy
console.log(person.getName.apply(window));//間接調用  cyy
function add(n1,n2){
    return n1+n2;
}
console.log(add(1,2));//直接調用 3
console.log(add.call(window,1,2));//間接調用 3
console.log(add.apply(window,[1,2]));//間接調用 3
function add(n1,n2){
    return n1+n2;
}
var arr=[4,6];
console.log(add.apply(window,arr));//10

只有函數擁有call和apply方法，兩者唯一的區別在於它們的傳參方式

 

函數的參數

參數傳遞的本質是將實參賦值給形參

參數的個數

1、形參個數=實參個數

function add(n1,n2){
    return n1+n2;
}
console.log(add(3,5));

2、實參個數 < 形參個數

多用於有可選參數的情況

function pow(base,pow=2){
    return Math.pow(base, pow);
}
console.log(pow(3));//9
console.log(pow(3,3));//27

3、實參個數 > 形參個數

如果無法得知有多少個實參，可以使用arguments

arguments是一個類數組，用於保存實參的信息

通過arguments[index] 獲取某一個參數

arguments.length 實參的個數

function add(){
    if(arguments.length==0) return;
    var sum=0;
    for(var i=0,len=arguments.length;i<len;i++){
        sum+=arguments[i];
    }
    return sum;
}
console.log(add());//undefined
console.log(add(1,2,3,4,5));//15

arguments 是類數組，實質上還是對象

索引是數組下標，數字開頭的變數名不合法，因此需要加引號

{
    '0': 1,
    '1': 2,
    '3': 4,
    length: 3
}

可以通過arguments來修改參數的值

function speak(m){
    arguments[0]="";
    return m;
}
console.log(speak("hh"));//空

arguments是每個函數中獨有的，不會跨函數

function fn1(){
    console.log(arguments);//Arguments [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    function fn2(){
        console.log(arguments);//Arguments [2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    fn2(2);
}
fn1(1);

arguments.callee  指代函數本身

function add(){
    console.log(arguments.callee);
}
add();

arguments.callee 常用於遞歸中

function factorial(num){
    if(num==1) return 1;
    return num*factorial(num-1);
}
console.log(factorial(5));//120


function factorial(num){
    if(num==1) return 1;
    return num*arguments.callee(num-1);
}
console.log(factorial(5));//120

不過在嚴格模式下，不允許使用arguments.callee（也不允許不使用var聲明變數）

此時的解決方法就是將函數賦值給一個變數，這樣函數本身的名字不會影響調用

"use strict";

var myfn=function factorial(num){
    if(num==1) return 1;
    return num*factorial(num-1);
}
console.log(myfn(5));//120

實參的個數 arguments.length

形參的個數 函數名.length 或者arguments.callee.length

function add(n1,n2){
    if(arguments.length != add.length) throw new Error("請傳入"+add.length+"個參數！");
}
console.log(add(5));//Uncaught Error: 請傳入2個參數！

什麼做參數

1、沒有參數

2、數字做參數

3、字元串（ 如選擇DOM節點，$("p") ）

4、布爾值（保持函數的純潔性，建議一個函數只做一件事情）

5、undefined（可選參數必須放在最後）

6、null

7、數組 

$.each(["a","b","c"],function(index,item)){
    console.log(index);//0 1 2
    console.log(item);//a b c
}

8、對象

$.each({name:"cyy",age:24},function(index,item)){
    console.log(index);//name age
    console.log(item);//cyy 24
}

使用對象作為參數的好處（可以自由調換順序）

function fn(obj){
    var person={};
    person.name=obj.name||"cyy";
    person.age=obj.age||24;
    person.tel=obj.tel||110,
    person.addr=obj.addr||"China";
    return person;
}
var cyy={
    name: "cyy1",
    age:25
}
console.log(fn(cyy));//{name: "cyy1", age: 25, tel: 110, addr: "China"}

9、函數

回調函數，如 setTimeout(fn, time);

 

函數的返回值

return：

表示函數結束

將值返回

什麼可以做返回值：

直接return ，返回值是undefined

數字

字元串 ：alert() 輸出的都是字元串，會預設調用.toString() 方法

布爾值：常用於表單驗證

null 和 undefined

數組

function add(n1,n2){
    return [n1,n2,n1+n2];
}
console.log(add(5,6));//(3) [5, 6, 11]

對象

function fn(){
    return {
        name:"cyy",
        age:25
    }
}

註意return後面不要換行，否則預設是分號，到此結束；於是後面的會報錯

function fn(){
    //return會預設後面是分號，結束
    return 
    {
        name:"cyy",
        age:25
    }
}

函數

需要用()()來調用

 

document.write() 執行時會調用.toString() 方法，嘗試將結果轉換為字元串形式

document.write([1,2,3]);//1,2,3
document.write({
    name:"cyy"
});//[object Object]
document.write({
    name:"cyy",
    toString:function(){
        return "hh~";
    }
});//hh~
function count(){
    var num=1;
    return function(){
        return num++;
    }
}
//每次調用count()時，num都會被初始化
//並且return num++ 是先返回num，再執行++
console.log(count()());//1
console.log(count()());//1
console.log(count()());//1
//count()只執行了一次，因此num只初始化一次
//後面能夠每次都進行遞增+1
var fn=count();
console.log(fn());//1
console.log(fn());//2
console.log(fn());//3

 


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

-Advertisement-
Play Games
更多相關文章
  • HTML塊級、行級元素，特殊字元，嵌套規則
    如果介紹HTML網頁基本標簽的嵌套規則，首先要說的就是元素的分類。元素可以劃分為塊級元素和行級元素，塊級元素是什麼？它可以獨占一行，可以設置寬高度，預設是100%；行級元素與之相反，它的內容決定它的寬高度，至於特殊字元就當成是文字來看！嵌套規則總結如下幾點：1.塊元素可以嵌套行元素2.行元素可以嵌套... ...
  • 網頁DIV+CSS佈局與ifame傳統佈局對比
    什麼是網頁的佈局？網頁佈局就是我們在拿到設計稿後進行切片處理（所謂切圖），然後我們通過DIV+CSS佈局，書寫靜態頁面按照設計稿還原排列，把我們想要實現的功能與內容進行填充！早期的frameset佈局主要書寫管理後臺控制菜單的切換實現局部的刷新，至於頁面的嵌套則是通過iframe ...
  • Electron+Vue – 基礎學習(1): 創建項目
    Electron 和 Vue 都是幹啥的，就不做過多介紹了，可以去官網瞅瞅。下麵總結 Electron+Vue 創建項目，Electron + Vue 創建項目實際上相當於：創建Vue項目 + Electron封裝。 一、創建Vue項目 + Electron封裝 1、創建Vue項目 通過 Vue腳手 ...
  • JS 重載父頁面
    <script language=javascript> window.onload=function(){ //刷新父頁面 window.opener.location.reload(); } </script> 相關連接 JS 彈出小視窗 ...
  • 面向對象+閉包+三種對象的聲明方式（字面式、new Object、構造函數、工廠模式、原型模式、混合模式）
    面向對象： 對代碼的一種抽象，對外統一提供調用介面的編程思想 對象的屬性：事物自身擁有的東西 對象的方法：事物的功能 對象：事物的一個實例 對象的原型：.prototype -> 記憶體地址 -> 存儲了一個對象 function fn(){ return 1; } alert(fn.prototyp ...
  • JS簡易計算器的實現，以及代碼的優化
    用JS實現簡易計算器 首先創建結構和樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...
  • Ajax工作原理及優缺點
    1. Ajax是什麼？ 全稱是 asynchronous javascript and xml，是已有技術的組合，主要用來實現客戶端與伺服器端的非同步通信效果（無需重新載入整個網頁的情況下），實現頁面的局部刷新。 通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新，用於創建快速動態網 ...
  • html基本標簽表單實現交互原理，單選框，覆選框，下拉框介紹
    表單是什麼？表單是前端和伺服器做交互的一種機制，表單收集用戶輸入信息，之後發送或者提交給伺服器。用戶在輸入的信息稱之為內容，內容的文本分為普通和密碼型，用戶通過單選框、覆選框、下拉框（也就是下拉菜單）完成內容信息輸入，最後通過提交按鈕發送給伺服器！這裡要講到瀏覽器怎麼發送給伺服器？涉及到http協議... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類