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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JS实现瀑布流布局
Oct 21 Javascript
实例分析js事件循环机制
Dec 13 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python递归函数定义与用法示例
2017/06/02 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
腾讯广告词
2014/03/19 职场文书
小班下学期评语
2014/05/04 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
python实现自动化群控的步骤
2021/04/11 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL