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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
建立文件交换功能的脚本(二)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
linux iconv方法的使用
2011/10/01 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP chr()函数讲解
2019/02/11 PHP
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
django 常用orm操作详解
2017/09/13 Python
python和ruby,我选谁?
2017/09/13 Python
python之文件读取一行一行的方法
2018/07/12 Python
python读写配置文件操作示例
2019/07/03 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
会计毕业自我鉴定
2014/02/05 职场文书
法学专业求职信范文
2015/03/19 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
详解Python自动化之文件自动化处理
2021/06/21 Python
python使用torch随机初始化参数
2022/03/22 Python