首页 > 编程 > JavaScript > 正文

JavaScript 函数四种调用模式

2019-11-06 06:04:38
字体:
来源:转载
供稿:网友

函数有四种形态

-> 函数形态-> 方法形态-> 构造器形态-> 上下文形态(call, apply)

函数的四种调用模式

所有的 this 都是由当前函数决定,最终都是由函数的四种调用模式决定的。① 函数调用模式,只会执行一段代码,同时函数中的 this 是全局对象 window;返回值由return语句决定,如果没有return语句就表示没有返回值
function f1(){    console.log(this);}f1();//windowfunction f2(){    return function(){        console.log(this);    }}var f2n=f2();f2n();//this——>window,这也是一次函数调用模式function f3(){    f3n();//函数调用模式——————>window    function f3n(){        console.log(this);    }}f3();// window② 方法调用模式,只会执行一段代码,同时方法中的 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③ 构造器调用模式,会用来创建一个对象,还是执行一段代码,this 表示当前对象返回值:   a. 没有手动添加返回值,默认返回 this   b. 返回了一个基本数据类型(number / boolean / string / null / undefined),最终返回 this   c. 返回了一个复杂数据类型(对象),最终返回该对象
//代码1:function Person(){    this.age=20;    this.name="张三";    console.log(this);}//构造函数调用模式:var p1=new Person();//代码2;function P2(){    this.age=18;    return "abc";}var p2=new P2();//p2.age=18//代码3:function P3(){    this.age=10;    return {};}var p3=new P3();//p3.age:undefinedconsole.log("p3.age");console.log(p3.age);//代码4:function P4(){    this.age=10;    return [1,3,5];}var p4=new P4();//p4.age:undefinedconsole.log("p4.age");console.log(p4.age);④ 上下文调用模式,可以用参数来控制 this 的含义语法:        函数.call(对象,参数列表)        函数.apply(对象,参数数组)        call 和 apply 除了参数不同,功能完全相同this :    a. 传递一个 null / undefined ,this 指向 window    b. 传递一个 数字 / 字符串 / 布尔值,this 指向 对应的基本包装类型的对象(Number / String / Boolean)    c. 传递一个 对象:this 指向该对象返回值:由 return 语句决定例如调用 函数 func 需要两个参数func( 1, 2 )那么使用上下文调用的语法是func.call(obj, 1, 2);func.apply(obj, [1, 2]);apply 方法就是为了处理伪数组借用函数调用p.sayHello => p.sayHello.call(p)    p.sayHello.apply(p)
function f1(){    console.log(this);}//上下文模式f1.call(null);//windowf1.call(undefined);//windowf1.call(1);//Number的实例f1.call("abc");//String的实例f1.call(true);//Boolean的实例var s1="abc";console.log(s1.length);//3console.log(s1[0]);//"a"//代码内部创建了字符串所对应的String构造函数的实例//{0:"a",1:"b",2:"c",length:3}//代码执行完毕之后,就会把这个实例给销毁练习题1:
function f1(){    this.length=5;    return function(a,b,c){        this.length=10;        return [1,3,5];    }}//构造函数调用模式:var r1=new f1();//r1是函数console.log(r1.length);//任何函数都有一个length属性表示形参的个数:3//函数调用模式var r2=r1();//r2:[1,3,5]console.log(r2.length);//3//构造函数调用模式var r3=new r1();//r3:[1,3,5]console.log(r3.length);//3练习题2:
var length = 10;function fn() {    console.log(this.length);}var obj = {    length: 5,    method: function (f) {        f();//f变量的值是fn函数,但是这里是函数调用模式--->this:window————>window.length:10        arguments[0]();//方法调用模式,this:arguments——>arguments.length:2    }}obj.method(fn, 1);var o1={    0:function(){    },    say:function(){    }};o1[0]();//o1.0();//错误o1.say();o1["say"]();
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表