js函数调用常用方法详解


Posted in Javascript onDecember 03, 2012

来源 javascript语言精粹。这不是书上的源代码。
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments 。arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度。
书上有说4中调用方式:
方法调用模式
函数调用模式
构造器调用模式
apply调用模式

下面我们来看看一些实例更好理解。
1:方法调用模式
请注意this此时指向myobject。

/*方法调用模式*/ 
var myobject={ 
value:0, 
inc:function(){ 
alert(this.value) 
} 
} 
myobject.inc()

2:函数调用模式
请注意this此时指向window。
/*函数调用模式*/ 
var add=function(a,b){ 
alert(this)//this被绑顶到window 
return a+b; 
} 
var sum=add(3,4); 
alert(sum)

3:构造器调用模式
javascript语言精粹一书建议摒弃这中方式。因为有更好的方式。这里先不介绍。下次发表博文的时候贴出来。
会在这里加一个连接。
/*构造器调用模式 摒弃*/ 
var quo=function(string){ 
this.status=string; 
} 
quo.prototype.get_status=function(){ 
return this.status; 
} 
var qq=new quo("aaa"); 
alert(qq.get_status());

4:apply调用模式
==我们可以来看一个更有用的apply实例。看最下面的代码。
/*apply*/ 
//注意使用了上面的sum函数 
//与myobject 
//这中调用方式的优点在于可以指向this指向的对象。 
//apply的第一个参数就是this指针要指向的对象 
var arr=[10,20]; 
var sum=add.apply(myobject,arr); 
alert(sum);

看这个apply真正应用。bind这是一个绑定时间的函数。
var bind=function(object,type,fn){ 
if(object.attachEvent){//IE浏览器 
object.attachEvent("on"+type,(function(){ 
return function(event){ 
window.event.cancelBubble=true;//停止时间冒泡 
object.attachEvent=[fn.apply(object)];//----这里我要讲的是这里 
//在IE里用attachEvent添加一个时间绑定以后。 
//this的指向不是到object对象本身所以。我们绑定的function里的this.id是无法正常工作的。 
//但是如果我们用fn.apply(object) 
//这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以this.id就变成了 
//object.id 可以正常工作了。 
} 
})(object),false); 
}else if(object.addEventListener){//其他浏览器 
object.addEventListener(type,function(event){ 
event.stopPropagation();//停止时间冒泡 
fn.apply(this) 
}); 
} 
} 
bind(document.getElementById("aaa"),"click",function(){alert(this.id)});
Javascript 相关文章推荐
Js+XML 操作
Sep 20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
JS随即打乱数组实现代码
Dec 03 #Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 #Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 #Javascript
js操作textarea 常用方法总结
Dec 03 #Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
python创建线程示例
2014/05/06 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python requests模块cookie实例解析
2020/04/14 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
医学生求职自荐信
2013/10/25 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
法制宣传实施方案
2014/03/13 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers