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 ...
随机推荐
- 将jar包直接Buldpath所引起的问题
今天在学习jasperReports时遇到个很郁闷的问题,发现自己的jar包通过Buildpath导进去后,一运行,出现了一些错误. 找不到类 这就很尴尬了,我已经按要求都导进去了,竟然提示我找不到类 ...
- 启用Servlet 3.0新特性——注解支持
Servlet 3.0版本新增注解支持,可是在实际使用中,添加的注解总是不起作用.经过检查,原来是“web.xml”文件的顶级标签“<web-app/>”中的一个叫做“metadata-c ...
- LeetCode-Subsets
Given a set of distinct integers, nums, return all possible subsets. Note: The solution set must not ...
- Python初学的易犯错误
当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...
- Centos下安装和配置SVN
1.安装SVN服务 #检查现有版本 rpm -qa subversion #如果存储旧版本,卸载旧版本SVN yum remove subversion #安装SVN yum install subv ...
- C++ 资源大全
http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html <C++ ...
- Selenium2入门(二)WebDriver
前文Selenium2入门(一)说到Selenium是Web 应用程序测试框架,那么如果对一个简单的web应用需求:打开浏览器,登录百度首页,输入“欧洲杯”关键词,点击搜索按钮 这一系列操作,能否用S ...
- python3.5学习笔记--利用字典对指定文本字符串进行替换
事情缘起于同事整理excel,需要批量的对某一列的内容进行替换. 举例: 数据格式:以下为一列内容,每行都在一个单元格中,目的是将数字替换为制定的中文字符. 1,2,31 ,4,33 ,21,, 对于 ...
- VR定制 AR定制 就找北京动软VR开发团队(VR案例 AR案例)
我们长期承接丰交互软件.游戏项目外包: VR/AR内容应用定制.VR.AR游戏项目外包(有主流测试硬件设备) VR全景应用.视频外包 请提供贵公司的信息,我们将提供高大上的VR案例欢迎联系我们给您提供 ...
- 将类数组arguments转化成数组
一.将arguments对象绑定到slice方法上 二. 例子: //闭包 二次封装函数 求和 function partialUsingArguments(fn) { var args = Arra ...