JavaScript面向?qū)ο笾械腇unction類型個(gè)人分享

LeviDing 發(fā)布于2019-08-26 12:12 / 1952人閱讀

摘要：類型與函數(shù)的概念函數(shù)這樣的一段代碼它只定義一次但是可能被執(zhí)行或調(diào)用多次類型是提供的引用類型之一通過類型創(chuàng)建對(duì)象在中函數(shù)也是對(duì)象的形式存在注意每個(gè)函數(shù)都是以個(gè)對(duì)象與函數(shù)函數(shù)聲明方式示例代碼一笑一人生字面量方式示例代碼一花一世界判斷函數(shù)是否為類

Function類型 Function與函數(shù)的概念

函數(shù)這樣的一段JavaScript代碼,它只定義一次,但是可能被執(zhí)行或調(diào)用多次

Function類型是JavaScript提供的引用類型之一,通過Function類型創(chuàng)建Function對(duì)象

在JavaScript中函數(shù)也是對(duì)象的形式存在.

注意: 每個(gè)函數(shù)都是以個(gè)Function對(duì)象

Function與函數(shù) 1.函數(shù)聲明方式

示例代碼:

function fun() {
    console.log("一笑一人生");
}

2.字面量方式

示例代碼:

var fn = function () {
    console.log("一花一世界");
};
// 判斷函數(shù)是否為Function類型的
console.log(fun instanceof Function);//調(diào)用結(jié)果為 true
console.log(fn instanceof Function);//調(diào)用結(jié)果為 true
//JavaScript中所有的函數(shù)都是Function類型的對(duì)象

3.創(chuàng)建Function類型的對(duì)象 - 就是一個(gè)函數(shù)

語法:
var 函數(shù)名 = new Function(參數(shù),函數(shù)體);

由于函數(shù)的參數(shù)和函數(shù)體都是以字符串形式傳遞給Function的

示例代碼:

var f = new Function("a","console.log(a)");
f(100);//以函數(shù)方式進(jìn)行調(diào)用

Object與Function

示例代碼:

//1. Object與Function都是自身的類型
console.log(Object instanceof Object);//調(diào)用結(jié)果為 true
console.log(Function instanceof Function);//調(diào)用結(jié)果為 true
//2. Object自身是構(gòu)造函數(shù),而構(gòu)造函數(shù)也是函數(shù),是函數(shù)都是Function類型
console.log(Object instanceof Function);//調(diào)用結(jié)果為 true
//3. Function是引用類型,用于創(chuàng)建對(duì)象,是對(duì)象都是Object類型
console.log(Function instanceof Object);//調(diào)用結(jié)果為 true

代碼的執(zhí)行流程

示例代碼:

// 變量的聲明提前
console.log(v);//調(diào)用結(jié)果為 undefined
var v = 100;

// 如果使用函數(shù)聲明方式定義函數(shù)時(shí) - 函數(shù)的聲明提前
fun();//調(diào)用結(jié)果為 一花一世界
function fun() {
    console.log("一花一世界");
}

代碼的執(zhí)行流程分析圖:

Function的apply()方法

apply(thisArg,argArray)方法 - 用于調(diào)用一個(gè)指定的函數(shù)

參數(shù)

thisArg參數(shù) - 可選項(xiàng),在func函數(shù)運(yùn)行時(shí)使用的this值

argArray參數(shù) - 數(shù)組,作為參數(shù)(實(shí)參)的列表

返回值 - 調(diào)用該函數(shù)的返回結(jié)果

示例代碼:

// 定義函數(shù)
function fun(value) {
    console.log("一花一世界" + value);
}
//函數(shù)的調(diào)用方式
// 語法結(jié)構(gòu) : 函數(shù)名稱()
fun("一笑一人生");//調(diào)用結(jié)果為 一花一世界一笑一人生


fun.apply(null,["一葉一孤城"]);//調(diào)用結(jié)果為 一花一世界一葉一孤城

Function的call()方法

Function的call()方法用于調(diào)用一個(gè)函數(shù),并接收指定的this值作為參數(shù),以及參數(shù)列表

thisArg參數(shù) - 在func函數(shù)運(yùn)行時(shí)使用的this值

arg1,arg2...參數(shù) - 指定的參數(shù)類表

返回值 - 調(diào)用該函數(shù)的返回值

示例代碼:

//定義函數(shù)
function fun(value,value2) {
    console.log("一花一世界" + value + value2);
}
// 函數(shù)的調(diào)用方式
//語法結(jié)構(gòu) : 函數(shù)名稱()
fun("一笑一人生","極樂世界");//調(diào)用結(jié)果為 一花一世界一笑一人生極樂世界

fun.apply(null,["一笑一人生","走你"]);//調(diào)用結(jié)果為 一花一世界一笑一人生走你
// call()方法 - 用于調(diào)用一個(gè)函數(shù)
fun.call(null,"一笑一人生","一葉一菩提");//調(diào)用結(jié)果為 一花一世界一笑一人生一葉一菩提

Function的bind()方法

Function的bind()方法用于創(chuàng)建一個(gè)新的函數(shù)(稱為綁定函數(shù)),并接收指定的this值作為參數(shù),以及參數(shù)列表

bind(thisArg,arg1,arg2,...)方法

作用 - 用于創(chuàng)建一個(gè)新函數(shù)(稱為綁定函數(shù))

參數(shù)

thisArg參數(shù) - 當(dāng)綁定函數(shù)被調(diào)用時(shí),該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的this指向

arg1, arg2,...參數(shù) - 當(dāng)綁定函數(shù)被調(diào)用時(shí),這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法 (表示參數(shù)列表)

返回值 - 返回新的函數(shù)

示例代碼:

//定義函數(shù)
function fun(value) {
    console.log("一花一世界" + value);
}



/*
var f = fun.bind();// 相對(duì)于從指定函數(shù)復(fù)制一份出來
console.log(f);
f();*/
fun("一笑一人生");// 調(diào)用結(jié)果為 一花一世界一笑一人生

var f = fun.bind(null,"一葉一菩提");
f();// 調(diào)用結(jié)果為 一花一世界一葉一菩提

重載是什么

重載的含義:

定義多個(gè)同名的函數(shù),但具有數(shù)量不同的參數(shù)

調(diào)用函數(shù),根據(jù)傳遞參數(shù)的個(gè)數(shù)調(diào)用指定的函數(shù)

注意: JavaScript中函數(shù)沒有重載如果同時(shí)定義多個(gè)同名的函數(shù)時(shí),則只有最后一個(gè)定義的函數(shù)時(shí)有效的

示例代碼:

function add(a,b){
    return a + b;
}
function add(a,b,c){
    return a + b + c;
}
function add(a,b,c,d){
    return a + b + c + d;
}
//理想效果:
add(1,2);// 3
add(1,2,3);// 6
add(1,2,3,4);// 10

//實(shí)際效果:
// JavaScript的函數(shù)不存在重載 -> 當(dāng)函數(shù)同名時(shí)，最后一次定義的函數(shù)有效
console.log(add(1,2));// NaN
console.log(add(1,2,3));// NaN
console.log(add(1,2,3,4));// 10

arguments對(duì)象

JavaScript提供arguments對(duì)象

該對(duì)象存儲(chǔ)當(dāng)前函數(shù)中所有的參數(shù)(指的是實(shí)參) - 類數(shù)組對(duì)象

應(yīng)用場(chǎng)景 - 該對(duì)象一般用于函數(shù)中

作用 - 用于獲取當(dāng)前函數(shù)的所有參數(shù)

屬性

length - 函數(shù)所有參數(shù)(指的是實(shí)參)的個(gè)數(shù)

用法 - 模擬實(shí)現(xiàn)函數(shù)的重載

示例代碼:

function add() {
    var num = arguments.length;
    switch (num) {
        case 2:
            return arguments[0] + arguments[1];
            break;
        case 3:
            return arguments[0] + arguments[1] + arguments[2];
            break;
        case 4:
            return arguments[0] + arguments[1] + arguments[2] + arguments[3];

    }
}
console.log(add(1,2));//調(diào)用結(jié)果為 3
console.log(add(1,2,3));//調(diào)用結(jié)果為 6
console.log(add(1,2,3,4));//調(diào)用結(jié)果為 10

函數(shù)的遞歸

函數(shù)的遞歸 - 就是在指定函數(shù)的函數(shù)體中調(diào)用自身函數(shù)

示例代碼:

function fun() {
    // 當(dāng)前函數(shù)的邏輯內(nèi)容
    console.log("this is function");
    // 調(diào)用自身函數(shù) - 實(shí)現(xiàn)遞歸
    fun();
}
fun();

控制臺(tái)效果解析圖:

解決遞歸死循環(huán)的方法

