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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php读取xml实例代码
2010/01/28 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP中使用BigMap实例
2015/03/30 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
js动态生成指定行数的表格
2013/07/11 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
python进行两个表格对比的方法
2018/06/27 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
学生违反校规检讨书
2014/10/28 职场文书
长城英文导游词
2015/01/30 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
小学体育课教学反思
2016/02/16 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android