js种函数调用的四种方式

函数调用

        this指向：window

        返回值  ：由return值决定，如果没有return语句就表示没有返回值

 

案例1：
function f1() {
    console.log(this);
}
f1();       //window
案例2：
function f2() {
    return function () {
        console.log(this);
    }
}
var f2n = f2();
f2n();               //this-->window  这也是一次函数调用模式
案例3：
functioon f3() {
    f3n();        //函数的调用模式--->window
    function f3n() {
        console.log(this);
    }
}
f3();

　　

 

方法调用

        this指向：该方法的调用者

        返回值  ：由return语句决定

   代码1：
    var obj={
        age:10,
        say:function(){
            console.log(this.age);
        }
    };
    obj.say();//方法调用模式
    代码2：
    function f1(){
        console.log(this);
    }
    var obj2={
        s1:f1//将f1函数的值赋值给obj2.s1属性
    };
    obj2.s1();//方法调用模式——>this:obj2
    代码3：
    var obj3={
        age:10,
        s1:function(){
            console.log(this.age);
        }
    };
    var obj4={
        age:20,
        s2:obj3.s1//将obj3.s1函数的值赋值给s2属性
    };
    obj4.s2();//方法调用模式：this——>obj4
    function f5(){
    }
    var a1=f5();//undefeind
    var a2=f5;//a2是一个函数

　　

 

构造函数调用

        this指向：当前构造函数创建的对象

        返回值  ：   a、没有手动添加返回值，默认返回this

                            b、return了一个基本数据类型（数字、布尔值、null、undefined），最终返回this

                            c、return了一个复杂数据类型（对象），最终返回该对象

    代码1：
    function Person() {
        this.age = 20;
        this.name = "张三";
        console.log(this);
    }
    //构造函数调用模式：
    var p1 = new Person(); //打印出该实例 Person {age: 20, name: "张三"}
    代码2；
    function P2() {
        this.age = 18;
        return "abc";
    }
    var p2 = new P2();
    console.log(p2); //P2 {age: 18}
    代码3：
    function P3() {
        this.age = 10;
        return {};
    }
    var p3 = new P3();
    console.log(p3); //Object {}
    console.log(p3.age);//undefined
    代码4：
    function P4() {
        this.age = 10;
        return [1, 3, 5];
    }
    var p4 = new P4();
    console.log(p4);//[1, 3, 5]
    console.log(p4.age);//undefined

　　

 

上下文调用

        call和apply 是方法， 是所有函数都具有的方法。 Function.prototype

        只要函数调用call/apply 方法，那么该函数就会立即执行。

        this指向：   a、传递一个null/undefined------------------->window

                            b、传递一个数字、字符串、布尔值------->对应的基本包装类型的对象

                            c、传递一个对象------------------------------->指向该对象

        返回值  ：由return语句决定

        

    function f1(){
        console.log(this);
    }
    //上下文模式
    f1.call(null);          //window
    f1.call(undefined);     //window
    f1.call(1);             //Number的实例
    f1.call("abc");         //String的实例
    f1.call(true);          //Boolean的实例
    var s1="abc";           //代码内部创建了字符串所对应的String构造函数的实例
                            //        {0:"a",1:"b",2:"c",length:3}
                            //代码执行完毕之后，就会把这个实例给销毁
    console.log(s1.length); //3
    console.log(s1[0]);     //"a"