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中的常用算法与函数
Nov 21 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
DC动漫人物排行
2020/03/03 欧美动漫
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
项目经理任命书范本
2014/06/05 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
计划生育工作总结2015
2015/04/03 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP