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 ...
随机推荐
- c# 函数
1.输入三个数,求最大的数. 2.输入一个数,求1~n的和. 3.求n的阶乘. 4.输入一个小于等于100的数,判断是否是100,还是小于10,还是两位数.
- node.js Stream Buffer FsPromise
Stream: 类似这样:a.pipe(b).pipe(c); 我想写一个b.所以: var rs=new (require('stream').Readable)(); var ws=new (re ...
- Dos学习笔记(3)attrib命令
今天和昨天一直在摸索这个命令觉得这个命令为什么改变不了文件夹的属性, 因为我试着用attrib +r /s 去修改子文件夹的时候发现没用,然后如果输入 attrib +r /d 又提示说/d需要和/s ...
- jQuery中的get()方法
get()方法用于从jQuery对象中获取DOM元素,有以下两种使用方式: 1. get(index):获取jQuery对象中拥有指定索引的DOM元素. 2. get():获取包含jQuery对象中所 ...
- 流编辑器-sed
sed 参数: 1.'s' 替换 sed 's/search-word/replace-word/' file-name 替换file-name文件中的search-word为replace-word ...
- java-装箱/拆箱-字符串转换成基本数据类型
一.理解java中包的含义及种类 java是一个面向对象编程,即一切皆是对象,那么有一个矛盾,从数据上划分知道java中的数据分为基本数据类型和引用数据类型,但是基本数据类型如何是一个对象呢?此时,就 ...
- github上传本地项目
github上传本地项目,分为两个部分: 1.如果建立了ssh key的,直接看第二部分的上传部分就行了 2.如果没有建立ssh key的,就从头开始看吧 ——————————————————我是快乐 ...
- PHP在yii2中封装SuperSlide 幻灯片编写自己的SuperSlideWidget的例子
因为近期给朋友公司做个门户网站,把荒置了6.7年的PHP又重新拾起,发现PHP这些年兴旺多了,很多新的东西看的不明不白,研究了几个框架ZendFramework.thinkphp.Symfony.yi ...
- Java Junit单元测试
使用Junit进行单元测试,首先引入Junit的jar,配置如下. @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(&quo ...
- [转]libevent简介和使用
libevent是一个基于事件触发的网络库,memcached底层也是使用libevent库. 总体来说,libevent有下面一些特点和优势:* 事件驱动,高性能:* 轻量级,专注于网络: * 跨平 ...