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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python 调用Java实例详解
2017/06/02 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Django进阶之CSRF的解决
2018/08/01 Python
python程序需要编译吗
2020/06/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
成品仓管员岗位职责
2013/12/11 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
语文教研活动总结
2014/07/02 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
庆六一宣传标语
2014/10/08 职场文书
普通党员整改措施
2014/10/24 职场文书
写给导师的自荐信
2015/03/06 职场文书
聘任合同书
2015/09/21 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书