JavaScript中函数的四种调用模式

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

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

时间: 2024-10-12 13:10:52

JavaScript中函数的四种调用模式的相关文章

javascript中函数的四种调用模式详解

介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们就称之为方法.接下来就可以开始今天的主体. 1.函数调用模式. 就是通过函数来调用,规范写法为:function fn(){} fn(); 函数中this的指向->window.案例如下: var age = 38; var obj = { age: 18, getAge: function() {

聊聊:Javascript中函数的四种调用模式

在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种模式有:函数模式,方法模式,构造器模式,上下文模式 1.函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容,其中this表示全局对象,在浏览器中是window. 比如: function foo () {} var func = function () {}; ... foo(); func(); (function (){})(); 2.方法模式 特征

Javascript中函数的四种调用方式

一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属性:arguments和this. arguments主要是用来保存函数参数,arguments中的callee属性主要是用来指向拥有当前arguments的函数(理解Javascript参数中的arguments对象). 3.在ECMAScript5中规范了另一个函数属性:caller(Opera

函数的四种调用模式

函数的四种调用模式 1.函数模式 特征 就是一个简单的函数调用,函数名前面没有任何的引导内容 this含义 this在函数模式中表示全局对象,在浏览器中是windjow对象 2.方法模式 特征 方法一定是依附与一个对象,将函数赋值给对象的一个属性,那么就成为了方法 this含义 this在方法模式调用中表示所依附的这个对象 3.构造器调用模式 与方法模式的this的区别 由于构造函数知识给this添加成员,没有做其他事情,而方法也可以完成这个操作,就this而言,构造函数与方法没有本质区别 特征

函数的四种调用模式.上下文调用.call.apply

闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引擎抓取,对SEO不友好. /*window的name属性*/ function fn(){ console.log(this.name); } fn.call({name:"zhangsan"});//"zhangsan" console.log(); fn();//'' 打印空字符串,此时调用fn其中的

js中this的四种调用模式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log("try")  出现异常代码后,正确代码不会执行 } catch (e) { console.log("e:"+e);  try中出现异常在e中展现出来 console.log("catch");  只有try中出现异常才执行这段代码 } finally { consol

函数的四种调用模型

函数的四种调用模式在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种: 函数模式方法模式构造器模式上下文模式1. 函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容. function foo () {} var func = function () {}; ... foo(); func(); (function (){})();this 的含义: 在 函数中 this 表示全局对象, 在浏览器中是

安卓中Activity的四种启动模式

Activity的四种启动模式 (示例图) 1.standard  标准的启动模式,在回退栈中,每次访问启动的activity都是一个全新的Activity.   2.singleTop     栈顶单一,在回退栈中,如果打开的Activity就是栈顶的Activity, 将重用栈顶的这个Activity.   3.singleTask     栈内唯一,在回退栈中,如果打开一个栈中已存在的Activity,它会把这个Activity之上的所有Activity都杀死,从而保证栈内唯一.   4.