JavaScript函数调用模式解析-优快云博客

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

<script>


    /******************************************************************************
                                            普通模式
     *******************************************************************************/

    // 声明一个函数，并调用
    function func() {
        console.log("Hello World");
    }
    func();



    /******************************************************************************
                                            函数表达式
     *******************************************************************************/
    // 使用函数的Lambda表达式定义函数，然后调用
    var func = function() {
        console.log("你好，传智播客");
    };
    func();


    //可以发现函数调用很简单，就是平时学习的一样.
    //这里的关键是，在函数调用模式中，函数里的 this 关键字指全局对象，
    //如果在浏览器中就是 window 对象. 例如：
    var func = function() {
        console.log(this);
    };
    func();
    //    此时，会弹出对话框，打印出 [object Window]




    /******************************************************************************
                                    方法调用模式
     *******************************************************************************/
//    函数调用模式很简单，是最基本的调用方式.
//    但是同样的是函数，将其赋值给一个对象的成员以后，就不一样了.
//    将函数赋值给对象的成员后，那么这个就不在称为函数，而应该叫做方法.

    // 定义一个函数
    var func = function() {
        alert("我是一个函数么?");
    };

    // 将其赋值给一个对象
    var o = {};
    o.fn = func; // 注意这里不要加圆括号
    // 调用
    o.fn();

//    此时，o.fn 则是方法，不是函数了.
//    实际上 fn 的方法体与 func 是一模一样的，但是这里有个微妙的不同. 看下面的代码：
    // 接上面的代码
    alert(o.fn === func);
//    打印结果是 true ，这个表明两个函数是一样的东西. 但是修改一下函数的代码：

    // 修改函数体
    var func = function() {
        alert(this);
    };
    var o = {};
    o.fn = func;
    // 比较
    alert(o.fn === func);
    // 调用
    func();
    o.fn();
    // 这里的运行结果是，两个函数是相同的，因此打印结果是 true.
    // 但是由于两个函数的调用是不一样的，
    // func的调用，打印的是 [object Window]，而o.fn 的打印结果是[object Object].
    // 这里便是函数调用与方法调用的区别.
    // 函数调用中，this专指全局对象window，
    // 而在方法中this专指当前对象. 即o.fn 中的this 指的就是对象o.




    /******************************************************************************
                                        构造函数调用模式
     *******************************************************************************/

//    同样是函数，在单纯的函数模式下，this表示window；
//    在对象方法模式下，this指的是当前对象.
//    除了这两种情况，JavaScript中函数还可以是构造器.
//    将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字. 如代码：
    // 定义一个构造函数
    var Person = function() {
        this.name = "传智播客";
        this.sayHello = function() {
            alert("你好，这里是" + this.name);
        };
    };
    // 调用构造器，创建对象
    var p = new Person();
    // 使用对象
    p.sayHello();

//    上面的案例首先创建一个构造函数Person，然后使用构造函数创建对象p.
//    这里使用 new语法.然后使用对象调用sayHello()方法.
//    这个使用构造函数创建对象的案例比较简单. 从案例可以看到，此时 this指的是对象本身.







    /******************************************************************************
                                    apply call调用模式
     *******************************************************************************/
        //前面已经详细讲解了



        /*Function对象定义函数*/

</script>