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 遮罩层实现(mask)实现代码
Jan 09 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
python缩进区别分析
2014/02/15 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python标准库内置函数complex介绍
2014/11/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python高级特性简介
2020/08/13 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
自主招生自荐信格式
2013/12/03 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
售后服务承诺书模板
2014/05/21 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
给老婆道歉的话
2015/01/20 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python