在javascript中一共有4种函数调用模式,分别是:方法调用模式、函数调用模式、构造函数调用模式和apply(call)调用模式,这4种模式的主要差异在于如何初始化关键参数this。

方法调用模式

当一个函数被保存为对象的一个方法时,我们就称它为一个方法。当一个方法被调用时,this被绑定到该对象。方法可以使用this访问自己所属的对象。

var testObj = {
  value: 0,
  a: 10,
  b: 20,
  sum: function(){
    this.value = this.a + this.b;
  }
}; testObj.sum();
testObj.value;  // 30

函数调用模式

当一个函数并非一个对象的属性时,那么它就是被当做一个函数来调用的。在此模式调用函数时,this被绑定到全局对象。

value = 100;
var testObj = {
  value: 10,
  getValue: function(){
    var tempFun = function(){
      console.log(this.value);
    };
    tempFun();
  }
}; testObj.getValue(); // 100

从上例中我们可以看到this绑定到了全局对象,这是javascript语言设计上的一个错误,倘若语言设计正确,那么当内部函数被调用时,this应该仍然绑定到外部函数的this变量。但是,有一个很容易的解决方案:如果该方法定义一个变量并给它赋值为this,那么内部函数就可以通过那个变量访问到this,一般按照约定把那个变量命名为that。

value = 100;
var testObj = {
  value: 10,
  getValue: function(){
    var that = this;
    var tempFun = function(){
      console.log(that.value);
    };
    tempFun();
  }
}; testObj.getValue();  // 10

  

构造函数调用模式

javascript是一门基于原型继承的语言,这意味着对象可以直接从其它对象继承属性。如果在一个函数前面带上new来调用,那么将会创建一个连接到该函数的prototype成员的新对象,同时this会绑定到那个新对象上。

var Info = function(name){
  this.name = name;
}; Info.prototype.getName = function(){
  return this.name;
}; var people = new Info("patten");
people.getName();  // "patten"

  

apply(call)调用模式

因为javascript是一门函数式的面向对象的编程语言,因此函数可以拥有方法。

具体的详见我的另一篇文章 javascript中call和apply方法

javascript函数的4种调用方式的更多相关文章

  1. javascript 函数的4种调用方式与 this(上下文)的指向

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript中作用域链和this(上下文)的指向是很容易混淆的,简单的说就是: 作用域链取决于函数 ...

  2. JavaScript 函数的4种调用方法

    JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } ...

  3. JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造 ...

  4. JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法

    缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...

  5. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  6. JavaScript 函数的两种声明方式

    1.函数声明的方式 JavaScript声明函数有两种选择:函数声明法,表达式定义法. 函数声明法 function sum (num1 ,num2){ return num1+num2 } 表达式定 ...

  7. javascript this 代表的上下文,JavaScript 函数的四种调用形式

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的 ...

  8. 第十篇----------javascript函数的三种定义方式及区别

    javascript定义函数有3种方式: //3种函数定义方式,前两种常用 /** * 1,function 语句式 * 形式:句子 * 名称:有名 * 性质:静态 * 解析时机:优先解析 * 作用域 ...

  9. JavaScript函数的声明与调用方式

    入职第一天小记 对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结. 如果要我们对H5中的表单做个简单的校验, ...

随机推荐

  1. Linux查看用户和组命令

    在Linux系统里,我们会经常用Linux查看用户的命令,在这里我们一些命令进行了总结,总共有7个,并做了详细的解释,以便让大家更深入的理解,接下来让我们一起来看看这些命令和具体应用. 一.Linux ...

  2. 服务器监控之 ping 监控

    在运维人员的日常工作中,对物理服务器的监控十分重要.物理机的 CPU.内存.磁盘使用率,网卡流量,磁盘 IO 等都需要进行监控.通过 ICMP 协议的 ping 监控,可以判断物理服务器运行是否正常或 ...

  3. 如何从软硬件层面提升 Android 动画性能?

    若是有人问如何解决动画性能不佳的问题,Dan Lew Codes 总会反问:你是否使用了硬件层? 动画放映过程中每帧画面可能都要重绘.如果使用视图层,,渲染过的视图可以存入离屏缓存以待将来重用,而无需 ...

  4. 部分视图调用方法总结(Action 、 RenderAction 、 Partial 、 RenderPartial)

    Action . RenderAction . Partial . RenderPartial 1.Action . RenderAction Action 方法以字符串的形式返回子视图,可以直接被呈 ...

  5. DLX模板

    对于数独问题 ; //3*3数独 ; // 一格能填9个数 9*9格 +; // 9*9*4=(9+9+9)*9+9*9 (9+9+9)是9行 9列 9格 *9是9个数 9*9是81个格子 +MaxM ...

  6. [topcoder]SmartWordToy

    广度搜索BFS,要用Queue.还不是很熟,这道题帮助理清一些思绪了.其实这道题是求最短路径,所以BFS遇到第一个就可以返回了,所以后面有些现有大小和历史大小的判断可以省却. 过程中拿数组存step还 ...

  7. OpenCV学习笔记:如何扫描图像、利用查找表和计时

    目的 我们将探索以下问题的答案: 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 这里我们测试的,是一种简单的 ...

  8. Android开发之AlertDialog

    http://www.cnblogs.com/Gaojiecai/archive/2011/12/10/2283156.html http://www.2cto.com/kf/201205/13187 ...

  9. win7无法识别U盘,驱动信息:该设备的驱动程序未被安装。 (代码 28)

    台式机的win7 64位系统可以识别u盘,但笔记本的win7 64位却识别不了,说明U盘是可以用的.查看笔记本的设备管理器,发现驱动安装失败,提示信息为“该设备的驱动程序未被安装. (代码 28) ” ...

  10. useradd adduser linux创建用户、设置密码、修改用户、删除用户

    创建用户.设置密码.修改用户.删除用户: useradd testuser 创建用户testuser passwd testuser 给已创建的用户testuser设置密码 说明:新创建的用户会在/h ...