js 函数调用模式小结


Posted in Javascript onDecember 26, 2011

方法调用模式
当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上。

var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
} , 
toString : function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
} 
} 
alert(myObject);//[Object:myObject {value:0}]

函数调用模式
当一个函数并非一个对象的函数时,那么它被当作一个函数来调用,this被绑定到全局对象上。这是语言设计的一个错误。倘若语言设计正确,当内部函数调用时,this应该仍然绑定到外部函数的this变量上。如:
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
} , 
toString : function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
}, 
getInfo:function(){ 
return (function(){ 
return this.toString();//内部匿名函数中this指向了全局对象window 
})(); 
} 
} 
alert(myObject.getInfo());//[object Window]

当幸运的是,有一个很容易的解决方案:定义一个变量并给它赋值为this,那么内部函数通过该变量访问到指向该对象的this,如:
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
} , 
toString : function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
}, 
getInfo:function(){ 
var self=this; 
return (function(){ 
return self.toString();//通过变量self指向myObject对象 
})(); 
} 
} 
alert(myObject.getInfo());//[Object:myObject {value:0}]

构造器调用模式
JavaScript是一门基于原型继承的语言。这意味着对象可以直接从其他对象继承属性。该语言是无类别的。
如果一个函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到构造函数的实例上。
function MyObject(name){ 
this.name=name || 'MyObject'; 
this.value=0; 
this.increment=function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
}; 
this.toString=function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
} 
this.target=this; 
} 
MyObject.prototype.getInfo=function(){ 
return this.toString(); 
} 
/* 
同时创建一个MyObject.prototype对象,myObject继承了MyObject.prototype的所有的属性, 
this绑定到了MyObject的实例上 
*/ 
var myObject=new MyObject(); 
var otherObject=new MyObject(); 
//alert(myObject.target===myObject);//ture 
//alert(myObject.target.getInfo());//[Object:MyObject {value:0}] 
myObject.increment(10); 
otherObject.increment(20); 
alert(myObject.value);//10 
alert(otherObject.value);//20

Apply 调用模式
JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。
函数的apply方法,如同该对象拥有此方法,使该对象拥有此方法。此时this指向该对象。
apply接收两个参数,第一个是要绑定的对象(this指向的对象),第二个是参数数组.
function MyObject(name){ 
this.name=name || 'MyObject'; 
this.value=0; 
this.increment=function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
}; 
this.toString=function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
} 
this.target=this; 
} 
function getInfo(){ 
return this.toString(); 
} 
var myObj=new MyObject(); 
alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj 
alert(getInfo.apply(window));//[object Window],this指向window
Javascript 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
JavaScript 原型继承
Dec 26 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 #Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 #Javascript
关于跨站脚本攻击问题
Dec 22 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
十大“创意”战术!
2020/03/04 星际争霸
基于PHPExcel的常用方法总结
2013/06/13 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python import自定义模块方法
2015/02/12 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python爬虫 requests-html的使用
2020/11/30 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
班级德育工作实施方案
2014/02/21 职场文书
说明书范文
2014/05/07 职场文书
煤矿安全生产标语
2014/06/06 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
党员转正申请报告
2015/05/15 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript