首页 > 代码库 > js种函数调用的四种方式

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"

  

 
 

js种函数调用的四种方式