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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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调用Oracle存储过程
2006/10/09 PHP
第七节--类的静态成员
2006/11/16 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
js实现验证码功能
2020/07/24 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
vue element实现表格合并行数据
2020/11/30 Vue.js
Windows环境下python环境安装使用图文教程
2018/03/13 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
实习教师自我鉴定
2013/09/27 职场文书
委托书范本
2014/04/02 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
高效课堂教学反思
2016/02/24 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书