函數呼叫的不同方式及this的指向詳解-js教程-PHP中文網

函數呼叫的不同方式及this的指向詳解

小云云

發布： 2018-02-06 09:22:02

原創

1942 人瀏覽過

一、函數的呼叫方式

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

2.作為方法，方法是連接在物件上的，被這個物件調用，這種形式就是物件導向程式設計。

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

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

本文主要為大家帶來一篇淺談函數呼叫的不同方式,以及this的指向。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

二、函數參數

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=[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
circle(list,function(index){
 console.log(index);//0，1，2(即传进来的i值)
 console.log(this);//a，b，c(call的第一个参数)
});
//this->call()传递进来的第一个参数。

登入後複製