函數調用的4種方式

一、函數調用的4種模式

 

1、函數調用

function foo() {
    alert('hello');
}

foo();

注意：this 專指全局對象 window

 

2、方法調用

// 定義一個函數
var foo = function() {
    alert("我是一個函數么?");
};
// 將其賦值給一個對象
var o = {};
o.fn = foo; // 注意這里不要加圓括號
// 調用
o.fn();


注意：this 專指當前對象

 

3、構建函數調用

new對象的函數，即構建函數

注意：this 指被創建的對象

 

4、上下文調用模式

function foo() {}
foo.call(context, 參數列表);
foo.apply(context, 參數列表)

注意：this可以隨意指定
在apply模式中如果context使用null，就是函數模式， 如果使用對象，就是方法模式。

 

二、apply，call和bind區別

 

相同點：都是用來改變this的指向

不同點：

1、apply()：第一個參數是this要指向的對象，第二個參數是數組

 

2、call()：第一個參數是this要指向的對象，第二個參數是參數列表//例如：

 

var obj = {} //定義一個空的對象
function f(x,y){
　　console.log(x,y)
　　console.log(this) // this是指obj
}
f.apply(obj,[1,2]) // 后面的值需要用[]括起來
f.call(obj,1,2) // 直接寫

 

3、bind()

call()改過this的指向后，會再執行函數，

bind()改過this后，不執行函數，會返回一個綁定新this的函數

 

function f(){
    console.log("看我怎么被調用"); console.log(this) // 指向this } var obj = {}; f.call(obj) // 直接調用函數 var g = f.bind(obj); // bind()不能調用函數 g(); // 此時才調用函數

 

三、帶參函數

 

onSearchOne() {
return '123';
}

onSearchTwo(id) {
return () => id;
}

onClick={this.onSearchOne} //right。onClick接受的是一個函數
onClick={this.onSearchOne()} //error。onSearch被執行
onClick={this.onSearchTwo(id)} //right。如果帶參，則用箭頭函數實現