深入淺析JavaScript中的Function類型

字號:


    Function是javascript里最常用的一個概念,javascript里的function是最容易入手的一個功能,但它也是javascript最難理解最難掌握的一個概念。
    1. Function類型是js中引用類型之一,每個函數(shù)實際上都是Function類型的實例對象,具有自己的屬性和方法。正因為函數(shù)式對象,所以函數(shù)名實際上也是一個指向函數(shù)對象的指針。
    2. 常用的函數(shù)定義方式
    1. 函數(shù)聲明:
    function sum(a , b ){
    return a+b;
    }
    2. 表達(dá)式:
    var sum = function(){
    return a+b;
    }; //注意分號
    //兩種方式的區(qū)別:
    //解釋器會率先讀取函數(shù)聲明,并使其在執(zhí)行之前可以訪問,而使用表達(dá)式則必須等到解析器執(zhí)行到它所在的代碼行,才會真正被解釋執(zhí)行(變量聲明提前,而值留在原地)
    alert (sum (10 ,10));
    function sum(a ,b){
    return a+b;
    }
    //↑上面的代碼會正常執(zhí)行,因為在代碼執(zhí)行前,解析器通過函數(shù)聲明提升,讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中,放到代碼樹的頂部
    alert (typeof sum);
    alert(sum(10 , 10));
    var sum = function (a ,b){
    return a+b;
    }
    //↑報錯,原因在于函數(shù)位于一個初始化語句中,不是一個函數(shù)聲明,不會被提前,而只會把var sum提前,用typeof操作符顯示sum是undefined,所以報錯
    3. 函數(shù)名僅僅保存指向函數(shù)對象的指針,因此函數(shù)名與包含對象指針的其他變量沒什么不同,也就是說,一個函數(shù)對象可以有多個名字:
    function sum(a , b ){
    return a+b;
    }
    console.log(sum(2 ,3)); //5
    var anotherSum = sum; //變量anotherSum也指向了同一個函數(shù)對象
    console.log(anotherSum(4 , 5)); //9
    sum = null; //sum變量不再保存函數(shù)對象的指針了
    console.log(anotherSum(1 , 3)); //anotherSum這個變量仍能調(diào)用
    4. JS為何沒有重載這個概念。
    function add(a){
    return a+3 ;
    }
    function add(a){
    return a+5;
    }
    var result = add(3); //8
    //兩個函數(shù)同名了,結(jié)果只能是后一個函數(shù)覆蓋前一個,所以不能重載
    5. 函數(shù)的內(nèi)部屬性:函數(shù)內(nèi)部,有兩個特殊的對象,arguments和this
    1. arguments:
    arguments是個類數(shù)組對象,包含著傳入函數(shù)的所有參數(shù),這個對象有一個叫callee的屬性,屬性值是一個指針,指向擁有這個arguments對象的函數(shù)本身
    function foo (){
    var a =arguments.callee;
    return a.toString();
    }
    foo();
    /*
    返回結(jié)果:
    "function sum(){
    var a =arguments.callee;
    return a.toString();
    }"
    也就是說,一個函數(shù)內(nèi)部,arguments.callee指的就是這個函數(shù)本身。這個函數(shù)在遞歸調(diào)用時有點(diǎn)用,有許多缺陷,在ES5嚴(yán)格模式被移除
    */
    2. this:簡單來說,this指的就是函數(shù)執(zhí)行的環(huán)境對象,在哪個對象中執(zhí)行,this就指哪個對象。展開來說比較復(fù)雜,單開一篇
    //TODO:
    3. ES5規(guī)范了函數(shù)的另一個屬性:caller,這個函數(shù)屬性指的是調(diào)用當(dāng)前函數(shù)的函數(shù)
    function inner(){
    console.log(inner.caller);
    }
    function outer(){
    inner();
    }
    outer();
    //function outer(){
    inner();
    }
    4. length屬性:表示函數(shù)希望接受的參數(shù)個數(shù)
    function add(a ,b ,c){
    return a+b+c;
    }
    add.length; //3
    5. 著名的prototype屬性,簡單來說,是一個對象,是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的一個對象,包含可以由特定類型的所有實例共享的屬性和方法。展開來說比較復(fù)雜,單開一篇
    //TODO:
    6. 函數(shù)的兩個方法:call()和apply(),作用都是在特定的作用域中調(diào)用函數(shù),實際上就是設(shè)置函數(shù)內(nèi)部的this值
    1. call():與apply()方法類似,區(qū)別在接收參數(shù)的方式不同,參數(shù)必須逐個列出來。
    2. apply():接收兩個參數(shù),一個是函數(shù)運(yùn)行的作用域,另一個是參數(shù)數(shù)組,可以是數(shù)組,也可以是arguments這個類數(shù)組對象
    function sum(a , b){
    return a+b;
    }
    function callSum(a , b){
    return sum.apply(this , arguments);
    }//第二個參數(shù)是一個類數(shù)組對象arguments
    function callSum1(a , b){
    return sum.apply(this, [a , b]);
    } //第二個參數(shù)是一個數(shù)組
    console.log(callSum(2 , 3)); //5
    console.log(callSum1(3 ,5)); //8
    3. 傳遞參數(shù)并調(diào)用函數(shù)并非call()和apply()的用武之地,二者真正強(qiáng)大的地方是擴(kuò)充函數(shù)運(yùn)行的作用域
    var color = 'red';
    var obj = {
    color :'blue'
    }
    function foo(){
    console.log(this.color);
    }
    foo(); //'red'
    foo.call(this);//'red'
    foo.call(obj); //'blue'
    //最后一次調(diào)用foo()函數(shù)的執(zhí)行環(huán)境變了,其中的this指向了obj對象,所以是'blue'
    使用call()和apply()擴(kuò)充作用域的最大好處,就是使對象與方法之間解耦
    4. ES5定義了一個新方法:bind(),返回一個函數(shù),這個函數(shù)中this值會被綁定到傳給bind()函數(shù)的值
    var x = 9;
    var module = {
    x: 81,
    getX: function() { return this.x; }
    };
    module.getX(); // 81
    var retrieveX = module.getX;
    retrieveX(); // 9, 因為在這種情況下, "this" 指向全局變量
    var boundGetX = retrieveX.bind(module);//把retrieveX()函數(shù)中的this永遠(yuǎn)與module綁定,再調(diào)用這個函數(shù)永遠(yuǎn)都是在module對象中運(yùn)行
    boundGetX(); // 81
    以上所述是小編給大家介紹的深入淺析JavaScript中的Function類型介紹,希望對大家有所幫助