js 函数的调用模式
1、函数调用
调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数。除了函数声明时定义的形参,每个函数还接受两个附加的参数:this和arguments(arguments并不是一个真正的数组,它拥有length属性,但它缺少数组的所有方法)。参数this在面向对象编程中非常重要,它的值取决于调用的模式。
在js中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。arguments的个数取决于函数定义时候形参的个数,如果调用函数时,传递的形参与函数定义的参数个数不匹配不会导致运行错误,调用时传递的参数过多,
超出的参数会被忽略,如果过少,缺失的值被undefined代替。
2、方法调用模式
var myObj = {
value:0,
increment:function(val){
this.value += typeof val ==="number" ? val : 1;//this为myObj对象
}
};
myObj.increment();
document.write(myObj.value);//
myObj.increment(2);
document.write(myObj.value);//
方法可以使用this去访问,所以它能从对象取值或修改该对象。this到对象的绑定发生在调用的时候。这个“超级”迟绑定使得函数可以对this高度复用。通过this可取得它们所属对象的上下文的方法称为公共方法。
3、函数调用模式
var name = "zhangsan";//aa变量加载到了window对象上
function test(){
function test1(){
document.write(this.name);//zhangsan,this为window对象
};
test1();
}
test();
当函数以此模式调用时,this被绑定到全局对象。这是语言设计的一个错误。倘若语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误的后果是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。
幸运的是,有一个很容易的解决方案:如果该方法定义一个变量并给它赋值为this,那么内部函数就可以通过那个变量访问到this,按照约定,我给那个变量命令为that
//目的:使用add方法对数值进行相加
//给myObject增加一个double方法。
myObject.double = function(){
var that = this;//解决方法
var helper = function(){
that.value = add(that.value,that.value);//add方法为两数字相加
};
helper();//以函数的形式调用helper
};
//以方法模式调用double
myObject.double();
document.write(myObject.getValue());//6,这样helper方法可以使用this
4、构造器调用模式
对象实例调用原型中的方法时,该方法可以使用this访问其构造函数内的属性或方法。
//创建一个名为Quo的构造函数,它构造一个带有status属性的对象。
var Quo = function (str,name){
this.status = str;
this.name = name;
};
//给Quo的所有实例提供一个名为get_status的公共方法。
Quo.prototype.get_status = function(){
return this.status;//this能访问到status
};
Object.prototype.get_name = function(){
return this.name;//能访问到name
};
//构造一个Quo实例
var myQuo = new Quo("confused","zhangsan");
//confused,document.write()和document.writeln都是js向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,即页面的实际效果是没有换行的。
document.writeln(myQuo.get_status());
document.write(myQuo.get_name());//zhangsan
5、Apply调用模式
apply方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择this的值。
apply方法接受两个参数,第一个是将被绑定给this的值,第二个就是一个参数数组。
var myStatus = {
status:'A-OK'
};
//myStatus并没有继承自Ouo.prototype。但我们可以在myStatus上调用get_status方法,尽管myStatus并没有一个名为get_status的方法
var st = Quo.prototype.get_status.apply(myStatus);//A-OK
var st1 = myQuo.get_status.apply(myStatus);//A-OK
js 函数的调用模式的更多相关文章
- JavaScript函数的调用模式
我们说一个函数的调用模式是作为一个函数来调用,是要与其它三种调用模式做区分函数其他的三种调用: 方法调用模式,构造器调用模式,apply/call调用模式. 方法的调用模式: var obj={ fu ...
- js函数的调用问题
1.js函数的调用方式有三种.请问以下“二”处的几行代码有什么猫腻? //一 事件调用 btn.onclick=fn; //二 直接调用(window调用) fn(); //自上而下解析到这一行的时候 ...
- JS高级——函数的调用模式
函数调用模式一共有四种 <script> //1.函数模式 //this指向window全局对象 //2.方法模式 //this指向调用这个方法的对象 //3.构造函数模式 //this ...
- JS函数-我调用自己试试看
前言 最近在读<JavaScript语言精粹>,对递归函数有了进一步的认识,希望总结下来: 递归是一种强大的编程技术,他把一个问题分解为一组相似的子问题,每一问题都用一个寻常解去解决.递归 ...
- flash、js 函数 互相调用
js调用flex函数 flex 利用ExternalInterface.addCallback(“注册的方法名”,As中的函数名)进行注册 js中,用document.getElementById(“ ...
- js 四种调用模式和this的关系总结
更新: 这篇又简单又明了啊喂 首先看这一篇, 很简单很清楚了,http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascri ...
- js函数简单调用
<script> //最简单的调用 //这是JavaScript DOM编程艺术(第2版)关于函数的原码 function convertToCelsius(temp) { var res ...
- VC与JavaScript交互(二) --- 调用JS函数
这一章,我们来动手实践VC调用JS函数. 我们动手写一个HTML,其中包含这样一段JS代码: //[html] <script type="text/javascript"& ...
- JavaScript函数的各种调用模式
函数是JavaScript世界里的第一公民,换句话来说,就是我们如果可以精通JavaScript函数的使用,那么对JavaScript的运用可以更游刃有余了.熟悉JavaScript的人应该都知道,同 ...
随机推荐
- System.setProperty()
/* * 设置指定键对值的系统属性 * setProperty (String prop, String value); * * 參数: * prop - 系统属性的名称. * value ...
- 异常处理之namespace找不到
最近在做控件的时候遇到了这么一个异常 就是说类库中明明就有命名空间,但是在winForm中引用的时候也能正常显示, 可是编译的时候却报 找不到指定的命名空间 这样的异常,头痛了好久,结果看到了winF ...
- shell导出和导入redis
1.导出redis #!/bin/bash REDIS_HOST=localhost REDIS_PORT=6379 REDIS_DB=1 KEYNAME=redis:hash:* KEYFILE=k ...
- nginx1.4.6+php5.5.11+mysql5.6.17+mecache+opcache
要用到的软件:libiconv-1.13.tar.gz libmcrypt-2.5.8.tar.gz mcrypt-2.6.8.tar.gz mhash-0.9.9.9.tar.gz memcache ...
- The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 2
转载:https://www.linux.com/learn/linux-career-center/39972-kernel-debugging-with-proc-qsequenceq-files ...
- entity framework 连接 oracle 发布后出现的问题(Unable to find the requested .Net Framework Data Provider)
用entity framework 搭建的一个windows 程序,在vs中用oracle 的ODT 工具连接oracle数据库,昨天发布后出现下面一个错误, System.ArgumentExcep ...
- MVC+jquery+AJAX的几种方式
// 传过去一个简单值,获取一个简单值 $.ajax({ type: "GET", url: '<%= Url.Action("xx", "Co ...
- 20145102 《Java程序设计》第5周学习总结
20145102 <Java程序设计>第5周学习总结 教材学习内容总结 数组在内存中会是连续的线性空间,根据索引随机取回时速度快,如果操作上有这类需求时,像是排序,就可以使用;ArrayL ...
- ZWave for Arduino
https://sites.google.com/site/arduinozwave/http://www.ebay.com/sch/i.html?_trksid=p2050601.m570.l131 ...
- 【转】ASP.NET 高效分页存储过程
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...