热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript中函数的四种调用模式

理解函数的四种调用方法,可以有效的帮助我们分析和理解JavaScript代码。但是经常有人分不清楚或者不理解这四种调用模式,在JavaScript中,函数是一等公民,函数在Java

理解函数的四种调用方法,可以有效的帮助我们分析和理解Javascript代码。但是经常有人分不清楚或者不理解这四种调用模式,在Javascript,函数是一等公民,函数在Javascript中是一个数据类型,而非C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:1、函数调用形式 2、方法调用形式 3、构造器调用形式 4、上下文调用形式(applycall)这里所有的调用模式中,最主要的区别在于关键字 this 的意义.下面分别介绍这几种调用形式。

一、函数调用形式

函数调用模式是最简单也是最好理解的一种模式,就是一般在声明一个函数后,直接调用即是函数调用模式。例如:

1 function fn (){
2   console.log(this);
3 }
4 fn();//函数的调用模式

这里的关键是,在函数的调用模式中,函数里的this关键字指向是全局对象,如果在浏览器中即是window对象。上段代码执行结果:

技术分享

二、方法调用模式

同样是一个函数,将其赋值给一个对象的成员后就不一样了。将函数赋值给一个对象的成员后,该函数就不应叫函数而是应当叫做方法。例如:

var func = function () {
console.log(this);
}
var obj = {};
obj.fn = func; //将函数赋值给对象的成员
console.log(func === obj.fn);//判断方法体是否一样
func(); //函数调用
obj.fn(); //方法调用

此时,obj.fn和func的方法体是一样的,即 obj.fn===func 为true。但是,这里有一个差别就是func()的结果是window对象,而obj.fn()的结果是obj这个对象。

技术分享

由此可见,当函数作为方法被调用的时候,函数内部的this是指向当前对象的。

三、构造器调用模式

函数可以当做是构造函数被调用,从而创建一个新的对象出来。此时的语法就是在函数前面加上一个关键字new。

//定义一个构造函数
var Person = function () {
    this.name = "Tom";
    this.sayHello = function () {
        console.log("你好,我是" + this.name);
        };
    };
//调用构造函数,创建对象
 var p = new Person();
// 使用对象
p.sayHello();

这个构造函数和创建对象的方法比较简单,我们可以看出,构造函数中this指向的是新创建出来的对象或者说是新创建对象的引用。

我们接下来分析一下这段代码是怎样创建一个新对象的。程序首选定义了一个Person函数

1. 程序在执行到这一句的时候, 不会执行函数体, 因此 Javascript 的解释器并不知道这个函数的内容

2. 接下来执行new 关键字, 创建对象, 解释器开辟内存, 得到对象的引用, 将新对象的引用交给函数

3. 紧接着执行函数, 将传过来的对象引用交给 this . 也就是说, 在构造方法中, this 就是刚刚被 new 创建出来的对象

4. 然后为 this 添加成员, 也就是为对象添加成员

5. 最后函数结束, 返回 this , 将 this 交给左边的变量p

分析过构造函数的执行以后, 可以得到, 构造函数中的 this 就是当前new出来的对象。

刚刚分析过构造函数中this的指向问题,在构造函数还有一个问题就是return的含义。在构造函数中 return 的意义发了变化, 先如果在构造函数中, 如果返回的是个对象, 那么就保留原意 如果返回的是对象, 而是如数字, 布尔和字符串,null,undefined,则直接忽略,或者说返回了this。例如:

 var fn = function () {
        this.name = ‘tom‘;
        return {
            name:‘jack‘
        };
    };
    var p = new fn();
    console.log(p.name); //结果是jack

由此可见,执行 var p = new fn();这段代码后,p是return 后面的对象。再看例子2:

var fn = function () {
        this.name = ‘tom‘;
        return ‘jack‘;
    };
    var p = new fn();
    console.log(p); //p是对象{name:‘tom‘}
    console.log(p.name); //结果是tom

可以看出,由于return 后面是字符串,则return语句无效,函数返回this。所以就创建了新对象,里面添加了name属性。

还有第四种调用模式,上下文调用模式,由于篇幅关系,我在下篇博客中会详细介绍。

技术分享

Javascript中函数的四种调用模式


推荐阅读
author-avatar
刘伟亮
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有