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 相关文章推荐
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
Json实现传值到后台代码实例
Jun 30 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
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js+css在交互上的应用
2010/07/18 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python编码最佳实践之总结
2016/02/14 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python魔法方法详解
2019/02/13 Python
python使用Geany编辑器配置方法
2020/02/21 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
新闻记者个人求职的自我评价
2013/11/28 职场文书
税务会计岗位职责
2014/02/18 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
授权收款委托书
2014/09/23 职场文书
大学生求职自荐信
2015/03/24 职场文书
通知函的格式
2015/04/27 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript