JavaScript...Function類型...

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

摘要：類型與函數(shù)函數(shù)是這樣一段代碼它只定義一次但可能被執(zhí)行或調(diào)用多次類型是提供的引用類型之一通過(guò)類型創(chuàng)建對(duì)象在中函數(shù)也是以對(duì)象的形式存在的每個(gè)函數(shù)都是一個(gè)對(duì)象函數(shù)名本質(zhì)就是一個(gè)變量名是指向某個(gè)對(duì)象的引用函數(shù)聲明方式字面量方式判斷函數(shù)是否為類型的中

Function類型 Function與函數(shù)

函數(shù)是這樣一段JavaScript代碼它只定義一次但可能被執(zhí)行或調(diào)用多次
Function類型是JavaScript提供的引用類型之一通過(guò)Function類型創(chuàng)建Function對(duì)象
在JavaScript中函數(shù)也是以對(duì)象的形式存在的每個(gè)函數(shù)都是一個(gè)Function對(duì)象
函數(shù)名本質(zhì)就是一個(gè)變量名是指向某個(gè)Function對(duì)象的引用

// 1.函數(shù)聲明方式
function fun(){
    console.log("this is function");
}
// 2.字面量方式
var fn = function(){
    console.log("this is function too");
}
// 判斷函數(shù)是否為Function類型的
console.log(fun instanceof Function);// true
console.log(fn instanceof Function);// 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);// true
console.log(Function instanceof Function);// true
// 2.Object自身是構(gòu)造函數(shù)，而構(gòu)造函數(shù)也是函數(shù)，是函數(shù)都是Function類型
console.log(Object instanceof Function);// true
// 3.Function是引用類型，用于創(chuàng)建對(duì)象，是對(duì)象都是Object類型
console.log(Function instanceof Object);// true

代碼的執(zhí)行流程

..變量的聲明提前
console.log(v);//undefined
var v = 100;
//如果使用函數(shù)聲明方式定義函數(shù)時(shí) - 函數(shù)的聲明提前
fun()
function fun(){
    console.log("this is function");
}

Function類型

Function的apply()方法

Function的apply()方法用于調(diào)用一個(gè)函數(shù) 并且接受指定的this值以及一個(gè)數(shù)組作為參數(shù)

// 定義函數(shù)
function fun(value){
    console.log("this is " + value);
}
// 函數(shù)的調(diào)用方式
fun("function");// 語(yǔ)法結(jié)構(gòu)：函數(shù)名稱()
/*
    apply(thisArg,argArray)方法 -> 用于調(diào)用一個(gè)指定函數(shù)
    * 參數(shù)
      * thisArg - this
      * argArray - 數(shù)組，作為參數(shù)(實(shí)參)的列表
  */
fun.apply(null, ["function"]);

Function的call()方法

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

//定義函數(shù)
function fun(value value2){
    console.log("this is" + value);
}
//函數(shù)的調(diào)用方式
fun("function","張三");//語(yǔ)法結(jié)構(gòu):函數(shù)名稱()

fun.apply(null,["function","張三"]);
//call()方法 - 用于調(diào)用一個(gè)函數(shù)
fun.call(null,"function","張三");

Function的bind()方法

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

// 定義函數(shù)
function fun(value){
    console.log("this is " + value);
}
/*
    bind(thisArg, arg1, arg2, ...)方法
    * 作用 - 用于創(chuàng)建一個(gè)新函數(shù)(稱為綁定函數(shù))
    * 參數(shù)
      * thisArg - this
      * arg1, arg2, ... - 表示參數(shù)列表
    * 返回值 - 返回新的函數(shù)
 */
// var f = fun.bind();// 相對(duì)于從指定函數(shù)復(fù)制一份出來(lái)

fun("李四");// this is 李四

var f = fun.bind(null, "張三");
f();// this is 張三

重載是什么

在其他開(kāi)發(fā)語(yǔ)言中函數(shù)具有一種特性叫做重載重載就是定義多個(gè)同名的函數(shù) 但每一個(gè)函數(shù)接受的參數(shù)的個(gè)數(shù)不同程序會(huì)根據(jù)用時(shí)傳遞的實(shí)參個(gè)數(shù)進(jìn)行判斷具體調(diào)用的是哪個(gè)函數(shù)
但是在JaveScript中函數(shù)是沒(méi)有重載現(xiàn)象的也就是說(shuō) 如果同時(shí)定義多個(gè)同名的函數(shù) 只有最后一個(gè)定義的函數(shù)是有效的

