函数的四种调用模式

以前在gitbook上总结的,这里直接贴过来了.

函数调用的四种模式

• 函数调用模式
• 方法模式
• 构造器调用模式
• 上下文模式

1. 函数模式

就是通过函数来调用，规范写法为：function fn(){}; fn(); 函数中this指向=>window

1
2
3
4
5
6
7
8
9
10
11

// 声明式函数
function fn1 () {
console.log(this);
}
//表达式函数
var fn2 = function(){
console.log(this);
}
//调用 这种调用模式函数中this表示全局对象,在浏览器中指window
fn1(); //window
fn2(); //window

2. 方法模式

函数依附于一个对象，是对象的一个属性，我们再调用这个函数。这种模式就是方法调用模式。

1
2
3
4
5
6
7

var obj = {
name:"jack",
sayHi:function(){
console.log(this);
}
};
obj.sayHi(); // obj对象

3. 构造器调用模式

即构造函数的调用，一般是通过new + 函数名( ),此方式中this指向new创建的新对象

1
2
3
4

function Foo(){
console.log(this); //Foo
}
var f1=new Foo();

• 构造函数的返回值:
• 默认返回值是新创建的对象(实例)
• 当手动添加返回值后(return语句)

1. 返回值是基本数据类型(值类型)=>真正的返回值还是那个新创建的对象（即实例）
2. 返回值是复杂数据类型(对象)=>返回值是这个对象

构造函数调用例子

• 如果一个函数的返回值是一个值类型，那么这个函数作为构造函数用new运算符执行构造时，它的返回值将被丢弃。new 表达式的结果仍然是this所引用的对象。

1
2
3
4
5
6
7
8

function test(){
this.a=10;
return 1;
}
var m=new test();
var n=test();
console.log(m);// 返回Object=>test
console.log(n);// 返回1

• 如果一个函数的返回值是引用类型（数组，对象或者函数）的数据，那么这个函数作为构造函数用new运算符执行构造时，运算的结果将被它的返回值取代，这时候，构造函数体内的this值丢失了，取而代之的是被返回的对象

1
2
3
4
5
6
7
8
9
10

function test(){
this.a=10;
return function(){
return 1;
}
}
var m = new test();
var n = test();
console.log(m);//返回return后面的闭包 function(){return 1;}
console.log(n);//返回return后面的闭包 function(){return 1;}

4. 上下文模式

本质–对象借用不属于该对象的方法(函数),即,我们自定义this的指向;这时候需要call和apply这两个方法

• ← Previous Post
• Next Post →