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 关于伪类选择符的使用说明
Apr 24 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
js操作数组函数实例小结
Dec 10 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
js+css3制作时钟特效
Oct 16 Javascript
node中的cookie的具体使用
Sep 13 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue实现购物车列表
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生成excel文件的简单方法
2014/02/08 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python判断正负数方式
2020/06/03 Python
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
金融事务专业求职信
2014/04/25 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
红歌会主持词
2015/07/02 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python