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之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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继承的一个应用
2011/09/06 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
javascript 获取图片颜色
2009/04/05 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
php 修改密码实现代码
2017/05/24 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python yield 使用方法浅析
2017/05/20 Python
django Admin文档生成器使用详解
2019/07/22 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
岗位廉洁从政承诺书
2014/03/27 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Vue详细的入门笔记
2021/05/10 Vue.js
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