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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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实现的MySQL通用查询程序
2007/03/11 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
python入门之井字棋小游戏
2020/03/05 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
.NET面试问题集
2015/12/08 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
《赶海》教学反思
2014/04/20 职场文书
计算机求职信
2014/07/02 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书