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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
python 异常处理总结
2016/10/18 Python
Python科学画图代码分享
2017/11/29 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
详解python中eval函数的作用
2019/10/22 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python 实现屏幕录制示例
2019/12/23 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
银行批评与自我批评
2014/02/10 职场文书
护理专科自荐书范文
2014/02/18 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书