函数调用的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。如果带参，则用箭头函数实现