一  前言

  Javascript一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式以及apply调用模式。调用模式不同,对应的隐藏参数this值也会不同。

  二  方法调用模式

  函数作为对象的属性时,称为方法。此时函数(即方法)中的this对应是该对象。

var myObject = {
  value:3,
  func:function(){
    alert(this.value);
  }
  
}; // 方法调用模式,this对应的是myObject对象
myObject.func();  //3

  也可以写成如下格式:

var myObject = {
value:
}; myObject.func = function() {
alert(this.value);
} // 方法调用模式
myObject.func();  //3

  上面,this对应的是myObject对象。

  三  函数调用模式

  函数调用模式即通常的函数调用,属于全局性调用,此时this对应的是全局对象,即Window对象。

var add = function(a, b) {
return a + b;
}

// 函数调用模式
add(,); //

  上面也可以写成

window.add = function(a, b) {
return a + b;
} // 函数调用模式
add(3,4); //7

  下面来看看下面的测试题,以检验你是否了解了this。

<script type="text/javascript">
var add = function(a, b) {
return a + b;
} var myObject = {
value:
}; myObject.func = function() {
var helper = function() {
this.value = add(this.value, this.value);
}

    // 函数调用模式
  helper();
}

  // 方法调用模式
   myObject.func();
alert(myObject.value); </script>

  答案会是6吗?仔细想想。

  答案为6的程序应该是这样的:

<script type="text/javascript">
var add = function(a, b) {
return a + b;
} var myObject = {
value:
}; myObject.func = function() {
var that = this; // this对应myObject对象 (1)
var helper = function() {
//this.value = add(this.value, this.value); //这里调用模式为函数调用模式,而非方法调用模式,所以this对应全局对象 (2)
that.value = add(that.value, that.value);
}
    
    // 函数调用模式
  helper();
}

  // 方法调用模式
   myObject.func();
alert(myObject.value); </script>

  (1)处this在firefox调试如下:(方法调用模式处)

  

  (2)处this在firefox调试如下:(函数调用模式处)

  

  四  构造器调用模式

  若在函数前面通过new 来调用,其实是生成一新对象,this自然指向该新对象。

var add = function(a, b) {
return a + b;
}

// 构造器调用模式
var obj = new add(, );

  obj为一对象:

  

  对于构造器调用模式,如果函数返回值不是一个对象,则返回该新对象,即this。

  五  apply调用模式

  apply方法有两个参数,第一个是要绑定给this的值,第二个是一个参数数组。
// apply调用模式
var sum = add.apply(null,[,]); // this对应全局变量,即window对象
var sum2 = add.apply(myObject,[,]); //this对应为myObject对象

  六  源码

  源码下载。

Javascript函数调用的四种模式的更多相关文章

  1. OAuth2简易实战(一)-四种模式

    1. OAuth2简易实战(一)-四种模式 1.1. 授权码授权模式(Authorization code Grant) 1.1.1. 流程图 1.1.2. 授权服务器配置 配置授权服务器中 clie ...

  2. 函数调用的四种方式 和 相关的 --- this指向

    this:表示被调用函数的上下文对象. arguments:表示函数调用过程中传递的所有参数. 这两个参数都是隐式的函数参数.会静默传递给函数,并且和函数体内显式声明的参数一样可正常访问. argum ...

  3. 第164天:js方法调用的四种模式

    js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...

  4. IdentityServer4实现Oauth2.0四种模式之隐藏模式

      接上一篇:IdentityServer4实现OAuth2.0四种模式之密码模式,密码模式将用户的密码暴露给了客户端,这无疑是不安全的,隐藏模式可以解决这个问题,由用户自己在IdentityServ ...

  5. IdentityServer4实现OAuth2.0四种模式之授权码模式

    接上一篇:IdentityServer4实现OAuth2.0四种模式之隐藏模式 授权码模式隐藏码模式最大不同是授权码模式不直接返回token,而是先返回一个授权码,然后再根据这个授权码去请求token ...

  6. Hibernate 查询MatchMode的四种模式

    Hibernate 查询MatchMode的四种模式 MatchMode.START:字符串在最前面的位置.相当于"like 'key%'" MatchMode.END:字符串在最 ...

  7. Android 文件访问权限的四种模式

    Linux文件的访问权限* 在Android中,每一个应用是一个独立的用户* drwxrwxrwx* 第1位:d表示文件夹,-表示文件* 第2-4位:rwx,表示这个文件的拥有者(创建这个文件的应用) ...

  8. 对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)

    一. AES对称加密: AES加密 分组 二. 分组密码的填充 分组密码的填充 e.g.: PKCS#5填充方式 三. 流密码:   四. 分组密码加密中的四种模式: 3.1 ECB模式 优点: 1. ...

  9. Asp.net的sessionState四种模式配置方案

    sessionState节点的配置 web.config关于sessionState节点的配置方案,sessionState有四种模式:off,inProc,StateServer,SqlServer ...

随机推荐

  1. WebLogic口令猜解工具【Python脚本】

    WebLogic 默认端口7001 可以通过如下链接访问控制台 http://10.9.1.1:7001/console/login/LoginForm.jsp 写了一个简单的猜解脚本,半成品,做个记 ...

  2. Android 的 DatePicker、TimePicker或NumberPicker

    布局文件加上这个就可以,去除日期选择器.时间选择器或数值选择器的可编辑状态. android:descendantFocusability="blocksDescendants" ...

  3. 编程:递归编程解决汉诺塔问题(用java实现)

    Answer: //Li Cuiyun,October 14,2016. //用递归方法编程解决汉诺塔问题 package tutorial_3_5; import java.util.*; publ ...

  4. 前端学习 第三弹: JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  5. 第一篇(C#中?与??)

    不聊闲话,上干货~!(新手初上路,大牛莫喷,谢谢!) 先说?? 在C#中有个三元运算符  X= A==null?B:A 其中A为bool型.当A为空时,X的值为B;当A不为空时,X的值为A. 现在有个 ...

  6. 学习css中得与惑

    css的学习分享 所学的css知识看多,会看懂.这只是在实践中发现的问题:  一. ???h1比div还大  h1上下有边距   为什么浮动不了  (现不知道) 二. css写了 表现不出来.... ...

  7. [stat.simulation] Hasting-Metropolis Algorithm

    问题背景:我们有一些观测数据X,这些数据假设是取值为1,...,m:我们还知道每个数据观测到的频数为: 但是我们现在无法计算B的大小.(这是一个假设,毕竟计算一串数字的和不是难事) 问题: 我们需要通 ...

  8. AT Tool --- android手机发送at指令

    之前网上也有一款类似的软件,估计是华为内部人员开发的,不过很变态,不但只支持华为的几款手机,而且只能发一条AT命令,然后就不让你发了:所以很气愤,今天花了一天时间自己写了这么款程序,而且是支持所有An ...

  9. selenium环境搭建

    开发环境: 1.jdk 2.eclipse 3.selenium,selenium只需要selenium-java-2.45.jar这个就可以 具体搭建步骤可参考:http://www.cnblogs ...

  10. linux 1-100的累加

    [   ]   判断式.它的使用和test命令一样 [ ]的判断符,只会返回2种值.0(真) 非0(假) -gt 大于-lt 小于-eq 等于-ne 不等于-ge 大于等于-le 小于等于 while ...