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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JavaScript基础之this详解
Jun 04 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
js通过canvas生成图片缩略图
Oct 02 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
基于mysql的论坛(5)
2006/10/09 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
实例讲解php实现多线程
2019/01/27 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python+微信接口实现运维报警
2016/08/27 Python
Python列表切片用法示例
2017/04/19 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
投标单位介绍信
2014/01/09 职场文书
党员政治学习材料
2014/05/14 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS