web開發中函數調用以及this的指向的示例分析

這篇文章主要為大家展示了“web開發中函數調用以及this的指向的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“web開發中函數調用以及this的指向的示例分析”這篇文章吧。

一、函數的調用方式

1.作為函數，一種直接易懂的方式（即函數調用模式）。

2.作為方法，方法是連接在對象上的，被這個對象調用，這種形式就是面向對象編程。

3.作為構造器，在構造的過程中一個新的對象被創建出來。

4.經由函數的apply或者call方法。

二、函數參數

1.傳入參數

（1）傳入變量多于函數定義變量。

（2）函數定義變量多余傳入變量，多出來的變量是undefined

2.函數在被調用的時候，隱形的傳入兩個參數argument和this（即argument和this被悄悄傳入函數，作用在函數的作用域中）。

（1）argument：函數調用時傳入函數的變量集合（有arguemnt.length屬性）

eg：argument[0]指的是傳入函數的第一個參數

（2）this關聯一個對象。

根據調用方式的不同，this的指向也不同。因此this為調用的上下文（invocation context）。

三、this的指向

1.函數調用模式 （this->window）

這個函數并不屬于任何對象的屬性。

function fn1(){
 //some code
}
fn1();
或著：
var fn2=function(){
 //some code
}
fn2();
使用這種方式調用函數，函數的上下文是全局上下文（global context即window）。this->window。

2.方法調用模式   (this->方法所屬的對象)

這個函數是一個對象的屬性，當這個函數被調用時，這個函數被視為這個對象的一個方法。

var obj={
 //some code;
};
obj.getname=function(){
 //some name
}
obj.getname();
函數的上下文是這個對象（例子中的 obj）。this->obj

3.構造器調用模式 （this->創建的新對象）

函數被作為構造器調用時有以下特點：

一個新的對象被創建出來；

這個新的對象被傳遞給這個構造器作為this參數，也就是說這個新的對象是構造器函數的上下文；

如果沒有顯性的return語句，這個新的對象會被隱式的return（就是悄咪咪的被return了），并成為這個構造器的值。

function Fn(){
 this.a=function(){
   return this;
 }
}
var n=new Fn();
console.log(n.a());//Fn{a:f}
console.log(n);//fn{a:f}
//此例中，構造了一個構造函數Fn((),利用new關鍵字調用時一個空的對象被創建出來，并傳遞到函數中作為this存在。this-Fn(新的)
//這個構造器同時創建了a屬性，并將此屬性作為一個方法賦予給它創建出新對象的實例。

4.apply()獲得call()方法  （this->可以是我們指定的任何對象）

（1）apply()，兩個參數。第一個參數：用于作為函數上下文的對象。第二個參數：一個參數數組。

（2）call()，兩個參數。第一個參數：用于作為函數上下文的對象。第二個參數：argument list。

call()和apply()多用于函數回調。

function circle(list,calback){
 for(var i=0;i<list.length;i++){
   calback.call(list[i],i);
 }
}
var list=['a','b','c'];
circle(list,function(index){
 console.log(index);//0，1，2(即傳進來的i值)
 console.log(this);//a，b，c(call的第一個參數)
});
//this->call()傳遞進來的第一個參數。

以上是“web開發中函數調用以及this的指向的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！