Javascript函数调用的四种模式
一 前言
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调用模式
var sum = add.apply(null,[,]); // this对应全局变量,即window对象
var sum2 = add.apply(myObject,[,]); //this对应为myObject对象
六 源码
Javascript函数调用的四种模式的更多相关文章
- OAuth2简易实战(一)-四种模式
1. OAuth2简易实战(一)-四种模式 1.1. 授权码授权模式(Authorization code Grant) 1.1.1. 流程图 1.1.2. 授权服务器配置 配置授权服务器中 clie ...
- 函数调用的四种方式 和 相关的 --- this指向
this:表示被调用函数的上下文对象. arguments:表示函数调用过程中传递的所有参数. 这两个参数都是隐式的函数参数.会静默传递给函数,并且和函数体内显式声明的参数一样可正常访问. argum ...
- 第164天:js方法调用的四种模式
js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...
- IdentityServer4实现Oauth2.0四种模式之隐藏模式
接上一篇:IdentityServer4实现OAuth2.0四种模式之密码模式,密码模式将用户的密码暴露给了客户端,这无疑是不安全的,隐藏模式可以解决这个问题,由用户自己在IdentityServ ...
- IdentityServer4实现OAuth2.0四种模式之授权码模式
接上一篇:IdentityServer4实现OAuth2.0四种模式之隐藏模式 授权码模式隐藏码模式最大不同是授权码模式不直接返回token,而是先返回一个授权码,然后再根据这个授权码去请求token ...
- Hibernate 查询MatchMode的四种模式
Hibernate 查询MatchMode的四种模式 MatchMode.START:字符串在最前面的位置.相当于"like 'key%'" MatchMode.END:字符串在最 ...
- Android 文件访问权限的四种模式
Linux文件的访问权限* 在Android中,每一个应用是一个独立的用户* drwxrwxrwx* 第1位:d表示文件夹,-表示文件* 第2-4位:rwx,表示这个文件的拥有者(创建这个文件的应用) ...
- 对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)
一. AES对称加密: AES加密 分组 二. 分组密码的填充 分组密码的填充 e.g.: PKCS#5填充方式 三. 流密码: 四. 分组密码加密中的四种模式: 3.1 ECB模式 优点: 1. ...
- Asp.net的sessionState四种模式配置方案
sessionState节点的配置 web.config关于sessionState节点的配置方案,sessionState有四种模式:off,inProc,StateServer,SqlServer ...
随机推荐
- WebLogic口令猜解工具【Python脚本】
WebLogic 默认端口7001 可以通过如下链接访问控制台 http://10.9.1.1:7001/console/login/LoginForm.jsp 写了一个简单的猜解脚本,半成品,做个记 ...
- Android 的 DatePicker、TimePicker或NumberPicker
布局文件加上这个就可以,去除日期选择器.时间选择器或数值选择器的可编辑状态. android:descendantFocusability="blocksDescendants" ...
- 编程:递归编程解决汉诺塔问题(用java实现)
Answer: //Li Cuiyun,October 14,2016. //用递归方法编程解决汉诺塔问题 package tutorial_3_5; import java.util.*; publ ...
- 前端学习 第三弹: JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- 第一篇(C#中?与??)
不聊闲话,上干货~!(新手初上路,大牛莫喷,谢谢!) 先说?? 在C#中有个三元运算符 X= A==null?B:A 其中A为bool型.当A为空时,X的值为B;当A不为空时,X的值为A. 现在有个 ...
- 学习css中得与惑
css的学习分享 所学的css知识看多,会看懂.这只是在实践中发现的问题: 一. ???h1比div还大 h1上下有边距 为什么浮动不了 (现不知道) 二. css写了 表现不出来.... ...
- [stat.simulation] Hasting-Metropolis Algorithm
问题背景:我们有一些观测数据X,这些数据假设是取值为1,...,m:我们还知道每个数据观测到的频数为: 但是我们现在无法计算B的大小.(这是一个假设,毕竟计算一串数字的和不是难事) 问题: 我们需要通 ...
- AT Tool --- android手机发送at指令
之前网上也有一款类似的软件,估计是华为内部人员开发的,不过很变态,不但只支持华为的几款手机,而且只能发一条AT命令,然后就不让你发了:所以很气愤,今天花了一天时间自己写了这么款程序,而且是支持所有An ...
- selenium环境搭建
开发环境: 1.jdk 2.eclipse 3.selenium,selenium只需要selenium-java-2.45.jar这个就可以 具体搭建步骤可参考:http://www.cnblogs ...
- linux 1-100的累加
[ ] 判断式.它的使用和test命令一样 [ ]的判断符,只会返回2种值.0(真) 非0(假) -gt 大于-lt 小于-eq 等于-ne 不等于-ge 大于等于-le 小于等于 while ...