javascript基礎教程之函數呼叫模式實例匯總-js教程-PHP中文網

只有函數被呼叫時，才會執行。呼叫運算子是跟在任何產生一個函數值的表達式之後的一對圓括號，圓括號內可包含零個或多個用逗號隔開的表達式。每個表達式產生一個參數值，每個參數值被賦予函數宣告時定義的形參名

　　javascript一共有4種呼叫模式：函數呼叫模式、方法呼叫模式、建構器呼叫模式和間接呼叫模式

【1】函數呼叫模式

　　當一個函數並非一個物件的屬性時，那麼它就是被當做一個函數來呼叫的。對於普通的函數呼叫來說，函數的傳回值就是呼叫表達式的值

function add(x,y){    
   return x+y;
}
var sum = add(3,4);
console.log(sum)//7

登入後複製

　　使用函數呼叫模式呼叫函數時，非嚴格模式下，this被綁定到全域物件；在嚴格模式下，this是undefined

function add(x,y){
    console.log(this);//window}    
add();

登入後複製

function add(x,y){    
&#39;use strict&#39;;
    console.log(this);//undefined
}    
add();//window

登入後複製

　　因此，'this'可以用來判斷當前是否是嚴格模式

var strict = (function(){return !this;}());

登入後複製

重寫

　　因為函數調用模式的函數中的this綁定定到全域對象，所以會發生全域屬性被重寫的現象

var a = 0;
function fn(){
    this.a = 1;
}
fn();
console.log(this,this.a,a);//window 1 1

登入後複製

【2】方法呼叫模式

　　當一個函數被儲存為物件的一個屬性時，我們稱它為一個方法。當一個方法被呼叫時，this被綁定到該物件。如果呼叫表達式包含一個提取屬性的動作，那麼它就是被當做一個方法來呼叫

var o = {
    m: function(){
        console.log(1);
    }
};
o.m();//1

登入後複製

方法可以使用this存取自己所屬的對象，所以它能從對像中取值或對對象進行修改。 this到物件的綁定發生在呼叫的時候。透過this可取得它們所屬對象的上下文的方法稱為公共方法

var o = {
    a: 1,
    m: function(){
        return this;
    },
    n: function(){
        this.a = 2;
    }
};
console.log(o.m().a);//1
o.n();
console.log(o.m().a);//2

登入後複製

　任何函數只要作為方法調用實際上都會傳入一個隱式的實參——這個實參是一個對象，方法調用的母體就是這個對象，通常來講，基於那個對象的方法可以執行多種操作，方法調用的語法已經很清晰地表明了函數將基於一個對象進行操作

rect.setSize(width,height);
setRectSize(rect,width,height);

登入後複製

　　假設上面兩行代碼的功能完全一樣，它們都作用於一個假定的物件rect。可以看出，第一行的方法呼叫語法非常清楚地表明這個函數執行的載體是rect對象，函數中的所有操作都將基於這個對象

　　和變數不同，關鍵字this沒有作用域的限制，巢狀的函數不會從呼叫它的函數繼承this。如果巢狀函數作為方法調用，其this的值指向調用它的物件。如果巢狀函數作為函數調用，其this值不是全域物件(非嚴格模式下)就是undefined(嚴格模式下)

var o = {
    m: function(){
         function n(){
             return this;
         }
         return n();
    }
}
console.log(o.m());//window

登入後複製

var o = {
    m: function(){
         function n(){
             &#39;use strict&#39;;
             return this;
         }
         return n();
    }
}
console.log(o.m());//undefined

登入後複製

　如果想存取這個外部函數的this值，需要將this的值保存在一個變數裡，這個變數和內部函數都同在一個作用域內。通常使用變數self或that來保存this

var o = {
    m: function(){
        var self = this;
        console.log(this === o);//true
         function n(){
             console.log(this === o);//false
             console.log(self === o);//true
             return self;
         }
         return n();
    }
}
console.log(o.m() === o);//true

登入後複製

【3】建構子呼叫模式

#　　如果函數或方法呼叫之前帶有關鍵字new，它就構成建構子呼叫

function fn(){    
   this.a = 1;
};
var obj = new fn();
console.log(obj.a);//1

登入後複製

　　如果建構函式呼叫在圓括號內包含一組實參列表，先計算這些實參表達式，然後傳入函式內

function fn(x){    
  this.a = x;
};
var obj = new fn(2);
console.log(obj.a);//2

登入後複製

　　如果建構子沒有形參，javascript建構函式呼叫的語法是允許省略實參列表和圓括號的。凡是沒有形參的建構子呼叫都可以省略圓括號

var o = new Object();//等价于
var o = new Object;

登入後複製

　　[注意]儘管建構子看起來像一個方法調用，它依然會使用這個新物件作為調用上下文。也就是說，在表達式new o.m()中，呼叫上下文並不是o

var o = {
    m: function(){
        return this;
    }
}
var obj = new o.m();
console.log(obj,obj === o);//{} false
console.log(obj.constructor === o.m);//true

登入後複製

建構子通常不使用return關鍵字，它們通常初始化新對象，當建構函式的函式體執行完畢時，它會顯式返回。在這種情況下，建構函式呼叫表達式的計算結果就是這個新物件的值

function fn(){    
  this.a = 2;
}var test = new fn();
console.log(test);//{a:2}

登入後複製

　　如果建構函式使用return語句但沒有指定回傳值，或傳回一個原始值，那麼這時將忽略傳回值，同時使用這個新物件作為呼叫結果

function fn(){
    this.a = 2;
    return;
}
var test = new fn();
console.log(test);//{a:2}

登入後複製

如果建構子明確地使用return語句傳回一個對象，那麼呼叫表達式的值就是這個物件

var obj = {a:1};
function fn(){
    this.a = 2;
    return obj;
}
var test = new fn();
console.log(test);//{a:1}

登入後複製

###【4】間接呼叫模式######　　javascript中函數也是對象，函數物件也可以包含方法。 call()和apply()方法可以用來間接地呼叫函數######　　這兩個方法都允許明確指定呼叫所需的this值，也就是說，任何函數可以作為任何物件的方法來調用，即使這個函數不是那個物件的方法。兩個方法都可以指定調用的實參。 call()方法使用它自有的實參列表作為函數的實參，apply()方法則要求以數組的形式傳入參數###

var obj = {};
function sum(x,y){
    return x+y;
}
console.log(sum.call(obj,1,2));//3
console.log(sum.apply(obj,[1,2]));//3

登入後複製

以上是javascript基礎教程之函數呼叫模式實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！