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 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php实现的用户查询类实例
2015/06/18 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
打架检讨书50字
2014/01/11 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
学习十八大的心得体会
2014/09/12 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
课外活动总结
2015/02/04 职场文书
党支部审查意见
2015/06/02 职场文书