/*
    重載的含義
    1.定義多個(gè)同名的函數(shù)，但具有數(shù)量不同的參數(shù)
    2.調(diào)用函數(shù)，根據(jù)傳遞參數(shù)的個(gè)數(shù)調(diào)用指定的函數(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

// 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ì)象可以模擬函數(shù)重載的現(xiàn)象 arguments對(duì)象是函數(shù)內(nèi)部的本地變量 arguments已經(jīng)不再是函數(shù)的屬性了
arguments對(duì)象可以獲取函數(shù)的所有參數(shù) 但arguments對(duì)象并不是一個(gè)數(shù)組而是一個(gè)類數(shù)組對(duì)象(沒(méi)有數(shù)組特有的方法)

/*
    JavaScript提供arguments對(duì)象
    * 該對(duì)象存儲(chǔ)當(dāng)前函數(shù)中所有的參數(shù)(實(shí)參) - 類數(shù)組對(duì)象
    * 場(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];
            break;
    }
}
console.log(add(1,2));// 3
console.log(add(1,2,3));// 6
console.log(add(1,2,3,4));// 10

函數(shù)的遞歸

調(diào)用自身的函數(shù)被稱之為遞歸函數(shù) 在某種意義上說(shuō) 遞歸近似于循環(huán) 兩者都有重復(fù)執(zhí)行相同的代碼并且兩者都需要一個(gè)終止條件以避免無(wú)限循環(huán)或者無(wú)限遞歸

/* 函數(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();
*/

function fn(v){
    console.log(v);
    if (v >= 10) {
        return;
    }
    // fn(v + 1);
    arguments.callee(v + 1);
}
// fn(0);

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

特殊函數(shù)

匿名函數(shù)

JavaScript可以將函數(shù)作為數(shù)據(jù)使用作為函數(shù)本體它像普通的數(shù)據(jù)一樣不一定要有名字默認(rèn)名字的函數(shù)被稱之為匿名函數(shù)

function(a){return a;}
/*
    匿名函數(shù)的作用：
    1.將匿名函數(shù)作為參數(shù)傳遞給其他函數(shù) - 回調(diào)函數(shù)
    2.將匿名函數(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ù)的優(yōu)點(diǎn):
1.它可以在不做命名的的情況下傳遞函數(shù)(這意味著可以節(jié)省全局變量)
2.可以將一個(gè)函數(shù)調(diào)用操作委托給另一個(gè)函數(shù)(這意味著可以節(jié)省一些代碼編寫(xiě)工作)
3.回調(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ù)

自調(diào)函數(shù)就是定義函數(shù)后自行調(diào)用

/*
    自調(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("this is " + value);
})("function");
// 表達(dá)式語(yǔ)法
(function(value){
    // 函數(shù)作用域 - 生命周期：從函數(shù)調(diào)用到調(diào)用完畢
    console.log("this is " + value);
}("function"));

!function(value){
    // 函數(shù)作用域 - 生命周期：從函數(shù)調(diào)用到調(diào)用完畢
    console.log("this is " + value);
}("function");

+function(value){
    // 函數(shù)作用域 - 生命周期：從函數(shù)調(diào)用到調(diào)用完畢
    console.log("this is " + value);
}("function");

作為值的函數(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(result);// one函數(shù)
//console.log(result());// 100

console.log(fun()());

閉包

作用域鏈

很多開(kāi)發(fā)語(yǔ)言中都具有塊級(jí)作用域但ECMAScript5版本中并沒(méi)有跨級(jí)作用域這經(jīng)常會(huì)導(dǎo)致理解上的困惑
雖然ECMAScript5版本沒(méi)有塊級(jí)作用域但具有函數(shù)作用域在某個(gè)函數(shù)內(nèi)部定義的便利的作用域就是該函數(shù)作用域
每一段JavaScript代碼(全局代碼或函數(shù))都有一個(gè)與之關(guān)聯(lián)的作用域鏈

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ù)可以訪問(wèn)定義在外部函數(shù)中的所有變量和函數(shù) 以及外部函數(shù)能訪問(wèn)的所有變量和函數(shù) 但是外部函數(shù)卻不能夠訪問(wèn)定義在內(nèi)部函數(shù)中的變量和函數(shù)
當(dāng)內(nèi)部函數(shù)以某一種方式被任何一個(gè)外部函數(shù)作用域訪問(wèn)時(shí) 一個(gè)閉包距產(chǎn)生了
閉包就是詞法表示包括不必計(jì)算的變量的函數(shù) 也就是說(shuō) 該函數(shù)能使用函數(shù)外定義的變量

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

n();// 100

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

閉包的特點(diǎn):
1.局部變量:在函數(shù)中定義有共享意義(如緩存計(jì)數(shù)器等)的局部變量(注:定義全局變量會(huì)對(duì)外造成污染)
2.內(nèi)部函數(shù):在函數(shù)(f)中聲明有內(nèi)嵌函數(shù) 內(nèi)嵌函數(shù)(g)對(duì)函數(shù)(f)長(zhǎng)得局部變量進(jìn)行訪問(wèn)
3.外部使用:函數(shù)(f)向外返回此內(nèi)嵌函數(shù)(g) 外部可以通過(guò)此內(nèi)嵌函數(shù)持有并訪問(wèn)聲明在函數(shù)(f)中的變量而此變量在外部是通過(guò)其他途徑無(wú)法訪問(wèn)的
閉包的作用:
1.提供可共享的局部變量
2.保護(hù)共享的局部變量提供專門的讀寫(xiě)變量的函數(shù)
3.避免全局污染