JavaScript 函數調用LOGIN

JavaScript 函數調用

函數體程式碼在函數被呼叫時才會執行。

Javascript函數有4中呼叫方式:

普通的函式呼叫

#方法呼叫

建構函式呼叫

透過call( ) 和apply() 間接呼叫


1.普通的函數呼叫

最常用的函數呼叫方式,如:

alert("hello");

var result = add(1, 2);

2. 方法呼叫

//定義一個函數

function hello(name) {

    alert('hello,' + name) ;

};

var user = {};

//賦值給user的sayHi屬性

user.sayHi = hello;

//方法呼叫

user.sayHi('張三');

普通的函式呼叫和方法呼叫的一個差異:在"普通的函數呼叫"方式中,函數的呼叫上下文(this的值),為全域物件(非嚴格模式)或undefined(嚴格模式)。而在"方法呼叫"方式中,this指向當前物件。利用這項特性,我們可以在方法不需要明確的回傳值時,直接傳回this,從而實現"方法鏈"。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>
</body>
</html>

巢狀函數中的this:在巢狀函數中,內層函數不會繼承外層函數的this,也就是當內層函數作為方法呼叫時,內層函數的this指向目前呼叫對象;當內層函數作為函數呼叫時,this的值為全域物件(非嚴格模式)或undefined(嚴格模式)。怎樣在內層函數中存取外層函數的this呢?通常將this保存在一個局部變數中,透過變數來存取:

var obj = {

    f : function() {

        var self = this;

        console.log(this === obj);//true,this指向目前物件

#        f1();

#   function f1() {

            console.log(this === obj);//false,this為全域物件或undefined

            console.            console.

            console。 true,self指向外層this,也就是目前物件

        }

    }

#} ;

3. 建構函式呼叫

當使用new關鍵字建立一個物件時,即呼叫了建構函式。建構子若沒有形參,可以省略圓括號:

var obj = new Object();
##//等價於

# ########var obj = new Object;#########

呼叫建構函數,建立了一個新對象,這個新物件會成為該建構函數的呼叫上下文(this的值):

function User(name) {

    this.name=name;

    console.debug(this);

}

var user = new User('張三');

#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>
</body>
</html>

4. 透過call() 和apply( ) 間接呼叫

Javascript中函數也是對象,也擁有方法。其中 call() 和 apply() 可以用來間接呼叫函數。 call() 的第一個參數用來指定呼叫上下文(即this的值),後面的參數是傳入呼叫函數的實參。

var name = 'A';

var user = {

    name : 'B'

};

function showName() {

    alert(this.name);

}

#showName();//A,this為全域物件

showName.call(user);//B,this為user物件

apply() 和call() 類似,區別在於,後面的實參需要以數組的形式傳遞(可將當前函數的arguments數組直接傳入)。



下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function sum(x,y){ return x+y; } result = sum(2,3); document.write( result ); </script> </head> <body> </body> </html>
章節課件