深入理解javascript函数调用

摘要: 在javascript中一共有四种调用模式

概述

调用一个函数会暂停当前函数的执行，传递控制权和参数给新的函数。

除了声明的时候定义的形参，每个函数还会接受两个参数this和arguments,

参数this在面向对象编程中非常重要，他的值取决于调用的模式。

在javascript中一共有四种调用模式

对于调用运算符，是跟在任何生产一个函数值的表达式之后的一对圆括号。圆括号内可以包含一个或者多个用逗号分割开来的

表达式。每个表达式产生一个参数值。每个参数值被赋予函数声明时定义的形式参数名，当实际参数的个数与形式参数的个数不匹配的时候，

会导致运行时出错。如果实际参数过多的话，超出的参数值会被忽略，但是如果参数值过少的话，缺少的值会被undefined替代。

对参数值不会做类型检查：任何类型的值都可以被传递给任何参数。

方法调用模式 the method invocation pattern

当一个函数被保存作为对象的一个属性的是，那就变成了一个方法。当一个方法被调用的时候，this被绑定到这个对象上面。

通过'.'来调用这个方法。

方法可以使用this访问自己所属的对象，所以他能够从对象中取值或者对对象进行修改，this到对象的绑定发生在被调用的时候。

这个超级延迟绑定使得函数可以对this高度复用。

通过this可以取得他们所属对象的上下文的方法称之为公共方法。

var myObject = {
value: 0,
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
}

myObject.increment();
console.log(myObject.value);  // 1
myObject.increment(5);
console.log(myObject.value);  // 6
myObject.increment('4');
console.log(myObject.value);  // 7

函数调用模式 the function invocation pattern

当一个函数并非一个对象的属性的时候，那么他就可以被当作一个函数来调用

var sum = add(3,4);

以此模式调用函数的时候，this被绑定到全局对象。

function add(a, b) {
return a + b;
}

myObject.double = function () {
var that = this;
var helper = function () {
that.value = add(that.value, that.value);
}

// 这个时候this对象执行全局对象。
helper();  // 以函数的形式调用helper
}

// 以方法的形式调用double
myObject.double();
console.log(myObject.value)  // 14

构造器调用模式 the constructor invocation pattern

javascript是一门基于原型继承的语言，这意味着对象可以直接从其他对象继承属性，该语言是无类型的。

如果在一个函数的前面带上new来调用，那么背地里将会创建一个连接到该函数的prototype成员的新对象，

同时this会绑定到那个新对象上。

new前缀会改变return 语句的行为。

对于一个函数，如果创建的目的就是希望结合new前缀来调用，那么他就被称之为构造器函数。

PS:以大写格式命名。

var Que = function (string) {
this.status = string;
}

Que.prototype.getStatus = function () {
return this.status;
}

var myQue = new Que('bosscheng');
myQue.getStatus();   // bosscheng

apply调用模式 the apply invocation pattern

因为javascript 是一门函数式的面向对象语言，所以函数可以拥有方法

apply方法让我们构建一个参数数组传递给调用函数。他也允许我们选择this的值。

apply提供两个参数，一个绑定到this对象上。一个是数组。

var array = [2, 4];

var sum = add.apply(null, array);

var statusObject = {
status: 'panpan'
}

// 对象 statusObject 并没有继承自Que.prototype,但是我们可以在statusObject  上调用 getStatus 方法。
// 实际上statusObject 是没有getStatus方法的。 但是通过 apply 都实现了。
var status = Que.prototype.getStatus.apply(statusObject); // panpan