示例代碼:

function fn(v) {
    console.log(v);
    /* 語句判斷 */
    if (v >= 10) {
    /* 結(jié)束語句循環(huán) */
        return;
    }
    //fn(v + 1);
    arguments.callee(v + 1);
}
//fn(0);


var f = fn;
fn = null;
f(0);
console.log(f);

控制臺(tái)調(diào)用圖:

特殊函數(shù) 匿名函數(shù)

JavaScript語法中，定義函數(shù)必須定義函數(shù)名稱 -> 匿名函數(shù)

匿名函數(shù)的作用:

將匿名函數(shù)作為參數(shù)傳遞給其他函數(shù) -> 回調(diào)函數(shù)

將匿名函數(shù)用于執(zhí)行一次性任務(wù) -> 自調(diào)函數(shù)

回調(diào)函數(shù)

當(dāng)一個(gè)函數(shù)為參數(shù)傳遞給另一個(gè)函數(shù)時(shí),作為參數(shù)的函數(shù)被稱之為回調(diào)函數(shù)

示例代碼:

// 作為另一個(gè)函數(shù)(fn)的參數(shù)的函數(shù)(one) - 回調(diào)函數(shù)
var one = function(){
    return 1;
}

function fn(v){
    return v();
}
// one函數(shù)僅是作為fn函數(shù)的參數(shù)出現(xiàn) - 并不是調(diào)用
// var result = fn(one);
/*
    以上代碼等價(jià)于以下代碼
    以下代碼中作為參數(shù)的函數(shù) - 匿名回調(diào)函數(shù)
  */
var result = fn(function(){return 1;});

console.log(result);// 1

回調(diào)函數(shù)分析圖:

回調(diào)函數(shù)的參數(shù)

示例代碼:

// 作為另一個(gè)函數(shù)(fn)的參數(shù)的函數(shù)(one) -> 回調(diào)函數(shù)
var one = function(w){
    return w;
}

function fn(v){// 形參是一個(gè)函數(shù)
    return v(100);// 函數(shù)的調(diào)用體
}

// var result = fn(one);// 實(shí)參必須是一個(gè)函數(shù)

var result = fn(function(w){return w;});

console.log(result);

回調(diào)函數(shù)的參數(shù)的分析圖:

自調(diào)函數(shù)

自調(diào)函數(shù) - 定義即調(diào)用的函數(shù)

第一個(gè)小括號(hào) - 用于定義函數(shù)

第二個(gè)小括號(hào) - 用于調(diào)用函數(shù)

示例代碼:

// 全局作用域 - 生命周期：JavaScript文件從執(zhí)行到執(zhí)行完畢
(function(value){
    // 函數(shù)作用域 - 生命周期：從函數(shù)調(diào)用到調(diào)用完畢
    console.log("一花一世界" + value);
})("一葉一菩提");


// 表達(dá)式語法
(function(value){
    // 函數(shù)作用域 - 生命周期：從函數(shù)調(diào)用到調(diào)用完畢
    console.log("一花一世界" + value);
}("一笑一人生"));

作為值的函數(shù)

將一個(gè)函數(shù)作為另一個(gè)函數(shù)的結(jié)果進(jìn)行返回,作為結(jié)果為返回的函數(shù)稱之為止的函數(shù)

示例代碼:

var one = function(){
    return 100;
};
// 作為值的函數(shù) -> 內(nèi)部函數(shù)的一種特殊用法
function fun(){
    var v = 100;
    // 內(nèi)部函數(shù)
    return function(){
        return v;
    };
}

var result = fun();
console.log(fun()());// 調(diào)用結(jié)果為 100

作用域鏈

示例代碼:

var a = 10;// 全局變量
function fun(){
    var b = 100;// fun函數(shù)作用域的局部變量
    // 內(nèi)部函數(shù)
    function fn(){
        var c = 200;// fn函數(shù)作用域的局部變量
        // 內(nèi)部函數(shù)
        function f(){
            var d = 300;// f函數(shù)作用域的布局變量
            // 調(diào)用變量
            console.log(a);// 10
            console.log(b);// 100
            console.log(c);// 200
            console.log(d);// 300
        }
        f();
        // 調(diào)用變量
        // console.log(a);// 10
        // console.log(b);// 100
        // console.log(c);// 200
        // console.log(d);// d is not defined
    }
    fn();
    // 調(diào)用變量
    // console.log(a);// 10
    // console.log(b);// 100
    // console.log(c);// c is not defined
    // console.log(d);// d is not defined
}
fun();

