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 解析后的xml对象的读取方法细解
Jul 25 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
vue插件实现v-model功能
Sep 10 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python实现备份文件实例
2014/09/16 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
学校后勤人员职责
2013/12/27 职场文书
品牌推广策划方案
2014/05/28 职场文书
教师一帮一活动总结
2014/07/08 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
晚会开场白和结束语
2015/05/29 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
js Proxy的原理详解
2021/05/25 Javascript
MySQL 条件查询的常用操作
2022/04/28 MySQL