JavaScript函数调用

JavaScript函数有4中调用方式：（1）作为一个函数调用 （2）作为方法调用 （3）使用构造函数调用 （4）作为函数方法调用
每种方式的不同在于this的初始化
说明：一般而言，在JavaScript中，this指向函数执行时的当前对象【调用函数的那个对象】。

1.作为一个函数调用
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20
以上函数不属于任何对象，但是在JavaScript中它始终是默认的全局对象，在HTML中默认的全局对象是HTML页面本身，所以函数属于HTML页面，
在浏览器中的页面对象是浏览器窗口（window对象）。以上函数会自动编程window对象的函数，所以myFunction() 和 window.myFunction() 是一样的
说明：这是调用JavaScript函数的常用方法，但是不是良好的编程习惯，全局变量，方法或函数容易造成命名冲突的bug

2.函数作为方法调用
在JavaScript中可以将函数定义为对象的方法
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"
说明：函数作为对象方法调用，会是得this值成为对象本身

3.使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"
说明：构造函数中this关键字没有任何的值，this的值在函数调用实例化对象是创建

4.作为函数方法调用函数
在JavaScript中，函数是对象，JavaScript函数有它的属性和方法。call()和apply()是预定义的函数方法，
这两个方法可以调用函数，两个方法的第一个参数必须是对象本身。
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

说明：在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

call()和apply()的关系如下：
函数引用.call(调用者,参数1,参数2,...)=函数引用.apply(调用者,[参数1,参数2,...])

call()和apply()调用的区别：

通过call()调用时必须在括号中详细地列出每个参数

通过apply()动态调用函数时，需要以数组形式一次性传入所有调用参数

 

面试题：

    function Foo() {
        getName = function () { alert(1); };
        return this;
    }
    Foo.getName = function () { alert(2); };
    Foo.prototype.getName = function () { alert(3); };
    var getName = function () { alert(4); };
 
    Foo.getName();  // ------- 输出 2 -------
    // 调用 Foo函数 作为 对象 动态添加的属性方法 getName
    // Foo.getName = function () { alert(2); };
 
    getName();      // ------- 输出 4 -------
    // 这里 Foo函数 还没有执行，getName还没有被覆盖
    // 所以 这里还是 最上面的 getName = function () { alert(4); };
 
    Foo().getName();    // ------- 输出 1 -------
    // Foo()执行，先覆盖全局的 getName 再返回 this，
    // this 是 window, Foo().getName() 就是调用 window.getName
    // 此时 全局的 getName已被覆盖成 function () { alert(1); };
    // 所以 输出 1
    /* 从这里开始 window.getName 已被覆盖 alert 1 */
 
    getName();  // -------- 输出 1 --------
    // window.getName alert(1);
 
    new Foo.getName();     // ------- 输出 2 -------
    // new 就是 找 构造函数()，由构造函数结合性，这里即使 Foo无参，也不能省略 (),所以不是 Foo().getName()
    // 所以 Foo.getName 为一个整体，等价于 new (Foo.getName)();
    // 而 Foo.getName 其实就是函数 function () { alert(2); } 的引用
    // 那 new ( Foo.getName )(), 就是在以 Foo.getName 为构造函数 实例化对象。
    // 就 类似于 new Person(); Person 是一个构造函数
 
    // 总结来看 new ( Foo.getName )(); 就是在以 function () { alert(2); } 为构造函数来构造对象
    // 构造过程中 alert（ 2 ），输出 2
 
    new Foo().getName();    // ------- 输出 3 -------
    // new 就是 找 构造函数(),等价于 ( new Foo() ).getName();
    // 执行 new Foo() => 以 Foo 为构造函数，实例化一个对象
    // ( new Foo() ).getName; 访问这个实例化对象的 getName 属性
    // 实例对象自己并没有 getName 属性，构造的时候也没有 添加，找不到，就到原型中找
    // 发现 Foo.prototype.getName = function () { alert(3); };
    // 原型中有，找到了，所以 ( new Foo() ).getName(); 执行，alert（3）
 
    var p = new new Foo().getName();     // ------- 输出 3 -------
    // new 就是 找 构造函数(),等价于 new ( ( new Foo() ).getName )() 输出 3
 
    // 先看里面的 ( new Foo() ).getName
    // new Foo() 以Foo为构造函数，实例化对象
    // new Foo().getName 找 实例对象的 getName属性，自己没有，去原型中找，
    // 发现 Foo.prototype.getName = function () { alert(3); }; 找到了
 
    // 所以里层 ( new Foo() ).getName 就是 以Foo为构造函数实例出的对象的 一个原型属性
    // 属性值为一个函数 function () { alert(3); } 的引用
 
    // 所以外层 new ( (new Foo()).getName )()在以该函数 function () { alert(3); } 为构造函数，构造实例
    // 构造过程中 执行了 alert(3)， 输出 3