作用域鏈的分析圖:

閉包

閉包是什么:

JavaScript允許函數(shù)嵌套,并且內(nèi)部函數(shù)可以訪問定義在外部函數(shù)中的所有變量和函數(shù),以及外部函數(shù)能訪問的所有變量和函數(shù).但是外部函數(shù)卻不能夠訪問定義在內(nèi)部函數(shù)中的變量和函數(shù)

示例代碼:

var n;// 定義變量,但不初始化值
function fun() {// 函數(shù)作用域
    var v = 100;
    // 進(jìn)行初始化值 - 一個(gè)函數(shù)
    n = function () {
        console.log(v);
    };
    // n();
}
fun();

n();// 調(diào)用結(jié)果為 100

閉包的特點(diǎn)與作用

閉包的特點(diǎn):

局部變量: 在函數(shù)中定義有共享意義(比如: 緩存,計(jì)數(shù)器等等)的局部變量

內(nèi)部函數(shù): 在函數(shù)(f)中聲明有內(nèi)嵌函數(shù),內(nèi)嵌函數(shù)(g)對(duì)函數(shù)(f)中的局部變量進(jìn)行訪問

外部使用: 函數(shù)(f)向外返回此內(nèi)嵌函數(shù)(g),外部可以通過此內(nèi)嵌函數(shù)持有并訪問聲明在函數(shù)(f)中的局部變量,而此變量在外部是通過其他途徑無法訪問的

閉包的作用:

提供可共享的局部變量

保護(hù)共享的局部變量.提供專門的讀寫變量的函數(shù)

避免全局污染

GPU云服務(wù)器云服務(wù)器 javascript 面向?qū)ο?/a> javascript面向?qū)ο?/a> javascript面向?qū)ο缶幊?/a> javascript面向?qū)ο缶幊讨改?/a>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108220.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LeviDing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

炭云：上海CN2/上海聯(lián)通/湖南聯(lián)通/廣州移動(dòng)nat;100GB流量/300Mbps/共享IP/KV

閱讀 4426·2021-11-19 09:59
發(fā)現(xiàn)一個(gè)非常好用的RTC（實(shí)時(shí)音視頻通信）方案，做直播和視頻通話都很牛

閱讀 3344·2021-10-12 10:12
云服務(wù)器商怎么看主機(jī)-如何購買云服務(wù)器呢？

閱讀 2649·2021-09-22 15:25
@import '~common/stylus/mixin'中 ~ 的作用

閱讀 3352·2019-08-30 15:55
微信小程序新單位rpx與自適應(yīng)布局

閱讀 1199·2019-08-29 11:27
Block Formatting Context (Flow Root)

閱讀 1479·2019-08-28 18:06
websocket 二進(jìn)制數(shù)據(jù)傳輸基礎(chǔ)準(zhǔn)備工作

閱讀 2753·2019-08-26 13:41
ES6-前世今生（0）

閱讀 2567·2019-08-26 13:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript面向?qū)ο笾械腇unction類型個(gè)人分享

相關(guān)文章

JavaScript面向對(duì)象中的錯(cuò)誤與異常個(gè)人分享

JavaScript面向對(duì)象中的原型個(gè)人分享

JavaScript面向對(duì)象中的Array類型個(gè)人分享

JavaScript面向對(duì)象中的this關(guān)鍵字個(gè)人分享

JavaScript面向對(duì)象中的繼承個(gè)人分享

發(fā)表評(píng)論

0條評(píng)論

LeviDing

男|高級(jí)講師

TA的文章

炭云：上海CN2/上海聯(lián)通/湖南聯(lián)通/廣州移動(dòng)nat;100GB流量/300Mbps/共享IP/KV

發(fā)現(xiàn)一個(gè)非常好用的RTC（實(shí)時(shí)音視頻通信）方案，做直播和視頻通話都很牛

云服務(wù)器商怎么看主機(jī)-如何購買云服務(wù)器呢？

@import '~common/stylus/mixin'中 ~ 的作用

微信小程序新單位rpx與自適應(yīng)布局

Block Formatting Context (Flow Root)

websocket 二進(jìn)制數(shù)據(jù)傳輸基礎(chǔ)準(zhǔn)備工作

ES6-前世今生（0）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript面向?qū)ο笾械腇unction類型個(gè)人分享

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！