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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
js编写三级联动简单案例
Dec 21 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php实现可逆加密的方法
2015/08/11 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
PHP 实现缩略图
2021/03/09 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python探索之ModelForm代码详解
2017/10/26 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
仓管岗位职责范本
2014/02/08 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
公司市场部岗位职责
2015/04/15 职场文书
离婚协议书范文2016
2016/03/18 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript