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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
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
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
javascript import css实例代码
2008/07/18 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
什么是Remote Module
2016/06/10 面试题
金融专业个人求职信
2013/09/22 职场文书
师恩难忘教学反思
2014/04/27 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电