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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
js原型链原理看图说明
Jul 07 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
基于JavaScript实现留言板功能
Mar 16 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
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
python logging模块的使用
2020/09/07 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
门卫工作岗位职责
2013/12/17 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014年统计工作总结
2014/11/21 职场文书
出租车拒载检讨书
2015/01/28 职场文书
文书工作总结(范文)
2019/07/11 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Python开发五子棋小游戏
2022/04/28 Python